CSS selector for targeting only immediate children and not other identical descendants CSS selector for targeting only immediate children and not other identical descendants javascript javascript

CSS selector for targeting only immediate children and not other identical descendants


ul > li

only does the immediate children. So, for example, to do only the top level list elements you could use:

#parent > li

Note: this isn't supported on IE6.

The common workaround for backwards compatibility is to do something like this:

#parent li { /* style appropriately */ }#parent li li { /* back to normal */ }

It's more tedious because you have to apply styles and then turn them off (and you may not necessarily know what the old values are) but it's the only IE6-friendly pure CSS workaround there is.

Edit: Ok you have a MooTools specific issue. getElements() returns all descendants, not just immediate children. Try using getChildren().

var drop = function(el){    el.getParents('ul').reverse().each(function(item){        var posCount = 1;        item.getChildren("li").getElements("a span[class=position]").each(function(pos){                pos.set('text', posCount);                posCount++;        });    });}

or something like that.


The original question was not answered. :only-child only works if the only-child has no descendant children. The original post suggested that the inclusion of descendant children was due to ul>li whereas it is in fact due to a bug in :only-child. Paradoxically :first-child selects the first child in a list with descendant children, as does last-child, but :only-child does not. I checked this in Firefox, Opera and Chrome. Here is an example:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><style>.list>ul>li:only-child {color:red}.list>ul>li:first-child {color:green}.list>ul>li:last-child {color:blue}</style></head><body><div class="list"><ul><li>Item one</li><ul><l>Subitem one</li><li>Subitem two</li></ul></li><!--<li>Item two</li><li>Item three</li>--></ul></div></body></html>

To activate :first-child and :last-child rules uncomment the last two items. The implementation of the Selectors Level 3 standard is thus inconsistent in major browsers. The :first-child rule should not be activated when there is an :only-child rule and a unique child has descendants. In the example the only-child should be red but it is green.