#id
Sélectionne l’élément portant l’identifiant indiqué dans l’attribut id. Il a une spécificité très élevée, donc ses règles sont difficiles à écraser par la suite.
Exemple
##faq {
padding: 12px;
border-radius: 12px;
transition: background-color 0.3s;
}
#faq:target {
background: rgb(124 58 237 / 0.2);
outline: 2px solid #a78bfa;
}<p style="margin: 0 0 10px;"><a href="#faq" style="color: #c4b5fd;">Aller à la FAQ</a></p>
<section id="faq">
<strong>Foire aux questions</strong>
<p style="margin: 4px 0 0; color: #a1a1aa;">Cette section a id="faq". Cliquez sur le lien ci-dessus, et elle sera mise en valeur.</p>
</section>Cliquez sur le lien dans l’aperçu. L’adresse se termine alors par #faq, et la section correspond à la pseudo-classe :target.
Définition et utilisation
#Un sélecteur d’identifiant commence par le signe # : la règle #panier { … } touche l’élément avec l’attribut id="panier". Un identifiant doit être unique dans tout le document, donc un tel sélecteur désigne généralement exactement un élément.
Sa spécificité est (1, 0, 0). Un seul identifiant l’emporte sur n’importe quel nombre de classes, c’est pourquoi les règles écrites avec # sont difficiles à écraser par la suite. C’est pour cette raison que la plupart des équipes stylisent leurs composants avec des classes, et réservent les identifiants aux ancres, aux étiquettes de formulaire (<label for>) et au JavaScript.
Les identifiants sont utiles pour la navigation à l’intérieur d’une page. Le lien href="#tarifs" fait défiler jusqu’à l’élément avec id="tarifs", et cet élément correspond alors à la pseudo-classe :target, que vous pouvez mettre en valeur. La casse compte, et un identifiant qui commence par un chiffre doit être échappé en CSS.
Si vous devez cibler un élément par son identifiant sans augmenter le poids du sélecteur, utilisez le sélecteur d’attribut [id="panier"] (poids d’une classe) ou :where(#panier) (poids nul).
Syntaxe
##identifiant { propriété: valeur; }Variantes d’écriture
#- L’élément avec
id="logo". Une classe du même nom ne correspond pas, car c’est un attribut complètement différent. (1, 0, 1)
L’identifiant comme point d’ancrage : chaquespanà l’intérieur de#menu. Toute la règle hérite du poids de l’identifiant.(0, 1, 0)
Le sélecteur d’attribut touche le même élément, mais pèse comme une classe, pas comme un identifiant.(0, 0, 0)
Le même élément avec un poids nul. Même un simple sélecteur de type écrasera une règle comme celle-ci.
Variantes d’écriture en pratique
##logo
id="logo". Une classe du même nom ne correspond pas, car c’est un attribut complètement différent.#logo { background: #7c3aed; color: #fff; }[id="logo"]
[id="logo"] { background: #7c3aed; color: #fff; }:where(#logo)
:where(#logo) { background: #7c3aed; color: #fff; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Pour le style, préférez les classes. Réservez les identifiants aux ancres, aux étiquettes de formulaire et aux scripts, et utilisez-les avec parcimonie en CSS.
- Ne répétez pas le même
idsur une page. Le navigateur tolère l’erreur, maisgetElementById, les étiquettes<label for>et les ancres ne fonctionneront que pour le premier élément de ce type. - Mettez en valeur avec la pseudo-classe
:targetles sections vers lesquelles mènent des liens d’ancrage. L’utilisateur verra immédiatement où il a atterri.
Entrées associées
#- .classeSélectionne les éléments qui ont la classe indiquée dans l’attribut class. Le sélecteur le plus utilisé pour styliser des composants.
- [attribut]Sélectionne les éléments selon un attribut HTML et sa valeur : exacte, au début, à la fin, un fragment, ou un mot dans une liste.
- SpécificitéLe poids d’un sélecteur, qui détermine quelle règle gagne lorsque plusieurs règles définissent la même propriété du même élément.
- :where()Fonctionne comme :is(), mais a toujours une spécificité nulle. Idéale pour les styles de base, faciles à redéfinir.
- A BUn espace entre deux sélecteurs sélectionne les éléments B situés n’importe où à l’intérieur de l’élément A, à n’importe quelle profondeur.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.