[CSS] Sélecteurs d'attribut
Posté : jeu. 6 juil. 2023 09:00
Les sélecteurs d'attribut permettent de cibler un élément selon la présence d'un attribut ou selon la valeur donnée d'un attribut.
Syntaxe
Code : Tout sélectionner
/* Les éléments <a> avec un attribut title */
a[title] {
color: purple;
}
/* Les éléments <a> avec un href qui correspond */
/* à "https://example.org" */
a[href="https://example.org"] {
color: green;
}
/* Les éléments <a> dont href contient "example" */
a[href*="example"] {
font-size: 2em;
}
/* Les éléments <a> dont href finit par ".org" */
a[href$=".org"] {
font-style: italic;
}
/* Les éléments <a> dont l'attribut class contient le mot logo */
/* comportement identique à a.logo */
a[class~="logo"] {
padding: 2px;
}
Syntaxe
[attr]
- Permet de cibler un élément qui possède un attribut attr.
[attr=valeur]
- Permet de cibler un élément qui possède un attribut attr dont la valeur est exactement valeur.
[attr~=valeur]
- Permet de cibler un élément qui possède un attribut attr dont la valeur est valeur. Cette forme permet de fournir une liste de valeurs, séparées par des blancs, à tester. Si au moins une de ces valeurs est égale à celle de l'attribut, l'élément sera ciblé.
[attr|=valeur]
- Permet de cibler un élément qui possède un attribut attr dont la valeur est exactement valeur ou dont la valeur commence par valeur suivi immédiatement d'un tiret (U+002D). Cela peut notamment être utilisé pour effectuer des correspondances avec des codes de langues.
[attr^=valeur]
- Permet de cibler un élément qui possède un attribut attr dont la valeur commence par valeur.
[attr$=valeur]
- Permet de cibler un élément qui possède un attribut attr dont la valeur se termine par valeur.
[attr*=valeur]
- Permet de cibler un élément qui possède un attribut attr et dont la valeur contient au moins une occurrence de valeur dans la chaîne de caractères.
[attr operateur valeur i]
- On peut ajouter un i (ou I) avant le crochet de fin. Dans ce cas, la casse ne sera pas prise en compte (pour les caractères contenus sur l'intervalle ASCII).
[attr operateur valeur s] Expérimental
- Ajouter un s (ou S) avant le crochet fermant permettra d'effectuer une comparaison de valeur sensible à la casse (pour les caractères ASCII).