Sélection d'un élément par id unique en CSS

Comme vous le savez déjà, les classes sont destinées à être attribuées à un groupe d'éléments. En plus des classes, il est également possible de sélectionner des éléments par leur id, qui représente un identifiant unique de l'élément. L'unicité signifie que si notre page contient déjà un élément avec cet id, alors un autre élément avec le même id ne devrait pas exister.

L'identifiant unique est défini à l'aide de l'attribut id, dans lequel on écrit un nom que nous avons choisi. Par exemple, créons deux blocs. Attribuons au premier un id avec la valeur block1, et au second - avec la valeur block2 :

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

Pour cibler un élément avec un id donné, il faut écrire le symbole # suivi du nom que nous avons choisi, comme ceci :

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

L'attribut id est utilisé dans le cas où il est nécessaire de souligner l'unicité d'un élément. Les classes sont utilisées lorsque l'on suppose qu'il peut y avoir plusieurs éléments de ce type, même s'il n'y en a qu'un seul pour le moment.

Code donné :

<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>

Colorez le contenu du bloc elem1 en rouge, du bloc elem2 - en vert, et du bloc elem3 - en bleu clair.