Auteur: Jérôme Forget. Publié le 12 février 2007.
À plusieurs égards, le sélecteur d'identifiants est similaire au sélecteur de classes. Cependant, les deux sélecteurs présentent des différences fondamentales. D'abord, le symbole (#) précède le sélecteur d'identifiants. Ainsi, le sélecteur d'identifiants se distingue du sélecteur de classes, qui utilise le point (.). Voici une règle avec un sélecteur d'ID :
*#logo { font-weight: bold; }
Cette règle applique du caractère gras sur n'importe quel élément qui porte un attribut id ayant comme valeur logo.
Une autre différence profonde entre les deux sélecteurs est que si le sélecteur de classes sélectionne des valeurs de l'attribut class, le sélecteur d'identifiants sélectionne des valeurs d'attribut id. Hé oui !
#premier-paragraphe { font-weight: bold; }
<p id="premier-paragraphe">Ce paragraphe est en caractères gras.</p>
<p>Ce paragraphe n'est PAS en gras.</p>
La différence principale entre le sélecteur d'identifiants et le sélecteur de classes, c'est que le sélecteur d'identifiants réfère à un unique élément, alors qu'une même valeur de classe peut être attribuée à plusieurs balises. Cela tient à l'objectif même de ces deux attributs class et id. Rappellons que :
Ainsi, dans un même document XHTML, l'exemple suivant est illégal :
<h1 id="important">C'est important !</h1>
<em id="important">C'est important !</em>
<p id="important">C'est important !</p>
On nommera donc chaque élément unique important dans la page Web (logo, menus de navigation, moteur de recherche, etc.) afin d'utiliser le sélecteur d'identifiants pour positionner et appliquer des styles à ces éléments. Les balises <div> devraient pratiquement toujours être identifiées.
<div id="branding"></div>
<div id="navigation"></div>
<div id="contenu"></div>
<div id="info-site"></div>