Seletores de combinador CSS | Explicado

Combinadores no CSS descrevem a relação entre certos elementos e com base nesse relacionamento, você pode estilizar elementos. Isso é útil quando você deseja estilizar certos elementos de uma só vez, em vez de modelar elementos individualmente. Por exemplo, você pode estilizar todos os irmãos gerais de um elemento usando o seletor de combinador de irmãos gerais do CSS. Os seletores de combinadores CSS são os seguintes.

1. Seletor de descendente
2. Seletor de crianças
3. Seletor de irmãos adjacentes
4. Seletor geral de irmãos

Tudo isso é explicado em profundidade aqui.

Seletor de descendente

Com o objetivo de selecionar todos os sucessores de um elemento, o seletor de descendente é usado. Os sucessores incluem todos os filhos de um elemento, pode ser uma criança direta ou uma criança vários níveis abaixo da árvore Dom. É representado usando um espaço entre os pais e o elemento filho.

Sintaxe

filho -mãe
valor da propriedade;

Exemplo

O exemplo abaixo mostra o funcionamento do seletor de descendente.

Html

Eu sou um sucessor da div.

Eu também sou um sucessor da div.

Eu não sou um sucessor da div.

No código HTML acima, criamos um elemento e aninhamos dois

Elementos dentro daquela div. Além disso, também criamos um

elemento fora do elemento.

CSS

div
preenchimento: 5px;
borda: 2px preto sólido;

div p
Background-Color: rosa;

Aqui estamos dando um pouco de preenchimento e fronteira à div e depois usando o combinador descendente, uma cor rosa de fundo é dada a todos os descendentes

Elementos da div.

Saída

Os sucessores do elemento são destacados em rosa.

Seletor de crianças

Como o nome sugere, o combinador de crianças seleciona todos os filhos de um elemento. É diferente do seletor de descendente de uma maneira que seleciona apenas os filhos diretos de um elemento. Além disso, é representado por um sinal maior que (>).

Sintaxe

Pai> filho
valor da propriedade;

Exemplo

Vamos usar um exemplo semelhante ao acima para demonstrar o funcionamento do seletor de combinador de crianças.

Html

Esta é uma criança imediata.

Esta também é uma criança imediata.

Como estou presente dentro do elemento de seção, portanto, sou descendente da div, mas não uma criança direta.

Eu não sou criança.

Eu também não sou uma criança.

Aqui criamos uma div e aninhada dois

elementos e um elemento dentro da div. A tag noca ainda um

elemento. Além disso mais dois

Os elementos são gerados, mas fora da div.

CSS

div
preenchimento: 5px;
borda: 2px preto sólido;

div> p
Background-Color: Hotpink;

Estamos usando o combinador infantil para dar uma cor do hotpink ao direto

Filhos da div, além disso, fornecemos um pouco de preenchimento e fronteira para o div.

Saída

O seletor de combinador de crianças está funcionando corretamente.

Seletor de irmãos adjacentes

Este seletor é usado com o objetivo de modelar os irmãos adjacentes. É representado usando um sinal de plus (+) entre os dois elementos.

Sintaxe

elemento + elemento
valor da propriedade;

Exemplo

Suponha que você queira estilizar um

elemento que é um irmão adjacente do elemento.

Html

Eu sou uma criança imediata.

Eu também sou uma criança imediata.

Eu sou um irmão adjacente.

Eu não sou um irmão adjacente.

Para demonstrar o funcionamento do combinador de irmãos adjacentes, criamos alguns

elementos dentro e fora de um elemento.

CSS

div
preenchimento: 5px;
borda: 2px preto sólido;

div + p
cor roxa;
estilo de fonte: itálico;
intensidade da fonte: Negrito;

Usando o seletor de irmãos adjacentes, estamos dando cor roxa, estilo de fonte itálica e peso de fonte em negrito para o adjacente

irmão da div.

Saída

O irmão adjacente do elemento div foi denominado usando o combinador de irmãos adjacentes.

Seletor geral de irmãos

Como o nome sugere, este CSS combinador estiliza todos os irmãos de um elemento que compartilham o mesmo pai. Representado por um sinal de tilde (~).

Sintaxe

elemento ~ elemento
valor da propriedade;

Exemplo

Vamos usar o exemplo usado na seção acima para ver como esse combinador funciona.

CSS

div ~ p
cor roxa;
estilo de fonte: itálico;
intensidade da fonte: Negrito;

Usando o seletor geral de irmãos, estamos dando algum estilo a todos os

irmãos do elemento div.

Saída

Todos os irmãos gerais do elemento div foram estilizados com sucesso.

Conclusão

Um seletor de combinador CSS seleciona elementos no BISS de seu relacionamento com outros elementos. Existem quatro seletores de combinadores no CSS. A seletor de descendente estilos todos os sucessores de um elemento, um Seletor de crianças estilos as crianças diretas de um elemento, um Irmão adjacente Seletor estilos os irmãos de um elemento que vem logo após esse elemento, e um Seletor geral de irmãos estilos todos os irmãos de um elemento. Este post descreve esses combinadores em detalhes, juntamente com exemplos adequados.