Il existe bien des façons de sélectionner des éléments en CSS. La plus basique est la sélection par nom de balise, comme p { }. Presque tout ce qui est plus spécifique qu'un sélecteur de balise utilise des attributs — class et id permettent tous deux de sélectionner ces attributs sur les éléments HTML. Mais la classe et l'ID ne sont pas les seuls attributs que les développeurs peuvent choisir. Nous pouvons utiliser n'importe quel attribut d'un élément comme sélecteur.

La sélection d'attributs a une syntaxe spéciale. En voici un exemple :

a[href="https://css-tricks.com"]
{
  color: #e18728;
}

Il s'agit d'un sélecteur à correspondance exacte qui ne sélectionnera que les liens dont la valeur exacte de l'attribut href est "https://css-tricks.com".

Les sept différents types

Les sélecteurs d'attributs sont sensibles à la casse par défaut (voir correspondance insensible à la casse ci-dessous), et sont écrits entre crochets [].

Il existe sept types différents de correspondances avec un sélecteur d'attribut, et la syntaxe est différente pour chacun. Les sélecteurs d'attributs les plus complexes reposent sur la syntaxe du sélecteur de correspondance exacte : ils commencent tous par le nom de l'attribut et se terminent par un signe égal suivi de la ou des valeurs de l'attribut, généralement entre guillemets. Ce qui se trouve entre le nom de l'attribut et le signe égal est ce qui fait la différence entre les sélecteurs.

[data-value] {
  /* L'attribut existe */
}

[data-value='foo'] {
  /* L'attribut a cette valeur exacte */
}

[data-value*='foo'] {
  /* La valeur de l'attribut contient cette valeur quelque part */
}

[data-value~='foo'] {
  /* L'attribut contient cette valeur quelque part dans une liste séparée par un espace */
}

[data-value^='foo'] {
  /* La valeur de l'attribut commence par ceci */
}

[data-value|='foo'] {
  /* La valeur de l'attribut commence par ceci dans une liste séparée par un tiret */
}

[data-value$='foo'] {
  /* La valeur de l'attribut se termine par ceci */
}

La valeur contient : la valeur de l'attribut contient un terme comme seule valeur, une valeur dans une liste de valeurs ou comme partie d'une autre valeur. Pour utiliser ce sélecteur, ajoutez un astérisque (_) avant le signe égal. Par exemple, img[alt_="art"] sélectionnera les images dont le texte alt est "art abstrait" et "Le départ de Nimrod", car la valeur "art" se trouve dans le mot "départ".

La valeur est dans une liste séparée par un espace : la valeur est soit la seule valeur de l'attribut, soit une valeur entière dans un ensemble de valeurs séparées par un espace. Contrairement au sélecteur "contains", ce sélecteur ne recherchera pas la valeur sous forme de fragment de mot. Pour utiliser ce sélecteur, ajoutez un tilde (~) avant le signe égal. Par exemple, img[alt~="art"] sélectionnera les images avec le texte alt "art abstrait" et "exposition d'art", mais pas "Le départ de Nimrod" (que le sélecteur "contains" sélectionnerait).

Valeur commence par : la valeur de l'attribut commence par le terme sélectionné. Pour utiliser ce sélecteur, ajoutez un caret (^) avant le signe égal. N'oubliez pas que la sensibilité à la casse compte. Par exemple, img[alt^="art"] sélectionnera les images avec le texte alt "exposition d'art" et "motif artistique", mais pas une image avec le texte alt "Arthur Miller" car "Arthur" commence par une majuscule.

La valeur est la première dans une liste séparée par des tirets : Ce sélecteur est très similaire au sélecteur "commence par". Ici, le sélecteur correspond à une valeur qui est soit la seule valeur, soit la première d'une liste de valeurs séparées par un tiret. Pour utiliser ce sélecteur, ajoutez un caractère pipe (|) (tuyau)avant le signe égal. Par exemple, li[data-years|="1900"] sélectionnera les éléments de liste dont la valeur de data-years est "1900-2000", mais pas l'élément de liste dont la valeur de data-years est "1800-1900".

Valeur se terminant par : la valeur de l'attribut se termine par le terme sélectionné. Pour utiliser ce sélecteur, ajoutez un signe dollar ($) avant le signe égal. Par exemple, a[href$="pdf"] sélectionne tous les liens qui se terminent par .pdf.

Une remarque sur les guillemets : Dans certaines circonstances, vous pouvez ne pas utiliser de guillemets autour de la valeur, mais les règles de sélection sans guillemets sont incohérentes d'un navigateur à l'autre. Les guillemets fonctionnent toujours, donc si vous vous en tenez à leur utilisation, vous pouvez être sûr que votre sélecteur fonctionnera.

voir Attribute Selectors de css-tricks dans CodePen

Fait amusant : les valeurs sont traitées comme des chaînes de caractères, vous n'avez donc pas besoin d'effectuer un échappement fantaisiste des caractères pour les faire correspondre, comme vous le feriez si vous utilisiez des caractères inhabituels dans un sélecteur de classe ou d'ID.

[class='(╯°□°）╯︵ ┻━┻'] {
  couleur: rouge;
  font-weight: bold;
}

Correspondance insensible à la casse

Les sélecteurs d'attributs insensibles à la casse font partie de la spécification Selectors Level 4 du groupe de travail CSS. Comme mentionné ci-dessus, les chaînes de valeur d'attribut sont par défaut sensibles à la casse, mais peuvent être modifiées en insensibles à la casse en ajoutant i juste avant le crochet fermant :

[attribute='value' i] {
  /* Les styles ici s'appliqueront aux éléments avec :
    attribut="valeur"
    attribut="VaLuE"
    attribut="VALUE"
    ...etc
  */
}

La correspondance insensible à la casse pourrait être vraiment pratique pour cibler les attributs contenant du texte imprévisible, écrit par les humains. Par exemple, supposons que vous conceviez une bulle de dialogue sur une application de chat et que vous souhaitiez ajouter une "main agitée" à tous les messages contenant le texte "hello" sous une forme ou une autre. Vous pourriez le faire rien qu'avec CSS, en utilisant une correspondance insensible à la casse pour attraper toutes les variations possibles :

voir Case-insensitive CSS attribute matching de css-tricks dans CodePen

Combiner tout cela

Vous pouvez combiner un sélecteur d'attribut avec d'autres sélecteurs, tels que tag, class ou ID.

div[attribute='value'] {
  /* règles de style ici */
}

.module[attribute='value'] {
  /* règles de style ici */
}

#header[attribute='value'] {
  /* règles de style ici */
}

Vous pouvez même combiner plusieurs sélecteurs d'attributs. Cet exemple sélectionne les images dont le texte alternatif comprend le mot "personne" comme seule valeur ou une valeur dans une liste séparée par un espace, et une valeur src qui comprend la valeur "lorem" :

img[alt~='person'][src*='lorem'] {
  /* règles de style ici */
}

voir Combined Attributes and Attribute-Only Selection de css-tricks dans CodePen

Sélecteurs d'attributs en JavaScript et jQuery

Les sélecteurs d'attributs peuvent être utilisés dans jQuery comme tout autre sélecteur CSS. En JavaScript, vous pouvez utiliser les sélecteurs d'attributs avec document.querySelector() et document.querySelectorAll().

voir Attribute Selectors in JS and jQuery de css-tricks dans CodePen