Estilo de enésimos hijos específicos entre varios padres

Al diseñar elementos anidados usando el selector de enésimos hijos, es fundamental tener en cuenta que el selector opera dentro de un contexto monoparental. Esto puede generar desafíos al abordar elementos secundarios específicos en varios padres.

El problema:

Considere el siguiente marcado:

    
one
        
two
    
three
    
four
    

El objetivo es diseñar el primer y tercer elemento li dentro de .foo. Usando el siguiente CSS:

.foo li:nth-child(1),
.foo li:nth-child(3)
{
    color: red;
}

Este enfoque no funcionará porque nth-child selecciona el primer y tercer hijo de cada ul.

La solución:

Usar CSS Por sí solo, no es posible dirigirse a niños enésimos de varios padres. Sin embargo, existen soluciones alternativas:

• JavaScript: Las bibliotecas como jQuery facilitan la manipulación de elementos DOM y la selección de elementos específicos, como $('.foo li:eq( 0), .foo li:eq(2)').
• Marcado explícito: Agregue clases o ID al primer y tercer elemento li explícitamente, como:

    
one
        
two
    
three
    
four
    

Luego, dales estilo usando las clases recién agregadas:

.foo li.first,
.foo li.third
{
    color: red;
}