ID - Astuces CSS | CSS Almanach 2025

Le #idsélecteur vous permet de cibler un élément en référençant l' idattribut HTML. Semblable à la façon dont les attributs de classe sont indiqués dans CSS avec un «point» ( .) avant le nom de la classe, les attributs d'ID sont précédés d'un «octothorpe» ( #), plus communément appelé «hachage» ou «signe dièse».

#header ( /* this is the ID selector */ background: #eee; )

Les valeurs d'attribut ID doivent être uniques. HTML avec au moins deux ids identiques ne valide pas et produira des résultats imprévisibles. S'il y en a deux identiques, CSS correspondra et stylera toujours les deux. Cependant, JavaScript, lors de la recherche d'un ID, trouvera le premier et s'arrêtera.

Les sélecteurs d'identification sont extrêmement puissants. Ils ont une spécificité très élevée, généralement écrite comme (0, 1, 0, 0). Les styles qui s’appliquent avec eux remplacent d’autres sélecteurs qui n’utilisent que des balises ou des classes. Démontrer:

Découvrez ce stylo!

Un paragraphe avec à la fois un identifiant et un attribut de classe reçoit des règles CSS contradictoires; même si le sélecteur de classe ( .reusable) est en dessous du sélecteur d'ID ( #unique) dans le CSS (il remplace généralement les styles au-dessus de lui dans la «cascade»), le paragraphe reste rouge car #uniquesubmerge la couleur bleue définie par .reusable. Un nombre infini de classes ne peut jamais battre la spécificité de l'ID (bien qu'il y ait eu un bogue à un moment donné où 256 classes battraient un ID).

Une spécificité élevée et un caractère unique signifient que l'utilisation #idest une «option nucléaire» CSS: surpuissante, rigide et d'une efficacité disproportionnée. Éviter le #idsélecteur en CSS est considéré comme une bonne pratique: il est préférable d'utiliser une classe dans presque tous les cas.

Cela étant dit, les attributs ID ont plusieurs utilisations précieuses en dehors de CSS:

Fournir des crochets uniques pour JavaScript
Les éléments avec des idattributs peuvent être ciblés par des balises d'ancrage, en définissant l' hrefattribut sur la idvaleur, préfixée par un #symbole. Cliquez sur ce lien d'ancrage pour recentrer la page actuelle sur l'élément avec la correspondance id. C'est ce qu'on appelle un «identifiant de fragment».
Pour les éléments vraiment uniques dans votre HTML, tels que les éléments de formulaire, les identifiants peuvent être utiles pour des choses comme la liaison des labels et des inputs.

Points d'interêts

Un valide #idne peut pas commencer par un nombre et doit comporter au moins un caractère. Une grande partie de l'Unicode sont des caractères valides dans un fichier id.
id les attributs et les sélecteurs sont sensibles à la casse et doivent correspondre exactement à travers HTML, CSS et JavaScript