Attributs "id" et "class"

Dernière mise à jour le 12 octobre 2022

Les attributs id et class sont avant tout des sélecteurs CSS.

Ils permettent d'identifier un élément de manière unique ou de regrouper une série d'éléments HTML pour leur appliquer des styles.

Remarque : nous verrons à la prochaine session à quel point ces deux attributs sont utiles à la programmation avec JavaScript.

L'attribut id

L'attribut id permet d'identifier de manière unique un élément HTML à l'intérieur d'un document.

Exemple :

<h2 id="intro">Introduction</h2>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vestibulum facilisis lacus,
  eget consequat urna lobortis eget. Mauris ultrices vitae turpis at fringilla. Integer posuere
  mauris nisi, sed mollis velit congue vitae.
</p>

N'importe quel élément HTML peut posséder un attribut id.

Notez qu'un document HTML est considéré invalide si deux éléments partagent une même valeur d'attribut id.

L'attribut id ne sert à rien au strict niveau HTML, mais est très pratique en CSS.

Dans un fichier CSS ou dans l'élément style d'un document HTML, on assigne des styles à un élément possédant un "id" en faisant précéder son nom du symbole #.

Exemple :

<style>
  #intro {
    background-color: GreenYellow;
    color: DarkGreen;
  }
</style>
...
<h2 id="intro">Introduction</h2>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vestibulum facilisis lacus,
  eget consequat urna lobortis eget. Mauris ultrices vitae turpis at fringilla. Integer posuere
  mauris nisi, sed mollis velit congue vitae.
</p>

Sortie :

L'attribut class

L'attribut class permet de regrouper des éléments HTML à l'intérieur d'un document.

Dans l'exemple suivant, un titre de niveau 3 et deux paragraphes partagent une même classe :

<h3 class="nouveau">Nulla semper commodo</h3>
<p>
  Quisque mollis leo at dui molestie ornare at sit amet neque.
</p>
<p>
  Suspendisse accumsan viverra lacus, sit amet mattis odio elementum quis.
</p>
<p class="nouveau">
  Curabitur tempor, ipsum cursus condimentum tincidunt, erat odio aliquam nunc.
</p>
<p class="nouveau">
  Imperdiet risus erat vel ligula. Etiam vel massa purus. Quisque id diam.
</p>

N'importe quel élément HTML peut posséder un attribut class.

Contrairement à ce qui se passe avec l'attribut id, il est tout à fait légal de retrouver plusieurs éléments HTML ayant la même classe, même que c'est généralement le but recherché.

Comme pour id, l'attribut class ne sert à rien en HTML, mais est très pratique en CSS.

Dans un fichier CSS ou dans l'élément style d'un document HTML, on assigne des styles à un élément appartenant à une classe donnée en faisant précéder son nom du symbole . (un point).

Exemple :

<style>
  .nouveau {
    background-color: pink;
    color: blue;
  }
</style>
...
<h3 class="nouveau">Nulla semper commodo</h3>
<p>
  Quisque mollis leo at dui molestie ornare at sit amet neque.
</p>
<p>
  Suspendisse accumsan viverra lacus, sit amet mattis odio elementum quis.
</p>
<p class="nouveau">
  Curabitur tempor, ipsum cursus condimentum tincidunt, erat odio aliquam nunc.
</p>
<p class="nouveau">
  Imperdiet risus erat vel ligula. Etiam vel massa purus. Quisque id diam.
</p>

Sortie :

Un élément HTML peut appartenir à plusieurs classes.

Exemple :

<style>
  .nouveau {
    background-color: pink;
    color: blue;
  }
  .urgent {
    background-color: orange;
    font-size: 200%;
  }
</style>
...
<h3 class="nouveau urgent">Nulla semper commodo</h3>

Sortie :