Estilizando elementos n-filhos aninhados em vários pais

Buscando uma solução para estilizar elementos aninhados específicos em estruturas pai variadas, considere a marcação a seguir :

• one
• two

• three

• four

O objetivo é aplicar estilos a "um" e "três", independentemente de serem os primeiros filhos de cada

.

Limitação de :nth-child()

As tentativas de usar :nth-child() são insuficientes porque se aplicam apenas a elementos que compartilham o mesmo pai. Nesse cenário, o seletor CSS .foo li:nth-child(1), .foo li:nth-child(3) teria como alvo apenas os primeiros filhos de cada

.

Alternative Soluções

JavaScript:

Usar uma biblioteca como jQuery permite selecionar elementos usando os poderosos recursos de filtragem do JavaScript. Por exemplo, o script a seguir teria como alvo o primeiro e o terceiro elementos

• dentro do contêiner .foo:

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

  Marcação explícita de elementos:

  Você pode marcar explicitamente os elementos desejados com classes ou IDs para permitir sua seleção via CSS. Por exemplo, adicionando classes ao primeiro e terceiro elementos

• :

• one
• two

Então, você pode usar CSS para direcionar os elementos marcados:

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