CSS tem tudo a ver com o estilo de páginas da web, sites, documentos HTML, etc. Portanto, oferece muitas ferramentas de estilo, como seletores, propriedades CSS, etc. Os seletores são o componente inicial das regras CSS, as regras que têm como alvo alguns elementos HTML e estilizá -lo de acordo com algumas propriedades CSS específicas.

No CSS, os seletores são classificados em cinco categorias I.e. Seletores básicos, seletores combinatórios, seletores de pseudo-classe e seletores de atributos. A categoria básica consiste em um seletor de elementos, seletor de classe, seletor de identificação, seletor universal e seletor de agrupamento. Você pode aprender mais sobre os seletores básicos em nossos seletores de css tutorial.

Este artigo explicará as seguintes terminologias:

• O que é um seletor de agrupamento no CSS?
• Sintaxe básica do seletor de agrupamento.
• Como agrupar vários elementos HTML usando um seletor de agrupamento.

Vamos começar com o entendimento básico do seletor de agrupamento:

O que é um seletor de agrupamento no CSS

O seletor de agrupamento tem como alvo os múltiplos elementos HTML e os estiliza simultaneamente. Concisa o código e reduz o esforço extra. Ao selecionar/agrupar mais de um elemento HTML, temos que separar cada elemento HTML com uma vírgula.

Sintaxe

Vamos dar uma olhada no snippet seguinte para entender a sintaxe do seletor de agrupamento:

Na figura acima, P, H2, H3 e rodapé são elementos HTML agrupados para serem estilizados.

Vamos dar um passo mais longe para entender o conceito de agrupamento de seletor com a ajuda de um exemplo:

Como agrupar vários elementos HTML usando um seletor de agrupamento

Vamos dar uma olhada no exemplo abaixo para entender como implementar um estilo único em um grupo de diferentes elementos HTML:

Exemplo Este exemplo tem diferentes elementos html i.e.

,

, e

. Temos que estilizar todos esses elementos no estilo de fonte em itálico, com a cor do fundo da Royal Blue.

Html

Linuxhint.com

Oi! Bem -vindo ao Linuxhint.com

Seletor de agrupamento

Este é um exemplo de seletor de agrupamento

CSS

H1, H2, P
Background-Color: RoyalBlue;
estilo de fonte: itálico;

O código acima foi agrupado três elementos, implementou o mesmo estilo em todos os elementos e, como resultado, obteremos a seguinte saída:

Ele verifica que todos os elementos implementam o mesmo estilo e o seletor de agrupamento está funcionando corretamente.

Conclusão

Para implementar um seletor de agrupamento, tudo o que você precisa fazer é simplesmente escrever todos os nomes do elemento que você deseja estilizar e adicionar uma vírgula entre cada elemento. Dessa forma, o estilo especificado será implementado para cada elemento direcionado simultaneamente. Esta redação cobre todos os aspectos dos seletores de agrupamento, começando pelo seletor de grupo e como usá-lo.