Sélecteurs d'ID
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
Le sélecteur d'ID CSS cible un élément en fonction de la valeur de son attribut id. Pour que l'élément soit sélectionné, son attribut id doit correspondre exactement à la valeur donnée dans le sélecteur.
/* L'élément avec l'identifiant id="demo" */
#demo {
border: red 2px solid;
}
Syntaxe
#id_value {
/* … */
}
Notez que syntaxiquement (mais pas en termes de spécificité), cela est équivalent au sélecteur d'attribut suivant :
[id="id_value"] {
/* … */
}
La valeur id_value doit être un identifiant CSS valide. Les attributs id HTML qui ne sont pas des identifiants CSS valides doivent être échappés avant de pouvoir être utilisés dans les sélecteurs d'ID.
Exemples
Sélecteurs d'ID valides
HTML
<p id="blue">Ce paragraphe a un fond bleu.</p>
<p>Ceci est juste un paragraphe normal.</p>
<!-- Les deux paragraphes suivants ont des attributs id
qui contiennent des caractères devant être échappés en CSS -->
<p id="item?one">Ce paragraphe a un fond rose.</p>
<p id="123item">Ce paragraphe a un fond jaune.</p>
CSS
#blue {
background-color: skyblue;
}
/* Dans les deux règles suivantes, les attributs id doivent être échappés */
#item\?one {
background-color: pink;
}
#\00003123item {
background-color: yellow;
}
Résultat
Sélecteurs d'ID invalides
Les sélecteurs d'ID dans les règles suivantes ne sont pas des identifiants CSS valides et seront ignorés.
#item?one {
background-color: green;
}
#123item {
background-color: green;
}
Spécifications
| Specification |
|---|
| Selectors Level 4 # id-selectors |