Sélecteurs 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.
Sélecteur CSS [attribut]
Le [attribute]sélecteur est utilisé pour sélectionner des éléments avec un attribut spécifié.
L'exemple suivant sélectionne tous les éléments <a> avec un attribut cible :
Exemple
a[target] {
background-color: yellow;
}
Sélecteur CSS [attribute="valeur"]
Le [attribute="value"]sélecteur 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 <a> avec un attribut target="_blank" :
Exemple
a[target="_blank"] {
background-color: yellow;
}
Sélecteur CSS [attribut~="valeur"]
Le [attribute~="value"]sélecteur 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":
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 [attribute|="value"]sélecteur 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 (-).
Remarque : La valeur doit être un mot entier, soit seul, comme class="top", soit suivi d'un trait d'union ( - ), comme class="top-text".
Exemple
[class|="top"] {
background: yellow;
}
Sélecteur CSS [attribut^="valeur"]
Le [attribute^="value"]sélecteur 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" :
Remarque : La valeur ne doit pas nécessairement être un mot entier !
Exemple
[class^="top"] {
background: yellow;
}
CSS [attribute$="value"] Sélecteur
Le [attribute$="value"]sélecteur 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" :
Remarque : La valeur ne doit pas nécessairement être un mot entier !
Exemple
[class$="test"] {
background: yellow;
}
Sélecteur CSS [attribut*="valeur"]
Le [attribute*="value"]sélecteur 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" :
Remarque : La valeur ne doit pas nécessairement être un mot entier !
Exemple
[class*="te"] {
background: yellow;
}
Formes de style
Les sélecteurs d'attributs peuvent être utiles pour styliser les formulaires sans classe ni ID :
Exemple
input[type="text"]
{
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"]
{
width: 120px;
margin-left: 35px;
display: block;
}
Conseil : Visitez notre didacticiel sur les formulaires CSS pour plus d'exemples sur la manière de styliser les formulaires avec CSS.
Tous les sélecteurs d'attributs CSS
| Selector | Example | Example description |
|---|---|---|
| [attribute] | [target] | Selects all elements with a target attribute |
| [attribute=value] | [target=_blank] | Selects all elements with target="_blank" |
| [attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word "flower" |
| [attribute|=value] | [lang|=en] | Selects all elements with a lang attribute value starting with "en" |
| [attribute^=value] | a[href^="https"] | Selects every <a> element whose href attribute value begins with "https" |
| [attribute$=value] | a[href$=".pdf"] | Selects every <a> element whose href attribute value ends with ".pdf" |
| [attribute*=value] | a[href*="w3schools"] | Selects every <a> element whose href attribute value contains the substring "w3schools" |