styling a div in css

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

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 2

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 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>