[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.
Exemple
#a[href^="https"]::after {
content: " ↗";
}
a[href$=".pdf"]::before {
content: "PDF";
margin-right: 6px;
padding: 1px 5px;
border-radius: 4px;
background: #f43f5e;
color: #fff;
font-size: 11px;
font-weight: 700;
}<ul class="stage" style="display: grid; gap: 8px; margin: 0; padding: 12px 14px; list-style: none;">
<li><a href="https://example.com" style="color: #c4b5fd;">Documentation externe</a></li>
<li><a href="/files/syllabus.pdf" style="color: #c4b5fd;">Programme du cours</a></li>
<li><a href="/cours" style="color: #c4b5fd;">Liste des cours</a></li>
</ul>Définition et utilisation
#Un sélecteur d’attribut s’écrit entre crochets. [title] seul sélectionne chaque élément qui a un attribut title, quelle que soit sa valeur, même vide. Une fois que vous ajoutez un opérateur et une valeur, vous vérifiez le contenu de l’attribut : la valeur exacte, son début, sa fin, un fragment quelconque ou un seul mot d’une liste.
C’est un moyen pratique de styliser sans ajouter de classes. Vous distinguez les champs de formulaire par leur type (input[type="email"]), les liens externes par le début de l’adresse (a[href^="https"]), et les fichiers par leur extension (a[href$=".pdf"]). Cela fonctionne aussi très bien avec les attributs data-* et aria-*, qui décrivent l’état d’un composant, par exemple [aria-expanded="true"].
Une valeur entre guillemets est toujours sûre. Vous ne pouvez omettre les guillemets que si la valeur est un simple mot fait de lettres, de chiffres, de traits d’union et de tirets bas, qui ne commence pas par un chiffre. La casse de la valeur compte généralement, sauf si vous ajoutez le drapeau i avant le crochet fermant.
La spécificité d’un sélecteur d’attribut est (0, 1, 0), autant qu’une classe. Vous rencontrerez plus rarement l’opérateur |= : [lang|="fr"] correspond à la valeur fr ainsi qu’aux valeurs qui commencent par fr-, par exemple fr-FR.
Syntaxe
#[attribut] | [attribut="v"] | [attribut^="v"] | [attribut$="v"] | [attribut*="v"] | [attribut~="v"] | [attribut|="v"] | [attribut="v" i]Variantes d’écriture
#[attribut]
Seule la présence de l’attribut compte, la valeur n’a pas d’importance. Seul le lien avec un attributtitlecorrespond.[attribut="v"]
Exactement cette valeur, caractère pour caractère. L’élément avec « css new » ne correspond pas, même s’il contient aussi le mot css.[attribut^="v"]
La valeur commence par le texte indiqué. C’est la façon la plus courante de repérer les liens externes.[attribut$="v"]
La valeur se termine par le texte indiqué. Le fichierMAP.PDFne correspond pas, car la casse compte.[attribut*="v"]
Le texte indiqué apparaît n’importe où dans la valeur, même au milieu de l’adresse. Les deux liens vers des fichiers correspondent.[attribut~="v"]
La valeur est une liste de mots séparés par des espaces, et l’un d’eux est exactement « css ». Le mot « css-grid » ne compte pas.drapeau i
Le drapeauidésactive la sensibilité à la casse, donc les deux fichiers PDF correspondent : en minuscules et en majuscules.
Variantes d’écriture en pratique
#[title]
title correspond.[title] { background: #7c3aed; color: #fff; }[href^="https"]
[href^="https"] { background: #7c3aed; color: #fff; }[href$=".pdf"]
MAP.PDF ne correspond pas, car la casse compte.[href$=".pdf"] { background: #7c3aed; color: #fff; }[href*="files"]
[href*="files"] { background: #7c3aed; color: #fff; }[href$=".pdf" i]
i désactive la sensibilité à la casse, donc les deux fichiers PDF correspondent : en minuscules et en majuscules.[href$=".pdf" i] { background: #7c3aed; color: #fff; }Plus d’exemples
#.toggle[aria-expanded="true"] {
background: #7c3aed;
}
.toggle[aria-expanded="false"] + .details {
display: none;
}<style>
.toggle { padding: 8px 14px; border: 0; border-radius: 8px; background: #3f3f46; color: #fff; font: inherit; cursor: pointer; }
.details { margin: 8px 0 0; color: #a1a1aa; }
</style>
<button class="toggle" type="button" aria-expanded="false" onclick="this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true')">Détails de la leçon</button>
<p class="details">Durée : 15 minutes. Niveau : débutant.</p>Cliquez sur le bouton. Le script ne change que la valeur aria-expanded ; la couleur du bouton et la visibilité des détails ne dépendent que du CSS.
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
#- Gardez l’état d’un composant dans des attributs comme
aria-expandedoudata-state, et stylisez-le avec un sélecteur d’attribut. L’apparence correspondra alors toujours à ce qu’entendent les utilisateurs de lecteurs d’écran. - Un sélecteur d’attribut ne voit que les attributs écrits dans le HTML.
input[value=""]ne réagira pas à la saisie, et[checked]ne réagira pas au clic sur le champ. Les pseudo-classes comme:checkedet:placeholder-shownservent à l’état en cours. - Les adresses et les extensions de fichiers s’écrivent parfois différemment, c’est pourquoi avec
^=,$=et*=il vaut la peine d’envisager le drapeaui.
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.
- #idSé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.
- 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.
- :checkedCorrespond à une case cochée, à un bouton radio sélectionné et à l’option choisie dans une liste select.
- :not()Sélectionne les éléments qui ne correspondent à aucun des sélecteurs fournis, ni à aucun de la liste.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.