Il existe de nombreuses façons de sélectionner des éléments en CSS. La sélection la plus basique se fait par nom de balise, comme p ( ). Presque tout ce qui est plus spécifique qu'un sélecteur de balises utilise des attributs - classet les IDdeux sélectionnent ces attributs sur des éléments HTML. Mais classet IDne sont pas les seuls attributs les développeurs peuvent choisir. Nous pouvons utiliser n'importe lequel des attributs d'un élément comme sélecteurs.
La sélection d'attributs a une syntaxe spéciale. Voici un exemple:
a(href="https://css-tricks.com") ( color: #E18728; )C'est un sélecteur de correspondance exacte qui ne sélectionnera que les liens avec la hrefvaleur d'attribut exacte "https://css-tricks.com".
Les sept types différents
Les sélecteurs d'attributs sont sensibles à la casse par défaut (voir la correspondance insensible à la casse ci-dessous) et sont écrits entre crochets ().
Il existe sept types différents de correspondances que vous pouvez trouver avec un sélecteur d'attribut, et la syntaxe est différente pour chacun. Chacun des sélecteurs d'attributs les plus complexes s'appuie 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 d'attribut, généralement entre guillemets. Ce qui se passe entre le nom d'attribut et le signe égal est ce qui fait la différence entre les sélecteurs.
(data-value) ( /* Attribute exists */ ) (data-value="foo") ( /* Attribute has this exact value */ ) (data-value*="foo") ( /* Attribute value contains this value somewhere in it */ ) (data-value~="foo") ( /* Attribute has this value in a space-separated list somewhere */ ) (data-value^="foo") ( /* Attribute value starts with this */ ) (data-value|="foo") ( /* Attribute value starts with this in a dash-separated list */ ) (data-value$="foo") ( /* Attribute value ends with this */ )La valeur contient: la valeur d'attribut contient un terme comme seule valeur, une valeur dans une liste de valeurs ou dans le cadre d'une autre valeur. Pour utiliser ce sélecteur, ajoutez un astérisque (*) avant le signe égal. Par exemple, img(alt*="art")sélectionnera des images avec le texte alternatif «art abstrait» et «athlète commençant un nouveau sport», car la valeur «art» se trouve dans le mot «début».
La valeur est dans une liste séparée par des espaces: la valeur est soit la seule valeur d'attribut, soit une valeur entière dans un ensemble de valeurs séparées par des espaces. Contrairement au sélecteur «contient», ce sélecteur ne recherchera pas la valeur en tant que fragment de mot. Pour utiliser ce sélecteur, ajoutez un tilde (~) avant le signe égal. Par exemple, img(alt~="art")sélectionnera des images avec le texte alternatif «art abstrait» et «exposition d'art», mais pas «athlète commençant un nouveau sport» (que le sélecteur «contient» sélectionnerait).
La valeur commence par: la valeur de l'attribut commence par le terme sélectionné. Pour utiliser ce sélecteur, ajoutez un signe d'insertion (^) avant le signe égal. N'oubliez pas que le respect de la casse est important. Par exemple, img (alt = "art") sélectionnera des images avec le texte alternatif "exposition d'art" et "motif artistique", mais pas une image avec le texte alternatif "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 des tirets. Pour utiliser ce sélecteur, ajoutez une barre verticale (|) avant le signe égal. Par exemple, li(data-years|="1900")sélectionnera les éléments de liste avec une data-yearsvaleur de «1900-2000», mais pas l'élément de liste avec une data-yearsvaleur de «1800-1900».
La valeur se termine 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 chaque lien qui se termine par .pdf.
Remarque sur les guillemets: vous pouvez passer sans guillemets autour de la valeur dans certaines circonstances, mais les règles de sélection sans guillemets sont incompatibles entre les navigateurs. Les citations fonctionnent toujours, donc si vous vous en tenez à les utiliser, vous pouvez être sûr que votre sélecteur fonctionnera.
Voir les sélecteurs d'attributs de stylet par CSS-Tricks (@ css-tricks) sur CodePen.
Fait amusant: les valeurs sont traitées comme des chaînes, vous n'avez donc pas besoin de faire d'échapper des caractères fantaisie 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="(╯°□°）╯︵ ┻━┻")( color: red; font-weight: bold; )Correspondance insensible à la casse
Les sélecteurs d'attributs insensibles à la casse font partie de la spécification de niveau 4 des sélecteurs 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 ijuste avant le crochet fermant:
(attribute="value" i) ( /* Styles here will apply to elements with: attribute="value" attribute="VaLuE" attribute="VALUE"… etc */ )La correspondance insensible à la casse peut être très pratique pour cibler des attributs contenant du texte imprévisible écrit par l'homme. Par exemple, supposons que vous styliez une bulle de dialogue sur une application de chat et que vous vouliez ajouter une «main agitant» à tous les messages avec le texte «bonjour» sous une forme ou une autre. Vous pouvez le faire avec seulement CSS, en utilisant un matcher insensible à la casse pour capturer toutes les variations possibles:
Voir l'attribut CSS Pen insensible à la casse par CSS-Tricks (@ css-tricks) sur CodePen.
Les combiner
Vous pouvez combiner un sélecteur d'attribut avec d'autres sélecteurs, comme une balise, une classe ou un ID.
div(attribute="value") ( /* style rules here */ ) .module(attribute="value") ( /* style rules here */ ) #header(attribute="value") ( /* style rules here */ )Ou même combiner plusieurs sélecteurs d'attributs. Cet exemple sélectionne des images avec un texte alternatif qui inclut le mot «personne» comme seule valeur ou une valeur dans une liste séparée par des espaces, et une srcvaleur qui inclut la valeur «lorem»:
img(alt~="person")(src*="lorem") ( /* style rules here */ )Voir les attributs combinés du stylo et la sélection d'attributs uniquement par CSS-Tricks (@ css-tricks) sur CodePen.
Sélecteurs d'attributs dans JavaScript et jQuery
Les sélecteurs d'attributs peuvent être utilisés dans jQuery comme n'importe quel autre sélecteur CSS. En JavaScript, vous pouvez utiliser des sélecteurs d'attributs avec document.querySelector()et document.querySelectorAll().
Voir les sélecteurs d'attributs de stylo dans JS et jQuery par CSS-Tricks (@ css-tricks) sur CodePen.
En rapport
- classer
- identifiant
Plus d'information
- Le skinny sur les sélecteurs d'attributs
- Sélecteurs d'attributs chez MDN
- Sélecteurs d'attributs dans la spécification CSS W3C
Prise en charge du navigateur
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| Tout | Tout | Tout | Tout | 7+ | Tout | Tout |