Agrupando seletores em uma regra CSS

Este artigo tem por objetivo mostrar a sintaxe CSS para agrupar seletores com propriedade:valor idênticos, em regra única.

por Maurício Samy Silva

Objetivo

Este artigo tem por objetivo mostrar a sintaxe CSS para agrupar seletores com propriedade:valor idênticos, em regra única.

Agrupando seletores

Uma regra CSS quando válida para vários seletores, estes podem ser agrupados separando-se cada seletor com uma vírgula.

Suponha que a cor de todos os cabeçalhos será verde. Então a regra CSS para definir esta condição é conforme mostrada abaixo:

No exemplo abaixo agrupamos todos os elementos cabeçalho que seguirão a mesma regra CSS (cor das letras: verde).

Listagem 1: Elementos de cabeçalho

h1, h2, h3, h4, h5, h6 {
color: #00FF00; 
}

Você pode agrupar seletores diferentes, sem restrições.

Observe a regra abaixo que é perfeitamente válida:

Listagem 2:Agrupamento de seletores

span, p, .classe, h3 {
color: #00FF00;
font-size: 14px;
}

O agrupamento de seletores e o efeito cascata

Em determinados casos, pode-se contar com o efeito cascata das CSS, para simplicar a escrita de regras com seletores agrupados.

Nota: Efeito cascata das CSS é um conjunto de critérios que definem qual regra será aplicada, quando duas ou mais regras entram em conflito. (Consulte o site do autor para detalhes)

Para exemplificar, vamos supor que em nosso documento HTML teremos os elementos <p> <h3> <span> e a classe .classe_um estilizados conforme os parâmetros abaixo:

Listagem 3: Estilos da classe .classe_um

fonte= arial;
tamanho da fonte = 12px;
cor da fonte = preta;
fundo = azul;

Mas o elemento <h3> terá tamanho da fonte = 16px.

Você pode escrever sua regra CSS para este caso assim:

Listagem 4: Código CSS para definição do estilo

p, h3, span, .classe_um {
font-family: arial, sans-serif;
font-size: 12 px;
color: #000000;
background-color: #0000FF;
}
h3 { font-size: 16px;}

OBSERVE: A primeira regra determina para <h3> tamanho de fonte de 12px e após, vem a segunda regra que determina 16px para aquele tamanho. Pelo efeito cascata vale a segunda regra para o tamanho de fonte de <h3> e as demais propriedades conforme a primeira regra. Não foi preciso escrever a regra completa para <h3> em separado.

Autor: Maurício Samy Silva

CSS para WebDesign

http://www.maujor.com