Selezione di un elemento tramite id univoco in CSS

Come già sapete, le classi sono progettate per essere assegnate a un gruppo di elementi. Oltre alle classi, è anche possibile selezionare gli elementi tramite id, che rappresenta un identificatore univoco dell'elemento. Per unicità si intende che se nella nostra pagina è già presente un elemento con questo id, allora non dovrebbe esserci un altro elemento con lo stesso id.

L'identificatore univoco è impostato tramite l'attributo id, in cui scriviamo un nome da noi scelto. Ad esempio, creiamo due blocchi. Assegniamo al primo un id con valore block1, e al secondo - con valore block2:

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

Per riferirsi a un elemento con un determinato id, è necessario scrivere il simbolo # e il nome da noi scelto, in questo modo:

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

L'attributo id viene utilizzato nel caso in cui sia necessario sottolineare l'unicità dell'elemento. Le classi vengono utilizzate quando si presuppone che possano esserci molti elementi di quel tipo, anche se al momento ce n'è solo uno.

È dato il seguente codice:

<div id="elem1">
	<h2>Titolo</h2>
	<p>
		testo
	</p>
	<p>
		testo
	</p>
</div>
<div id="elem2">
	<h2>Titolo</h2>
	<p>
		testo
	</p>
	<p>
		testo
	</p>
</div>
<div id="elem3">
	<h2>Titolo</h2>
	<p>
		testo
	</p>
	<p>
		testo
	</p>
</div>

Colorate il contenuto del blocco elem1 in rosso, del blocco elem2 - in verde, e del blocco elem3 - in azzurro.