How to properly select these elements? - css

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

Answer 2

If you want styles only to apply to the outer of the two divs, you need to use two style definitions. The first sets the style for the div targeted and the second for the inner div not to be targeted:
#main-content div>div {
/* set some styles */
}
#main-content div>div>div {
/* reset the styles defined before */
}
In general the inner div (not targeted) inherits all the styles of its parent div, so in order to nullify that effect, you have to explicitly reset all those styles again.
EDIT
After all comments: If "targeting" does not include usual CSS inheritance, Tim Medora's answer is more suitable. My answer tried to account for inheritance as well.

Answer 3

How [dooes one] properly select [the specified] elements?
The "proper" way would be to give the items you want to select a class that is indicative of their status:
<div id="main-content">
<div>
<div class="someclass">target me
<div>don't target me</div>
</div>
</div>
<div>
<div class="someclass">target me too
<div>don't target me</div>
</div>
</div>
</div>
...and then you can simply use the class selector:
.someclass {
...styles...
}
But if you're unable to modify the markup, you can still use the child selector chain:
#main-content > div > div {
...styles...
}