Sélecteur d’attributs CSS
Stylez les éléments HTML avec des attributs spécifiques
Il est possible de styliser les éléments HTML qui ont des attributs ou des valeurs d’attribut spécifiques.
CSS [attribute] Sélecteur
Le [attribute] selector est utilisé pour sélectionner des éléments avec un attribut spécifié.
L’exemple suivant sélectionne tous les éléments avec un attribut cible :
CSS [attribute= »value »] Sélecteur
Le [attribute="value"] selector est utilisé pour sélectionner des éléments avec un attribut et une valeur spécifiés.
L’exemple suivant sélectionne tous les éléments avec un attribut target= »_blank » :
CSS [attribute~= »value »] Sélecteur
Le [attribute~="value"] selector est utilisé pour sélectionner des éléments avec une valeur d’attribut contenant un mot spécifié.
L’exemple suivant sélectionne tous les éléments avec un attribut title qui contient une liste de mots séparés par des espaces, dont l’un est « flower »:
L’exemple ci-dessus correspondra aux éléments avec title= »flower », title= »summer flower » et title= »flower new », mais pas title= »my-flower » ou title= »flowers ».
CSS [attribute|= »value »] Sélecteur
Le [attribute|="value"] selector est utilisé pour sélectionner des éléments avec l’attribut spécifié, dont la valeur peut être exactement la valeur spécifiée, ou la valeur spécifiée suivie d’un trait d’union (-).
Note: La valeur doit être un mot entier, soit seul, comme class= »top », soit suivi d’un trait d’union ( – ), comme class= »top-text ».
CSS [attribute^= »value »] Sélecteur
Le [attribute^="value"] selector est utilisé pour sélectionner des éléments avec l’attribut spécifié, dont la valeur commence par la valeur spécifiée.
L’exemple suivant sélectionne tous les éléments avec une valeur d’attribut de classe commençant par « top » :
Note: La valeur ne doit pas nécessairement être un mot entier !
CSS [attribute$= »value »] Sélecteur
Le [attribute$="value"] selector est utilisé pour sélectionner des éléments dont la valeur d’attribut se termine par une valeur spécifiée.
L’exemple suivant sélectionne tous les éléments avec une valeur d’attribut de classe qui se termine par « test » :
Note: La valeur ne doit pas nécessairement être un mot entier !
CSS [attribute*= »value »] Sélecteur
Le [attribute*="value"] selector est utilisé pour sélectionner des éléments dont la valeur d’attribut contient une valeur spécifiée.
L’exemple suivant sélectionne tous les éléments avec une valeur d’attribut de classe contenant « te » :
Note: La valeur ne doit pas nécessairement être un mot entier !
Formes de style
Les sélecteurs d’attributs peuvent être utiles pour styliser les formulaires sans classe ni ID :
Exemple
saisir[type= »text »]
{
largeur : 150 pixels ;
bloc de visualisation;
marge inférieure : 10px ;
couleur de fond : jaune ;
}
saisir[type= »button »]
{
largeur : 120 pixels ;
marge gauche : 35px ;
bloc de visualisation;
}
Essayez-le vous-même »
Conseil: Visitez notre tutoriel sur les formulaires CSS pour plus d’exemples sur la façon de styliser les formulaires avec CSS.
Tous les sélecteurs d’attributs CSS
| Sélecteur | Exemple | Exemple de description |
|---|---|---|
| [attribute] | [target] | Sélectionne tous les éléments avec un attribut cible |
| [attribute=value] | [target= »_blank »] | Sélectionne tous les éléments avec target= »_blank » |
| [attribute~=value] | [title~= »flower »] | Sélectionne tous les éléments avec un attribut de titre contenant le mot « fleur » |
| [attribute|=value] | [lang|= »en »] | Sélectionne tous les éléments avec une valeur d’attribut lang commençant par « en » |
| [attribute^=value] | un[href^= »https »] | Sélectionne chaque élément dont la valeur d’attribut href commence par « https » |
| [attribute$=value] | un[href$= ».pdf »] | Sélectionne chaque élément dont la valeur d’attribut href se termine par « .pdf » |
| [attribute*=value] | un[href*= »w3schools »] | Sélectionne chaque élément dont la valeur d’attribut href contient la sous-chaîne « Infodewi » |
#Sélecteur #dattributs #CSS