HOME

Id vs class (CSS)

En HTML et CSS, nous pouvons créer des objets mais encore faut-t'il les nommer. C'est pourquoi nous allons voir la différence entre id et class. Nous savons qu'en CSS, on peut atteindre des éléments par leur nom de balise ;

p {
font-size:10px;
}

Mais c’est vite trop peu pour faire une mise en page précise... Par exemple, la navigation de votre site, si elle est sémantiquement bien codée, sera une liste de liens. On accèdera à ses éléments en utilisant la déclaration css de ul et li. Mais si on a d’autres listes dans la page web, ce qui est souvent le cas, on manque alors de présision : on voudrait que seul les liens de la navigation soient en grand, sur fond de couleur qui change en survol. C’est en fait possible grâce aux classes et id.

Id (identifiant)

On peut associer un attribut "id" à n’importe quelle balise. Il suffit de créer cet attribut et de lui donner un nom unique. "id" signifie "identifiant", et se code comme suit :

<ul id="navigation">
<li>Un élément</li>
</ul>

Ici j’ai donc associé l’id "navigation" à ma navigation. Là comme ailleurs, on veille à être sémantique. L’identifiant va nous servir à accéder à cet élément particulier avec les css. On verra plus tard que c’est aussi utile pour accéder à ces éléments en javascript.

#navigation {
background-color:purple;
font-size:12px;
font-weight:bold;
}

La particularité de l’id, c’est que l’on ne peut l’associer qu’à une seul élément de l’arbre html. C’est normal puisqu’il s’agit d’un identifiant. Or il est souvent utile de pouvoir créer un style que l’on appliquera à plusieurs éléments dans la page. Dans ce cas, on utilisera des classes.

Les classes

Une classe est assez proche de l’id, on l’associe à un élément de la page comme ceci :

<p class="important">Notez bien !</p>

Ensuite on les atteind en css comme ceci

.important {
color:red;
}

Le point devant le terme signifie que l’on cherche à atteindre une classe dont le nom est "important". L’avantage de la classe c’est que plusieurs éléments peuvent se voir associer la même classe :

<h1 class="important">Notez bien !</h1>
<p class="important">On peut m'associer plusieurs fois.</p>

La différence entre les deux est dans le manière de les coder (# et .) et dans la limitation des id à être associés une seule fois. On verra plus tard que les id sont prioritaires sur les classes dans la hiérarchie des déclarations css.

Généralement, associer un ID à un élément signifie "bloc important" dans une structure html. On les emploie souvent pour désigner, le bloc de titre, la navigation, le corps de la page et le footer, par exemple.