first_page the funky knowledge base
personal notes from way, _way_ back and maybe today

CSS Child Selectors and Descendant Selectors; Microsoft Internet Explorer Limitations; webmasterworld.com

selector[1] > selector[2]{ [property]: value }

This is called the child selector. In browsers that support it (all but IE), it applies the styles to selector2 child elements of selector1.

For instance, if you had this code...

html: <div id="box"> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p> </div>

…and you wanted all of the paragraphs in it to have blue text, you could use the child selector...

css: #box > p{ color:blue; }

…which applies it's styles to all the <p> children of #box. This is similar to the decendant selector...

css: #box p { color:blue; }

…which in this situation would work identically, but it's a little different. The decendant selector will apply to ALL decendants (elements nested in any element that is nested in #box), whereas the child selector applies only to the direct children of the parent (elements nested in #box).

We'll need slightly more complicated code to see this...

html: <div id="box"> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p> <div> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p> </div> </div>

Applying the same css to this, the child selector would color only the first two paragraphs blue, but would leave the other two, the one's inside of the non-IDed div, at the default text color. The descendant selector, however, would color all four paragraphs blue since they are all decendants (two children, two grandchildren) of the parent #box.

Going by this "official" application, the child selector's usefulness is limited to situations in which the order of nesting requires applying styles to child elements but not grand- (or great-grand) child elements.

It has another use, however, that stems from IE's conspicuous lack of support for it.

Since no IE browser recognizes the child selector, it is often used as a way to feed other browsers style information that must be hidden from IE. There's a good chance that this is what it is doing in the code you've seen.

[http://www.webmasterworld.com/forum83/5944.htm]

mod date: 2009-10-16T19:54:23.000Z