Question

HTML:

<div id="wrapper">
  <div class="body">
     text text text
  </div>
  <div class="comment_submit">
       <!-- here goes username text field !-->
       <div class="body">
         <textarea></textarea>
       </div>
       <!-- here goes submit button !-->
    </div>
</div>

CSS:

#wrapper{
  float:left;
  width:100%;
}
#wrapper .body{
  border:1px solid red;
  background:#f5f5f5;
  padding:5px;
}
.comment_submit .body{
  border:2px solid red;
  background:#cccccc;
}

Why does body div which is inside comment_submit div gets the #wrapper .body style and not only the .comment_submit .body style?

i understand that #wrapper .body style includes all .body divs that are inside #wrapper but how i can stop this?

Answer 1

This solves your problem:

#wrapper > .body{
  border:1px solid red;
  background:#f5f5f5;
  padding:5px;
}

1. #wrapper .body = “Select every .body which is a descendant of #wrapper“.
2. .comment_submit .body = “Select every body class which is a descendant of .comment_submit.

ID selectors have a higher specifity than class selectors, so properties which are defined in the first selector take precedence over the ones from #2.

• The solution utilises the child selector, >, which says: “Select every .body element which is a direct child of #wrapper.