Estilizando enésimos filhos específicos em vários pais

Ao estilizar elementos aninhados usando o seletor n-ésimo filho, é crucial observar que o seletor opera dentro de um contexto pai único. Isso pode levar a desafios ao segmentar elementos filhos específicos em vários pais.

O problema:

Considere a seguinte marcação:

    
one
        
two
    
three
    
four
    

O objetivo é estilizar o primeiro e o terceiro elementos li em .foo. Usando o seguinte CSS:

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

Essa abordagem não funcionará porque o n-ésimo filho seleciona o primeiro e o terceiro filho de cada ul.

A solução:

Usando CSS sozinho, não é possível atingir enésimos filhos de vários pais. No entanto, existem soluções alternativas:

• JavaScript: Bibliotecas como jQuery facilitam a manipulação de elementos DOM e a seleção de elementos específicos, como $('.foo li:eq( 0), .foo li:eq(2)').
• Marcação explícita: Adicione classes ou IDs explicitamente ao primeiro e terceiro elementos li, como:

    
one
        
two
    
three
    
four
    

Em seguida, estilize-os usando as classes recém-adicionadas:

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