Wybór elementu po unikalnym id w CSS

Jak już wiesz, klasy są przeznaczone, aby przypisywać je grupie elementów. Oprócz klas, można także wybierać elementy po id, reprezentującym unikalny identyfikator elementu. Przez unikalność rozumie się to, że jeśli na naszej stronie już jest element z takim id, to innego elementu z tym samym id być nie powinno.

Unikalny identyfikator jest ustawiany za pomocą atrybutu id, w którym pisze się wymyśloną przez nas nazwę. Zróbmy, na przykład, dwa bloki. Pierwszemu ustawmy id o wartości block1, a drugiemu - o wartości block2:

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

Aby odwołać się do elementu z ustawionym id, trzeba napisać symbol # i wymyśloną przez nas nazwę, o tak:

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

Atrybut id jest używany w przypadku, kiedy konieczne jest podkreślenie unikalności elementu. Klasy są używane wtedy, kiedy zakłada się, że takich elementów może być wiele, nawet jeśli obecnie jest jeden.

Dany jest następujący kod:

<div id="elem1">
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div id="elem2">
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div id="elem3">
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

Pokoloruj zawartość bloku elem1 na czerwony, bloku elem2 - na zielony, a bloku elem3 - na niebieski.