Selecionando a primeira ocorrência de uma classe dentro de um pai

Em CSS, o desafio surge quando você precisa direcionar o primeiro elemento de um classe específica dentro de um elemento pai, especialmente quando a classe pode aparecer em posições variadas dentro de seus irmãos. Esse problema se torna ainda mais complexo quando a classe do elemento pai ou a estrutura filho podem ser diferentes.

A :first-of-type Pseudo-Class

CSS3 oferece o :first Pseudoclasse -of-type, que permite selecionar o primeiro elemento de um tipo específico dentro de seus irmãos. No entanto, não existe uma pseudoclasse equivalente :first-of-class especificamente para selecionar o primeiro elemento de uma determinada classe.

Uma solução alternativa usando ~ e seletor geral de irmãos

Uma solução alternativa é usar o combinador geral de irmãos (~) junto com uma regra de substituição. Conhecendo os estilos padrão aplicados a outros elementos da mesma classe, você pode criar uma regra mais específica que substitua os estilos padrão apenas para os elementos que seguem a primeira ocorrência da classe de destino.

Exemplo :

.parentClass > * > .targetClass {
    /* Apply styles to all .targetClass elements within .parentClass */
}

.parentClass > * > .targetClass ~ .targetClass {
    /* Apply overriding styles only to .targetClass elements that follow */
}

Ilustração:

Considere a seguinte estrutura HTML:

    
...
    
First target
    
Second target
    
Third target

Nesse cenário, a primeira regra aplicaria estilos a todos os elementos com a classe "targetClass" dentro do elemento "parentClass". A segunda regra substituiria esses estilos para todos os elementos "targetClass" que seguem a primeira, revertendo quaisquer estilos personalizados aplicados pela primeira regra.

Compatibilidade do navegador:

O combinador irmão geral (~) é reconhecido pelo IE7 e posterior. Portanto, esta solução alternativa é compatível com todos os principais navegadores, exceto IE6.