Question

<article>
 <header targetme!>
  <h1 don't target me></h1>
 </header>
 <p targetme! ></p>
 <p targetme! ></p>
 <div targetme!>
  <p don't target me></p>
 </div>
</article>

Is there a CSS selector (IE7 and up) that we can use to select only the first descendants of a given element (in this case, article) ?

Answer 1

You can use the child combinator, >, which will select direct children only, along with the universal selector, *, to match all elements:

article > * {
    /* Your styles */
}

Note that while IE7 does support the child combinator, IE6 does not.