Sélecteurs d'attribut CSS

Définir le style des éléments HTML portant des attributs spécifiques

Nous pouvons définir le style des éléments HTML portant des attributs spécifiques ou des valeurs d'attributs spécifiques.

Sélecteur [attribute] CSS

Le sélecteur [attribute] sélectionne les éléments ayant un attribut spécifique.

L'exemple suivant sélectionne tous les éléments <a> ayant l'attribut target ;

Exemple

a[target] {
  background-color: yellow;
}

Essayez-le vous-même

Sélecteur [attribute="value"] CSS

Le sélecteur [attribute="value"] sélectionne les éléments ayant un attribut spécifique avec une valeur spécifique.

L'exemple suivant sélectionne tous les éléments <a> ayant l'attribut target="_blank" :

Exemple

a[target="_blank"] { 
  background-color: yellow;
}

Essayez-le vous-même

Sélecteur [attribute~="value"] CSS

Le sélecteur [attribute~="value"] sélectionne les éléments dont la valeur de l'attribut contient le mot spécifié.

L'exemple suivant sélectionne tous les éléments contenant le mot "flower" dans l'attribut title :

Exemple

[title~="flower"] {
  border: 5px solid yellow;
}

Essayez-le vous-même

Les exemples ci-dessus correspondront aux éléments suivants : title="flower", title="summer flower" et title="flower new", mais ne correspondront pas : title="my-flower" ou title="flowers".

Sélecteur [attribute|="value"] CSS

[attribute|="value"] Sélecteur utilisé pour sélectionner les éléments ayant un attribut spécifique avec une valeur commençant par cette valeur.

Dans cet exemple, les éléments avec l'attribut class commençant par "top" sont sélectionnés :

Commentaires :La valeur doit être un mot complet ou un mot isolé, par exemple class="top" ou suivi d'un tiret, par exemple class="top-text".

Exemple

[class|="top"] {
  background: yellow;
}

Essayez-le vous-même

Sélecteur [attribute^="value"] CSS

Le sélecteur [attribute^="value"] est utilisé pour sélectionner les éléments dont l'attribut commence par la valeur spécifiée.

Dans cet exemple, les éléments avec l'attribut class commençant par "top" sont sélectionnés :

Astuces :La valeur n'a pas besoin d'être un mot complet !

Exemple

[class^="top"] {
  background: yellow;
}

Essayez-le vous-même

Sélecteur [attribute$="value"] CSS

Le sélecteur [attribute$="value"] est utilisé pour sélectionner les éléments dont l'attribut se termine par la valeur spécifiée.

Dans cet exemple, les éléments avec l'attribut class se terminant par "test" sont sélectionnés :

Astuces :La valeur n'a pas besoin d'être un mot complet !

Exemple

[class$="test"] {
  background: yellow;
}

Essayez-le vous-même

Sélecteur [attribute*="value"] CSS

Le sélecteur [attribute*="value"] sélectionne les éléments dont la valeur de l'attribut contient le mot spécifié.

Dans cet exemple, les éléments avec l'attribut class contenant "te" sont sélectionnés :

Astuces :La valeur n'a pas besoin d'être un mot complet !

Exemple

[class*="te"] {
  background: yellow;
}

Essayez-le vous-même

Définir les styles des formulaires

Si vous devez définir des styles pour un formulaire sans class ou id, les sélecteurs d'attribut sont très utiles :

Exemple

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}
input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}

Essayez-le vous-même

Astuces :Visitez notre Tutoriel CSS pour les formulairesPour en savoir plus sur la manière d'ajuster les styles des formulaires CSS, consultez notre

Tous les sélecteurs d'attribut CSS

Sélecteur Exemple Description de l'exemple
[attribute] [target] Sélectionnez tous les éléments qui ont un attribut target.
[attribute=value] [target=_blank] Sélectionnez tous les éléments qui ont l'attribut target="_blank".
[attribute~=value] [title~=flower] Sélectionnez tous les éléments qui ont un attribut title contenant le mot "flower".
[attribute|=value] [lang|=en] Sélectionnez tous les éléments qui ont un attribut lang commençant par "en".
[attribute^=value] a[href^="https"] Sélectionnez chaque élément <a> dont la valeur de l'attribut href commence par "https".
[attribute$=value] a[href$=".pdf"] Sélectionnez chaque élément <a> dont la valeur de l'attribut href se termine par ".pdf".
[attribute*=value] a[href*="codew3c"] Sélectionner chaque élément <a> dont la valeur de l'attribut href contient la sous-chaîne "codew3c".

Lecture complémentaire

Livres de complément :Explication détaillée des sélecteurs d'attribut CSS