Tous les éléments HTML ne portent pas une classe ou un id pratique à cibler. Le sélecteur d'attribut permet de s'appuyer directement sur les attributs déjà présents dans le balisage, sans en ajouter un seul.
C'est un outil particulièrement utile sur des formulaires ou du contenu généré automatiquement, là où poser une classe sur chaque élément serait fastidieux, voire impossible si le HTML provient d'un autre système.
Définition
Le sélecteur d'attribut cible un élément HTML selon la présence ou la valeur d'un de ses attributs, entre crochets. La forme la plus simple, [attribut], cible tout élément qui possède cet attribut, peu importe sa valeur.
Les variantes de correspondance
Au-delà de la simple présence, CSS propose plusieurs opérateurs pour comparer la valeur de l'attribut à un texte précis.
/* présence de l'attribut, valeur ignorée */
[disabled] {
opacity: 0.5;
}
/* valeur exactement égale */
input[type="email"] {
border-color: #999;
}
/* la valeur COMMENCE par ce texte */
a[href^="https://"] {
color: green;
}
/* la valeur SE TERMINE par ce texte */
a[href$=".pdf"] {
padding-right: 20px;
}
/* la valeur CONTIENT ce texte, où qu'il soit */
a[href*="believemy"] {
font-weight: bold;
}Le symbole placé avant le signe égal change le comportement : ^= pour un début de chaîne, $= pour une fin de chaîne, *= pour n'importe où dans la valeur.
Cas d'usage typique
Un exemple courant est le ciblage des champs de formulaire selon leur type, sans ajouter la moindre classe : input[type="email"] cible tous les champs email d'un formulaire, même générés par une bibliothèque tierce qui ne laisse pas ajouter de classe personnalisée. C'est aussi utile pour styliser des liens externes, des fichiers à télécharger, ou des éléments qui portent un attribut data-* ajouté par du JavaScript.
Sensibilité à la casse
Par défaut, la comparaison d'un sélecteur d'attribut est sensible à la casse pour la plupart des attributs HTML. Il est possible de forcer une comparaison insensible à la casse en ajoutant la lettre i juste avant le crochet fermant, par exemple [lang="fr" i].
data-*, autant s'appuyer dessus directement.Un exemple complet sur un formulaire
Imaginez un formulaire généré par une bibliothèque tierce, où chaque champ obéit à une structure imposée sans possibilité d'ajouter une classe personnalisée. Le Sélecteur CSS de type attribut devient alors la seule option fiable pour distinguer visuellement les champs obligatoires, les champs en erreur ou les champs déjà remplis.
/* champ obligatoire */
input[required] {
border-left: 3px solid #e63946;
}
/* champ déjà rempli et valide */
input:not(:placeholder-shown):valid {
border-color: #2a9d8f;
}
/* case à cocher déjà cochée */
input[type="checkbox"][checked] {
accent-color: #2d6cdf;
}Associé à un Combinateurs CSS, comme dans form input[required], le sélecteur d'attribut permet de restreindre la portée à un seul formulaire de la page, sans jamais dépendre d'une classe ajoutée à la main. Cette approche se marie aussi très bien avec le Sélecteur de classe pour les cas où une classe existe déjà, en combinant les deux dans un seul sélecteur composé.
Questions fréquentes
Oui, sans espace entre les deux, comme .champ[required], qui cible uniquement les éléments portant la classe champ et l'attribut required en même temps. Cette combinaison reste parfaitement lisible et évite d'avoir à choisir entre les deux approches quand elles se complètent naturellement sur un même élément.
Oui, il fonctionne sur n'importe quel attribut présent dans le HTML, y compris les attributs data-* ajoutés à la main ou générés dynamiquement par une application.
Le sélecteur qui vérifie seulement la présence de l'attribut, comme [disabled], fonctionne même si l'attribut n'a aucune valeur associée, ce qui est courant pour des attributs booléens en HTML.