Agrupamento de seletores CSS

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

Por | @nmuller99 Programação
Uma regra CSS quando válida para vários seletores, estes podem ser agrupados.
Separe cada seletor com uma vírgula. No exemplo abaixo agrupamos todos os elementos cabeçalho. A cor de todos os cabeçalhos será verde.

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


O seletor classe
Mas você não está restrito somente aos elementos HTML (tags) para aplicar regras de estilo!

Você pode "inventar" um nome e com ele criar uma classe a qual definirá as regras CSS. E o mais interessante das classes, é que elas podem ser aplicadas a qualquer elemento HTML.
E mais ainda, você pode aplicar estilos diferentes para o mesmo tipo de elemento do HTML, usando classes diferentes para cada um deles.

A sintaxe para o seletor classe é mostrada abaixo.
Elemento HTML mais um nome qualquer que você "inventa", precedido de . (ponto):

elementoHTML.minhaclasse { propriedade: valor;}


Nota: Para o nome que você "inventa" para sua classe, evite usar números e caractéres especiais. Tanto quanto possível use só letras de a-z e de A-Z. Números e caractéres podem ser usados, mas há restrições quanto ao seu uso.
Dica 1: Use só letras!

Por exemplo: suponha que você queira ter dois tipos de parágrafos em seu documento:
-um parágrafo com letras na cor preta e;
-um parágrafo com letras na cor azul.

p.corum { /* classe corum= preta */
color:#000000;
}

p.cordois { /* classe cordois= azul */
color:#0000FF;
}


No seu seu documento HTML as regras seriam aplicadas conforme abaixo:


este parágrafo terá cor preta.




este parágrafo terá cor azul.



Dica 2: Classes definidas pelas regras CSS são ótimas para se aplicar estilos diferentes num mesmo elemento HTML (tag) em um mesmo documento.

=======================
Conheça nosso parceiro:
target="_blank">
Agrupamento de seletores CSS

Autor: Maurício Samy Silva
www.maujor.com
Um site dedicado as CSS

Mais sobre:
Share Tweet
Recomendado
Comentários
Carregar comentários
Destaquesver tudo