Classes de elementos em CSS

Nas lições anteriores, selecionamos elementos da página pelo nome da tag, aplicando estilos, por exemplo, a todos os parágrafos ao mesmo tempo. Em uma página, no entanto, podem haver parágrafos de tipos diferentes, aos quais é necessário aplicar estilos diferentes. Para resolver esse problema, podemos atribuir diferentes parágrafos a diferentes classes CSS.

Para atribuir uma tag a uma classe, é necessário escrever o atributo class nessa tag, e nele - o nome da classe que você inventou, composto por letras, números, sublinhados e hífens.

Vamos ver um exemplo. Vamos criar parágrafos com dois tipos de classes - eee e zzz:

<p class="eee">
	parágrafo com a classe eee
</p>
<p class="eee">
	parágrafo com a classe eee
</p>
<p class="zzz">
	parágrafo com a classe zzz
</p>
<p class="zzz">
	parágrafo com a classe zzz
</p>

Agora, vamos selecionar no CSS os parágrafos com as diferentes classes e aplicar alguns estilos a eles. Por exemplo, vamos colorir os parágrafos com a classe zzz em vermelho, e os parágrafos com a classe eee em verde.

Para isso, precisamos selecionar no arquivo CSS nossas classes. A seleção tem a seguinte sintaxe: primeiro vem o ponto, e depois o nome da classe que inventamos. Ou seja, para selecionar a classe eee precisamos escrever .eee, e para a classe zzz - escrever .zzz.

Então, vamos fazer o descrito. Vamos adicionar ao nosso HTML também os estilos CSS para as classes criadas por nós:

.eee {
	color: green;
}
.zzz {
	color: red;
}

Se executarmos nosso código, o resultado será o seguinte:

Dado o seguinte código:

<ul>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
</ul>

Pinte em vermelho os elementos com a classe odd e em verde - os elementos com a classe eve.

Dado o seguinte código:

<h2 class="eee">Título</h2>
<p class="eee">
	parágrafo
</p>
<p class="eee">
	parágrafo
</p>
<p>
	parágrafo sem classe
</p>

<ul class="eee">
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

Pinte em vermelho todos os elementos com a classe eee.

Explique por que, na tarefa anterior, as tags li são coloridas em vermelho, embora a classe que define a cor tenha sido atribuída à tag ul.