CSS: O Guia Definitivo, 5ª Edição

Capítulo 3. Seletores de Pseudo-Classe e -Elemento

Este trabalho foi traduzido com recurso a IA. Agradecemos o teu feedback e comentários: [e-mail]

No capítulo anterior, viste como os selectores podem corresponder a um único elemento ou a uma coleção de elementos, utilizando expressões bastante simples que correspondem a atributos HTML no documento. Isso é ótimo se a tua necessidade é apenas estilizar com base em atributos, mas e se precisares de estilizar parte de um documento com base no seu estado ou estrutura atual? Ou se quiseres selecionar todos os elementos do formulário que estão desactivados, ou aqueles que são necessários para que a submissão do formulário seja permitida? Para estas coisas, e muitas mais, o CSS tem os selectores pseudo-classe e pseudo-elemento.

Seletores de pseudo-classe

Os selectores de pseudo-classes permitem-te atribuir estilos ao que são, de facto, classes fantasma inferidas pelo estado de certos elementos, ou padrões de marcação dentro do documento, ou mesmo pelo estado do próprio documento.

O termo classes fantasma pode parecer um pouco estranho, mas é realmente a melhor maneira de pensar em como as pseudo-classes funcionam. Por exemplo, supõe que queres destacar todas as outras linhas de uma tabela de dados. Podes fazê-lo marcando todas as outras linhas com algo como class="even" e depois escrevendo CSS para destacar as linhas com essa classe - ou (como verás em breve) podes usar um seletor de pseudo-classes para obter ...