CSS attribut Sélecteurs

De style des éléments HTML avec des attributs spécifiques

Il est possible de de style des éléments HTML qui ont des attributs spécifiques, et pas seulement class et id.

Remarque: IE7 et IE8 sélecteurs d'attributs de soutien que si un DOCTYPE est spécifié!. La sélection des attributs est PAS pris en charge dans IE6 et inférieur.

---

Sélecteur d'attribut

L'exemple ci-dessous styles tous les éléments avec un attribut title:

Exemple

[title]
{
color:blue;
}

Essayez vous-même »

---

Attribut et le sélecteur de valeur

L'exemple ci-dessous tous les éléments avec les styles title = "W3Schools":

Exemple

[title=W3Schools]
{
border:5px solid green;
}

Essayez vous-même »

---

Attribut et la valeur de sélection - Les valeurs multiples

L'exemple ci-dessous styles tous les éléments avec un attribut title qui contient une valeur spécifiée. Cela fonctionne même si l'attribut a des valeurs séparés par des espaces:

Exemple

[title~=hello] { color:blue; }

Essayez vous-même »

L'exemple ci-dessous styles tous les éléments avec un attribut lang qui contient une valeur spécifiée. Cela fonctionne même si l'attribut a trait d'union (-) valeurs séparées:

Exemple

[lang|=en] { color:blue; }

Essayez vous-même »

---

Formulaires coiffants

Les sélecteurs d'attribut sont particulièrement utiles pour le style des formes sans classe ou un 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;
}

Essayez vous-même »