id et class sont les deux sélecteurs de la norme CSS : ils permettent de cibler précisément l’application d’un ensemble de règles de style à un ou plusieurs élément(s).
D’une certaine, manière, id est un sélecteur redondant : tout ce qu’on peut faire avec, on peut en faire autant voire plus avec class. Mais id a son utilité. id définit un élément de manière unique dans l’ensemble des balises : un document HMTL valide ne devrait ainsi pas comporter deux éléments avec le même id. De fait, id est le sélecteur idéal dès qu’il s’agit de positionner un élément au sein de l’interface, étant donné que deux éléments ne devraient logiquement pas avoir la même position dans l’interface.
class, de son coté, est utile pour définir toutes sortes de comportements, et plusieurs éléments peuvent utiliser la même classe (voire même utiliser plusieurs classes). Enfin, une balise peut avoir un id et une (ou plusieurs) class – et id disposant d’une préséance sur class, il peut permettre de préciser un élément particulier au sein d’un ensemble de class.
Ajoutons que JavaScript peut manipuler les balises avec un id.
Rappelons pour terminer qu’au sein de la CSS, les id sont définis avec le signe dièse (#nom) et les class avec un point (.nom).
Quelques exemples : 