Auteur: Jérôme Forget. Publié le 6 mars 2007.
Avec CSS2, on peut spécifier des règles qui s'applique aux attributs définis dans le document source. Ce sélecteur est similaire au sélecteur de classes ou d'identifiants : il permet de sélectionner un élément en fonction de la valeur d'un attribut. Le sélecteur d'attribut va plus loin en permettant de sélectionner un élément peu importe son attribut.
Par exemple, ce sélecteur va appliquer une couleur rouge à tous les éléments h1 qui ont un attribut class, quelle que soit sa valeur :
h1[class] { color: red; }
On peut dès maintenant imaginer plusieurs applications créatives de ce sélecteur. Par exemple, nous pourrions sélectionner toutes les images avec un attribut alt, nous permettant ainsi de distinguer les balises bien formées:
img[alt] { border: 1px solid red; }
Nous pourrions également sélectionner tous les éléments possédant un attribut title, ou encore tous les éléments a avec un attribut href :
*[title] { font-weight: bold; }
a[href] { font-weight: bold; }
Plus encore, ce sélecteur nous permet d'appliquer des styles en fonction de la valeur d'un attribut. Par exemple, cette règle sélectionne tous les liens hypertextes pointant vers une adresse particulière :
a[href="http://www.cgmatane.qc.ca"] { font-weight: bold; }
Notez la présence du symbole = et des guillemets pour saisir la valeur exacte de l'attribut.
Autre application intéressante, ce sélecteur permet la sélection d'un attribut particulier. Celui-ci s'explique bien par un exemple :
*[lang|="en"] { color: white; }
Dans cet exemple, la règle va appliuqer une couleur blanche à tous les éléments dont l'attribut lang est égal ou commence par "en". Ceci va s'appliquer à toutes ces valeurs d'attributs :
lang="en" lang="en-us"
lang="en-uk" lang="en-au"