Não selecionar o primeiro filho em CSS
-
Use o seletor
:not(selector)para não selecionar o primeiro filho no CSS -
Defina o estilo do primeiro filho individualmente usando o seletor
:first-childpara não selecionar o primeiro filho no CSS
Neste artigo, aprenderemos como utilizar seletores CSS para não selecionar o primeiro filho.
Use o seletor :not(selector) para não selecionar o primeiro filho no CSS
Podemos usar o seletor :not(selector) para selecionar todos os outros elementos que não sejam o elemento selecionado. Portanto, podemos usar o seletor para não selecionar o primeiro filho no CSS. Podemos usar :first-child como o seletor no seletor :not(selector). Dessa forma, podemos aplicar estilos a todos os descendentes de um elemento, exceto ao primeiro. Aqui, em navegadores com Seletores CSS de nível 3 suportados, podemos usar o seletor :not.
Por exemplo, crie a tag body em HTML. Em seguida, escreva três tags p e algum conteúdo de sua escolha entre as tags. No CSS, selecione body p:not(:first-child) e defina a color como red.
Aqui, no trecho abaixo, podemos ver que o corpo contém parágrafos, e todos eles têm a cor da fonte definida como vermelha, exceto o primeiro. Assim, podemos selecionar todos os filhos, exceto o primeiro filho e aplicar estilos. O seletor :not, entretanto, tem certas limitações (como ele só pode processar seletores simples como argumento).
Exemplo de código:
<body>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
body p:not(:first-child) {
color: red;
}
Defina o estilo do primeiro filho individualmente usando o seletor :first-child para não selecionar o primeiro filho no CSS
Podemos definir regras específicas que substituem a regra definida anteriormente usando o seletor :first-child. Por meio dessa técnica, podemos estilizar todos os filhos, exceto o primeiro. Substituir os estilos usando o seletor :first-child fará com que o primeiro filho pareça diferente dos outros filhos.
Por exemplo, use a mesma estrutura HTML do primeiro método. No CSS, selecione a tag p e defina a color como azul. A seguir, selecione o primeiro filho como body p:first-child e, em seguida, defina a color como black.
Aqui, o estilo padrão para os parágrafos, exceto o primeiro, é definido como color: blue, enquanto é substituído por color: black usando o seletor :first-child. Assim, podemos usar o seletor :first-child para não selecionar o primeiro filho.
Exemplo de código:
p{
color:blue;
}
body p:first-child {
color: black;
}
<body>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
