Seletor de Classe do CSS

No CSS, o seletor de classe é representado por um ponto:

.center {text-align: center}

No exemplo acima, todos os elementos HTML que possuem a classe center estão alinhados no centro.

No código HTML abaixo, os elementos h1 e p possuem a classe center. Isso significa que ambos seguirão as regras do seletor ".center".

<h1 class="center">
Este título será alinhado no centro
</h1>
<p class="center">
Este parágrafo também será alinhado no centro.
</p>

Atenção:O primeiro caractere do nome da classe não pode ser um número! Ele não funcionará no Mozilla ou Firefox.

Como o id, a classe também pode ser usada como um seletor derivado:

.fancy td {
	color: #f60;
	background: #666;
	}

Neste exemplo, as células de tabela dentro do elemento maior cujo nome de classe é fancy serão exibidas com texto laranja em fundo cinza. (O elemento maior com nome fancy pode ser uma tabela ou um div).

Os elementos também podem ser selecionados com base em suas classes:

td.fancy {
	color: #f60;
	background: #666;
	}

No exemplo acima, a célula da tabela com o nome da classe "fancy" será de fundo cinza e cor laranja.

<td class="fancy">

Você pode atribuir a classe "fancy" a qualquer elemento de tabela quantas vezes quiser. As células marcadas com "fancy" serão de fundo cinza e cor laranja. As células que não tiverem a classe chamada "fancy" não serão afetadas por essa regra. Além disso, os parágrafos com a classe "fancy" também não serão de fundo cinza e cor laranja, assim como qualquer outro elemento marcado como "fancy" não será afetado por essa regra. Isso é devido à forma como escrevemos essa regra, esse efeito é limitado às células da tabela marcadas como "fancy" (ou seja, usando o elemento td para selecionar a classe "fancy").

Conteúdo Relacionado

Se você precisar de conhecimentos mais profundos sobre o seletor de classe, leia o tutorial avançado do CodeW3C.com:Detalhamento do Seletor de Classe do CSS。