Pseudo-classes estruturais
Parte da seção CSS Mastery do Journey de HTML da Coddy — lição 12 de 43.
Pseudo-classes estruturais no CSS são usadas para estilizar elementos com base em sua posição ou estrutura dentro do documento HTML. Elas permitem selecionar elementos como o primeiro filho, o último filho ou filhos numerados específicos sem a necessidade de classes ou IDs extras.
Exemplos comuns incluem:
:first-child— seleciona o primeiro filho de um elemento pai.
:last-child— seleciona o último filho de um pai.:nth-child(n)— seleciona o enésimo filho (ex: cada 2º, 3º, etc.).
Teste seus conhecimentosEsta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.
Teste seus conhecimentosEsta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.
Teste seus conhecimentosEsta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.
Folha de consulta
Pseudo-classes estruturais estilizam elementos com base em sua posição dentro do documento HTML:
:first-child— seleciona o primeiro filho de um pai:last-child— seleciona o último filho de um pai:nth-child(n)— seleciona o enésimo filho (ex: cada 2º, 3º, etc.)
Experimente você mesmo
Esta lição não inclui um desafio de código.
Teste seus conhecimentosEsta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.
Todas as lições de CSS Mastery
1Domínio de Seletores – Combinação
IntroduçãoSeletor de DescendenteSeletor de FilhoSeletor de Irmão AdjacenteSeletor de Irmão GeralDesafio de Recapitulação7Construa com CSS Grid
Fundamentos do GridPosicionamento de Itens com Grid-rowÁreas NomeadasDesafio de Revisão2Pseudo-classes Interativas
Pseudo-classesEfeitos de HoverEfeitos de FocoEstilos AtivosDesafio de Recapitulação3Pseudo-classes estruturais
Pseudo-classes estruturaisSelecionando o primeiro filhoSelecionando o último filhoO poder dos padrões: Usando nth-childDesafio de recapitulação