在CSS中设置div样式

Question

IF there is a div say

 <div class="ref"><contents goes here</div>

1. How to specify in the css as body of the div .Meaning

     <style> .ref body { /* ref body contents goes here*/ } </style> 

   Can anything like the above be done?

2. If any one can explain the below also

     <style> .a > .bb { } </style> 

What does the above mean?

Thanks..

Answer 1

body is a specific HTML element. In order to style the contents of a div with a class of ref , your CSS selector is simply .ref , not .ref body .

The > in CSS is called the child selector . It means that the element on the right must be a child element of the one on the left. So:

.a > .bb would match the bb div here:

<div class="a"><div class="bb"></div></div>

but not here:

<div class="bb"></div>

Answer 2

For the first one

CSS is only for styling you elements and not for showing HTML.

For the second on

styles all elements with class name 'bb' which are children[not descendants] of elements with class 'a'. See child selector

Ex 1

<div class="a">
    <div class="bb"></div>
</div>

Ex 2

<div class="a">
    <div class="bb"></div>
    <div>
        <div class="bb"></div>
    </div>  
</div>

Child selector will only select the first div with class 'bb' and not the inner div with class 'bb'.

Answer 3

For the first one, it's not totally clear what you mean. Just using .ref { /* CSS here */ } will target that div element. If you mean adding content via CSS, it's only possible using the :before and :after pseudo slectors:

.ref:after {
  content: "Some text";
}

Note: you can't put HTML in there, only text.

---

For the second one, it looks for all elements with a class of bb that are direct children of class a . For example, it will match the p in this code

<div class="a">
  <div>something</div>
  <p class="bb">class bb</p>
</div>

But it won't match this:

<div class="a">
  <div>
      <p class="bb">class bb</p>
  </div>
</div>