Sommaire
- Intro
- Attributes
- Logique & condition
- not, is, where…
Deuxième partie de cette exploration des sélecteurs CSS.
On va approfondir les sélecteurs d’attributs. Particulièrement puissants ces sélecteurs permettent d’analyser le contenu de l’attribut et d’agir sur l’élément en fonction.
Attribute selectors
CSS2 a introduit quatre sélecteurs par “attribut”. Il s’agit de viser un élément HTML par une de ces attributs. Par exemple, je peux cibler un lien balise <a> selon le contenu de son attribut href (le lien).
[att]
Représente un élément avec l’attribut ‘att’, quel que soit la valeur de l’attribut.
a[download]::before {
content:'\f56d';
opacity:.8
}Affiche une icône de téléchargement si la balise a contient l’attribut ‘download’
[att=val]
Représente un élément avec l’attribut ‘att’, dont la valeur est exactement “val”.
a[href="https://www.domaine.ext"][att~=val]
Représente un élément avec l’attribut ‘att’, don’t la valeur est une liste de mots séparés par des espaces, don’t l’un est exactement “val”. Si “val” contient des espaces, il ne représentera jamais rien (puisque les mots sont séparés par des espaces). De même, si “val” est une chaîne vide, il ne représentera jamais rien.
[att|=val-]
Représente un élément avec l’attribut ‘att’, sa valeur étant soit exactement “val” ou commençant par “val” (et immediatemment suivi de “-” (U+002D). Cette classe est principalement destinée à permettre la correspondance des sous-codes de langue (par exemple, l’attribut hreflang sur l’élément a en HTML), comme décrit dans le document BCP 47 ([BCP47]) ou son successeur. Pour la correspondance des sous-codes de langue lang (ou xml:lang), veuillez consulter la pseudo-classe :lang.
[exemple]
Sélecteurs de sous-chaînes d’attribut
Trois autres sélecteurs d’attribut permettent de “pointer” des sous-chaînes (fragments de texte breton mais pas que) de caractères dans la valeur d’un attribut :
[att^=val]
Représente un élément avec l’attribut ‘att’ dont la valeur commence par le préfixe “val”. Si “val” est vide alors le sélecteur ne représente rien.
a[href^="tel:"]::after {
content:'';
}Une url qui commence par tel: (numéro cliquable)
[att$=val]
Représente un élément avec l’attribut ‘att’ dont la valeur termine par le suffixe “val”. Si “val” est vide alors le sélecteur ne représente rien.
a[href$=".pdf"]::before {
content:'\f1c1';
}
Affiche une icône avant un lien vers un pdf
[att*=val]
est un élément avec l’attribut ‘att’ dont la valeur contient au moins une instance de la sous-chaîne “val”. Si “val” est vide alors le sélecteur ne représente rien.
