Grupo de Seletores CSS

Agrupamento de seletores

Suponha que você deseje que os elementos h2 e os parágrafos tenham a cor cinza. A maneira mais fácil de alcançar isso é usar a seguinte declaração:

h2, p {color:gray;}

Coloque os seletores h2 e p à esquerda da regra, e use vírgula para separá-los, assim define-se uma regra. O estilo à direita (color:gray;) será aplicado aos elementos referenciados por esses seletores. A vírgula informa ao navegador que a regra contém dois seletores diferentes. Sem essa vírgula, o significado da regra seria completamente diferente. Veja o seletor de descendentes.

Pode agrupar qualquer número de seletores juntos, sem limitações.

Por exemplo, se você quiser exibir muitos elementos em cinza, você pode usar regras semelhantes a seguintes:

body, h2, p, table, th, td, pre, strong, em {cor:cinza;}

Dica:Através da agrupamento, os criadores podem 'comprimir' certos tipos de estilos juntos, resultando em tabelas de estilos mais concisas.

As duas regras a seguir produzem o mesmo resultado, mas é claramente visível qual é mais fácil de escrever:

/* no grouping */
h1 {cor:azul;}
h2 {cor:azul;}
h3 {cor:azul;}
h4 {cor:azul;}
h5 {cor:azul;}
h6 {cor:azul;}
/* grouping */
h1, h2, h3, h4, h5, h6 {cor:azul;}

Experimente você mesmo

As agrupamentos oferecem algumas opções interessantes. Por exemplo, todas as agrupamentos de regras no exemplo a seguir são equivalentes, cada um apenas mostra diferentes métodos de agrupamento de seletores e declarações:

/* group 1 */
h1 {cor:prata; fundo:branco;}
h2 {cor:prata; fundo:cinza;}
h3 {cor:branco; fundo:cinza;}
h4 {cor:prata; fundo:branco;}
b {cor:cinza; fundo:branco;}
/* group 2 */
h1, h2, h4 {cor:prata;}
h2, h3 {fundo:cinza;}
h1, h4, b {fundo:branco;}
h3 {cor:branco;}
b {cor:cinza;}
/* group 3 */
h1, h4 {cor:prata; fundo:branco;}
h2 {cor:prata;}
h3 {cor:branco;}
h2, h3 {fundo:cinza;}
b {cor:cinza; fundo:branco;}

Experimente pessoalmente:

Observe que no grupo 3 foi usado o 'agrupamento de declarações'. Posteriormente, lhe apresentaremos o 'agrupamento de declarações'.

Seletor de curinga

O CSS2 introduziu um novo seletor simples - o seletor de asterisco (universal selector), representado por um asterisco (*). Este seletor pode combinar com qualquer elemento, como um caractere curinga.

Por exemplo, as seguintes regras farão com que todos os elementos do documento sejam vermelhos:

* {color:red;}

Experimente você mesmo

Esta declaração é equivalente a uma seletora de agrupamento que lista todos os elementos do documento. Utilizando o seletor de asterisco, basta apertar uma tecla (apenas um asterisco) para especificar o valor da propriedade color para todos os elementos do documento como red.

Agrupamento de declarações

Podemos agrupar tanto os seletores quanto as declarações.

Supondo que você queira que todos os elementos h1 tenham um fundo vermelho e sejam exibidos com texto azul usando a fonte Verdana de 28 pixels, você pode escrever o seguinte estilo:

h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}

Mas essa abordagem não é muito eficiente. Especialmente quando criamos uma lista dessas para um elemento com muitos estilos, pode ser complicado. Em vez disso, podemos agrupar as declarações juntas:

h1 {font: 28px Verdana; color: white; background: black;}

Isso tem o mesmo efeito que os 3 primeiros linhas da tabela de estilo.

Atenção, para agrupar declarações, é importante usar ponto e vírgula no final de cada declaração. O navegador ignorará os espaços em branco na tabela de estilo. Com ponto e vírgula, você pode usar o seguinte formato sem receio:

h1 {
  font: 28px Verdana;
  color: blue;
  background: red;
  }

Experimente você mesmo

Como você vê, essa forma de escrita é mais legível.

No entanto, se o segundo ponto e vírgula for ignorado, o agente de usuário interpretará a tabela de estilo da seguinte forma:

h1 {
  font: 28px Verdana;
  color: blue background: red;
  }

Experimente você mesmo

Porque background não é um valor válido para color, e como só pode ser especificado um nome de cor para color, o agente de usuário ignorará completamente esta declaração de cor (incluindo background: black). Dessa forma, o título h1 será exibido apenas em azul, sem fundo vermelho, embora seja mais provável que nem mesmo o azul do h1 seja obtido. Em vez disso, essas legendas serão exibidas apenas na cor padrão (normalmente preta), e não haverá cor de fundo. A declaração font: 28px Verdana ainda funcionará corretamente, pois realmente termina com um ponto e vírgula.

Como o grupo de seletores, o grupo de declarações é uma maneira conveniente de encurtar a tabela de estilos, tornando-a mais clara e mais fácil de manter.

Dica:Adicionar um ponto e vírgula no final da última declaração da regra é um bom hábito. Quando adicionarmos outra declaração à regra, não precisamos nos preocupar em esquecer de inserir um ponto e vírgula.

Combinação de Grupo de Seletor e Grupo de Declaração

Podemos combinar grupos de seletores e grupos de declarações em uma regra, o que permite definir estilos relativamente complexos com poucas declarações.

A regra abaixo define um estilo complexo para todos os títulos:

h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }

Experimente você mesmo

A regra acima define o estilo de todos os títulos com texto cinza sobre fundo branco, com uma margem interna de 10 pixels e uma borda sólida de 1 pixel, com a fonte Verdana.