Diseñar elementos anidados de enésimo hijo en varios padres

Si busca una solución para diseñar elementos anidados específicos dentro de diferentes estructuras principales, considere el siguiente marcado :

• one
• two

• three

• four

El objetivo es aplicar estilos a "uno" y "tres", independientemente de si son los primeros hijos. de cada

.

Limitación de :nth-child()

Los intentos de utilizar :nth-child() se quedan cortos porque solo se aplica a elementos que comparten el mismo padre. En este escenario, el selector de CSS .foo li:nth-child(1), .foo li:nth-child(3) solo apuntaría a los primeros hijos de cada

.

Alternativa Soluciones

JavaScript:

El uso de una biblioteca como jQuery le permite seleccionar elementos utilizando las poderosas capacidades de filtrado de JavaScript. Por ejemplo, el siguiente script apuntaría al primer y tercer elemento

• dentro del contenedor .foo:

  $('.foo li:eq(0), .foo li:eq(2)')

  Marcado explícito de elementos:

  Puede marcar explícitamente los elementos deseados con clases o ID para permitir su selección a través de CSS. Por ejemplo, agregar clases al primer y tercer elemento

• :

• one
• two

Luego, puede usar CSS para apuntar a los elementos marcados:

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