Selecionando elementos por id único em CSS

Como você já sabe, as classes são destinadas a serem atribuídas a um grupo de elementos. Além das classes, também é possível selecionar elementos por id, que representa um identificador único do elemento. Por unicidade, entende-se que, se já temos um elemento com esse id na página, não deve haver outro elemento com o mesmo id.

O identificador único é definido usando o atributo id, onde escrevemos o nome que inventamos. Vamos, por exemplo, criar dois blocos. Para o primeiro, definiremos o id com o valor block1, e para o segundo - com o valor block2:

<div id="block1">
	<p>text</p>
	<p>text</p>
</div>
<div id="block2">
	<p>text</p>
	<p>text</p>
</div>

Para selecionar um elemento com um id específico, é necessário escrever o símbolo # e o nome que inventamos, assim:

#block1 {
	color: red;
}
#block2 {
	color: green;
}

O atributo id é usado quando é necessário enfatizar a unicidade de um elemento. As classes são usadas quando se presume que pode haver muitos desses elementos, mesmo que no momento haja apenas um.

Dado o seguinte código:

<div id="elem1">
	<h2>Título</h2>
	<p>
		texto
	</p>
	<p>
		texto
	</p>
</div>
<div id="elem2">
	<h2>Título</h2>
	<p>
		texto
	</p>
	<p>
		texto
	</p>
</div>
<div id="elem3">
	<h2>Título</h2>
	<p>
		texto
	</p>
	<p>
		texto
	</p>
</div>

Colore o conteúdo do bloco elem1 em vermelho, do bloco elem2 - em verde, e do bloco elem3 - em azul claro.