Selector de CSS para orientar solo hijos inmediatos y no otros descendientes idénticos

Question

Tengo una lista ordenable anidada que puede tener elementos añadidos o eliminados dinámicamente y se pueden anidar en niveles n profundos. Al anidar, se inyecta un nuevo elemento ul en cualquier elemento li que se seleccione para ser el padre. El estado inicial de la lista es algo como lo siguiente:

<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> 

estoy usando MooTools que ver el tipo, etc., y funciona bien, pero estoy teniendo problemas para restablecer el texto de la posición correcta en la especie . Cada selector de CSS que trato de usar también incluye todos de los niños en lugar de solo los elementos li que pertenecen a la lista y no pertenecen a las sublistas. Supongamos que, a excepción del ID, la posición y el texto, cada elemento li en todas las listas es idéntico a todos los demás. ¿Hay un selector para obtener solo a los hijos inmediatos? Hay otra manera de hacer esto?

Probé algunos selectores de hijos como las mencionadas:

• ul > li seleccionará todos los elementos li que son un niño de un ul, no sólo los hijos inmediatos
• #parent > li hace lo mismo que el anterior .

Aquí está la función que estoy ejecutando cuando se tira un elemento, que no maneja la clasificación, que funciona bien, simplemente actualizando la posición. Tenga en cuenta que también es MooTools sintaxis:

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++; 
     }); 
    }); 
} 

Actualmente, el cambio de cualquier orden de los elementos en el nivel principal volverá a numerar todo 1-12, incluso las sublistas. El cambio de cualquier elemento en una sublista dará los números correctos para esa lista, pero hará que las listas principales cuenten incorrectamente todos los elementos secundarios li en la numeración.

Siento que este es un truco feo, pero funciona:

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 

sólo los hijos inmediatos. Así, por ejemplo, para hacer sólo los elementos de la lista de nivel superior que puede usar:

#parent > li 

Nota: este no es compatible con IE6.

La solución común para la compatibilidad hacia atrás es hacer algo como esto:

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

Es más tedioso porque hay que aplicar estilos y luego apagarlos (y puede que no necesariamente saben lo que los viejos valores son) pero es la única solución de CSS puro compatible con IE6 que existe.

Edición: Ok, usted tiene un problema específico de MooTools. getElements() devuelve todos los descendientes, no solo los hijos inmediatos. Intenta usar 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++; 
     }); 
    }); 
} 

o algo así.

Answer 2

La pregunta original no fue respondida.: only-child solo funciona si el único hijo no tiene hijos descendientes. La publicación original sugería que la inclusión de hijos descendientes se debía a ul> li, mientras que de hecho se debe a un error en: único-hijo. Paradójicamente: first-child selecciona al primer niño en una lista con hijos descendientes, al igual que last-child, pero: only-child no lo hace. Lo comprobé en Firefox, Opera y Chrome. Aquí hay un ejemplo:

<!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> 

Para activar: first-child y: last-child rules eliminan los dos últimos elementos. La implementación del Selectors Level 3 standard es, por lo tanto, inconsistente en los principales navegadores. La regla: first-child no se debe activar cuando hay una regla: only-child y un único hijo tiene descendientes. En el ejemplo, el hijo único debe ser rojo pero es verde.