CSS Sélecteurs d'attributs
Sélecteurs d'attributs CSS
Les sélecteurs d'attributs CSS sont utilisés pour sélectionner et styliser des éléments HTML ayant un attribut ou une valeur d'attribut spécifique, ou les deux.
Les différents types de sélecteurs d'attributs sont décrits ci-dessous.
Sélecteur CSS [attribut]
Le [attribut] sélecteur est utilisé pour sélectionner des éléments possédant un attribut spécifique.
L'exemple suivant sélectionne tous les éléments <a> ayant un attribut target :
Exemple
a[target] {
background-color: yellow;
} Sélecteur CSS [attribut="valeur"]
Le [attribut="valeur"] sélecteur est utilisé pour sélectionner des éléments ayant un attribut spécifique avec une valeur exacte.
L'exemple suivant sélectionne tous les éléments <a> ayant un attribut target="_blank" :
Exemple
a[target="_blank"] {
background-color: yellow;
} Sélecteur CSS [attribut~="valeur"]
Le [attribut~="valeur"] sélecteur est utilisé pour sélectionner des éléments dont la valeur d'attribut contient un mot spécifique.
L'exemple suivant sélectionne tous les éléments ayant un attribut title contenant une liste de mots séparés par des espaces, dont l'un est "fleur" :
Exemple
[title~="flower"] {
border: 5px solid yellow;
} 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".
Sélecteur CSS [attribut|="valeur"]
Le [attribut|="valeur"] sélecteur est utilisé pour sélectionner des éléments ayant un attribut spécifique, dont la valeur peut être exactement celle-ci ou commencer par celle-ci suivie d'un tiret (-).
Remarque : La valeur doit être un mot entier, soit seul, comme class="top", soit suivi d'un tiret (-), comme class="top-text".
Exemple
[class|="top"] {
background: yellow;
} Sélecteur CSS [attribut^="valeur"]
Le [attribut^="valeur"] sélecteur est utilisé pour sélectionner des éléments ayant un attribut spécifique dont la valeur commence par une valeur donnée.
L'exemple suivant sélectionne tous les éléments ayant une valeur d'attribut class qui commence par "top" :
Exemple
[class^="top"] {
background: yellow;
} Sélecteur CSS [attribut$="valeur"]
Le [attribut$="valeur"] sélecteur est utilisé pour sélectionner des éléments dont la valeur d'attribut se termine par une valeur donnée.
L'exemple suivant sélectionne tous les éléments ayant une valeur d'attribut class qui se termine par "test" :
Exemple
[class$="test"] {
background: yellow;
} Sélecteur CSS [attribut*="valeur"]
Le [attribut*="valeur"] sélecteur est utilisé pour sélectionner des éléments dont la valeur d'attribut contient une valeur donnée.
L'exemple suivant sélectionne tous les éléments ayant une valeur d'attribut class contenant "te" :
Exemple
[class*="te"] {
background: yellow;
} Styliser les éléments de formulaire avec des sélecteurs d'attributs
Les sélecteurs d'attributs CSS peuvent être utiles pour styliser les éléments de formulaire, en fonction du type d'entrée :
Exemple
input[type="text"] {
width: 150px;
padding: 6px;
margin-bottom: 10px;
background-color: pink;
}
input[type="button"] {
width: 100px;
padding: 6px;
background-color: lightgreen;
} Astuce : Visitez notre Tutoriel CSS sur les formulaires pour plus d'exemples sur la façon de styliser les formulaires avec CSS.
Tous les sélecteurs d'attributs CSS
| Sélecteur | Description |
|---|---|
| [ attribut ] | Sélectionner des éléments avec un attribut spécifique |
| [ attribut = valeur ] | Sélectionner des éléments avec un attribut spécifique ayant une valeur exacte |
| [ attribut ~= valeur ] | Sélectionner des éléments avec une valeur d'attribut contenant un mot spécifique |
| [ attribut |= valeur ] | Sélectionner des éléments avec l'attribut spécifique, dont la valeur peut être exactement celle-ci ou commencer par celle-ci suivie d'un tiret (-) |
| [ attribut ^= valeur ] | Sélectionner des éléments avec l'attribut spécifique, dont la valeur commence par une valeur donnée |
| [ attribut $= valeur ] | Sélectionner des éléments dont la valeur d'attribut se termine par une valeur donnée |
| [ attribut *= valeur ] | Sélectionner des éléments dont la valeur d'attribut contient une valeur donnée |