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 :

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

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

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