CSS selector to target only immediate children, not other identical descendants

Question

I have a nested sortable list that can contain items dynamically added or deleted, and can be n-level deep nested. When nested, the new ul element is inserted into any li element selected as the parent. The initial state of the list looks something like this:

<ul id="parent"> <li id="One"><a href="" class="listLink"><span class="position">1</span>One</a></li> <li id="Two"><a href="" class="listLink"><span class="position">2</span>Two</a></li> <li id="Three"><a href="" class="listLink"><span class="position">3</span>Three</a> <ul> <li id="A"><a href="" class="listLink"><span class="position">1</span>A</a></li> <li id="B"><a href="" class="listLink"><span class="position">2</span>B</a></li> <li id="C"><a href="" class="listLink"><span class="position">3</span>C</a></li> <li id="D"><a href="" class="listLink"><span class="position">4</span>D</a></li> <li id="E"><a href="" class="listLink"><span class="position">5</span>E</a></li> <li id="F"><a href="" class="listLink"><span class="position">6</span>F</a></li> </ul> </li> <li id="Four"><a href="" class="listLink"><span class="position">4</span>Four</a></li> <li id="Five"><a href="" class="listLink"><span class="position">5</span>Five</a></li> <li id="Six"><a href="" class="listLink"><span class="position">6</span>Six</a></li> </ul> 

I use MooTools for sorting, etc., and it works fine, but I am having problems properly setting the position text when sorting. Each CSS selector that I am trying to use also includes all the child elements, not just the li elements that are on the list, and not any subscription elements. Suppose that with the exception of id, position and text, each li element in all lists is identical to all the others. Is there a selector for only immediate children? Is there any other way to do this?

I tried some child selectors as mentioned:

• ul > li Selects all li elements that are children of ul, not just the immediate children
• #parent > li Does the same as above.

Here is the function that I'm running now when I drop an element that does not handle sorting, which works just fine by simply updating the position. Note that this is also the syntax of MooTools:

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

Currently, changing any order of items at the main level will number all 1-12, even the sublist. Changing any element in the sublist will give the correct numbers for this list, but it makes the parent lists incorrectly count all li child elements in the numbering.

I feel like this is an ugly hack, but it works:

 var drop = function(){ var ulCount = 1; $$('ul').each(function(item){ if(item.get('id') != 'parent') { item.set('id', 'id-'+ulCount); } var elId = item.get('id'); var posCount = 1; $(document).getElements('#'+elId+'>li>a>span[class=position]').each(function(pos){ pos.set('text', posCount); posCount++; }); ulCount++; }); } 

Answer 1

 ul > li 

only coming children. So, for example, to use only top-level list items that you could use:

 #parent > li 

Note. This is not supported in IE6.

A common solution for backward compatibility is to do something like this:

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

This is tedious because you have to apply styles and then turn them off (and maybe you don't need to know what the old values ​​are), but this is the only clean way for CSS to work around for IE6.

Edit: You have a problem with MooTools. 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.