Question

<div id="main-content">
  <div>
    <div>target me
         <div>don't target me</div>
    </div>
  </div>
  <div>
    <div>target me too
         <div>don't target me</div>
    </div>
  </div>
</div>

I’ve tried this:

#main-content div>div {

}

But this ALSO targets the divs saying “don’t target me” I wish not to target those divs.

Of course we can use Id’s or classes, but the point is to declare a general rule for all.

Please advice.

Answer 1

Just refine the selector a bit to enforce the hierarchy: #main-content > div > div

http://jsfiddle.net/zXaLU/

As a note, when using structural selectors it’s nice to reference non-generic tags.

Example: #main-content > NAV > UL is more meaningful than #main-content > DIV > DIV