CSS peut-il cibler les éléments HTML en fonction de n'importe quelle valeur d'attribut ?

Ciblage d'éléments HTML avec n'importe quelle valeur d'attribut en CSS

En CSS, il est possible de cibler des éléments en fonction d'attributs spécifiques, comme illustré dans l'exemple ci-dessous :

input[type=text] {
    font-family: Consolas;
}

Cependant, une question courante se pose : les éléments peuvent-ils être ciblés en fonction de n'importe quelle valeur d'attribut ? Cet article explore ce sujet.

Utilisation du sélecteur d'attribut

Pour cibler des éléments avec n'importe quelle valeur d'attribut, le sélecteur d'attribut peut être utilisé. En omettant la valeur après le nom de l'attribut, tous les éléments avec cet attribut sont sélectionnés. Par exemple :

a[rel] {
    color: red;
}

Avec cette règle, l'extrait HTML fourni styliserait le premier et le troisième balises en rouge :

<a href="#" rel="eg">red text</a>
<a href="#">standard text</a>
<a href="#" rel="more">red text again</a>

Ce comportement reflète le style de curseur par défaut : pointeur appliqué à balises avec des attributs href définis.

a[rel]:not([rel=""]) {
    color: red;
}