Selecteurs d’attributs CSS 3 : Substring Matching & Attribute presence

Les sélecteurs d’attributs sont intéressants en CSS, utile pour pointer un élément sans recourir spécialement à des centaines de classes. Techniquement supporté à partir d’Internet Explorer 7, on verra cependant qu’il y aura quelques problèmes de compatibilités.

Comment ça marche ?

Tout d’abord, la sélection se fait entre crochets. Exemple d’un sélecteur tout bête : [href] ; ce sélecteur sélectionnera tous les attributs avec href. Si on veut être plus précis, on peut mettre a[href] qui sélectionnera tous les liens. Ça, c’est facile.

Dans la même lignée, voici d’autres sélecteurs :

  • [att=val] : L’opérateur = va sélectionner les attributs égaux à l’élément. Pas de surprise là.

Exemple :

input[type="submit"] {
...
}
  • [att~=val] : Si vous avez plusieurs classes sur un élément l‘opérateur ~= va pouvoir pointer un élément qui contient plusieurs éléments séparés par des espaces. Ça veut dire que si je reprends l’exemple ci-dessous avec <p class=”droite gauche haut bas”></p> ça marchera.

Exemple :

[class~="droite"] {
...
}
  • [att|=val] plus subtil, ce déclarateur va pouvoir pointer sur des éléments avec des mots immédiatement suivis d’un trait d’union (raccourcis U+002D). Conçu à la base pour l’attribut hreflang. Dans l’exemple ci-dessous, le déclarateur sélectionnera l’élément eng mais aussi l’element eng-GB, eng-US etc. 

Exemple :

[hreflang|="en"] {
...
}

Les sélecteurs d’attributs en CSS 3

Dans CSS3, trois sélecteurs intéressants sont ajoutés les : Substring Matching qui permettent de pointer un élément avec encore plus de précision. Théoriquement, ce sélecteur est supporté sur internet Explorer 7, mais il y a encore plusieurs bugs.

  • [att^=val] s’utilise pour pointer un élément qui commence par une valeur spécifique. Des images dans un dossier par exemple

Exemple :

img[src^="img/"] {
...
}

[att$=val] pour sélectionner un élément qui fini par. Exemple, toutes les images en JPG.

Exemple :

img[src$=".jpg"] {
...
}

[att*=val] permet de sélectionner un élément qui contient un attribut en particulier. Une image pointant sur un dossier spécifique. Exemple :

Exemple :

img[src*="/img/media/logo/"] {
...
}

Pour conclure, ces sélecteurs d’attributs sont intéressants, mais malheureusement peu usités, de plus, la version 3 des CSS nous aide vraiment à sélectionner des attributs avec plus de facilité. En observant les exemples ci-dessus on peut aller plus loin et éviter d’utiliser des classes à gogos sur plusieurs éléments redondants…

En définitive ces sélecteurs s’utiliseront en bon complément avec les anciens >, +, ~, :first-child…Compatible sur Internet Explorer 7 sans trop de problèmes, donc n’hésitez pas !

En bonus, quelques exercices sur les sélecteurs en CSS : http://milanlandaverde.com/css-quiz

Source:

http://www.w3.org/TR/selectors/#attribute-substrings
http://www.w3.org/TR/CSS2/selector.html

http://reference.sitepoint.com/css/attributeselector
http://reference.sitepoint.com/css/css3attributeselectors