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).
h1, h2,
h3, h4, h5, h6 {
color:
#00FF00;
}
Você pode agrupar
seletores diferentes, sem restrições.
Observe a regra abaixo que é
perfeitamente válida:
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:
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:
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