Les sélecteurs CSS d’attributs

Télécharger le PDF du cours


Livret PDF du cours
L’une des grandes forces du CSS réside dans le fait qu’on va pouvoir cibler très précisément tel ou tel élément HTML grâce à la grande variété de ses sélecteurs.

Cette partie est dédiée à l’étude de trois types de sélecteurs que nous n’avons pas encore étudiés : les sélecteurs d’attributs, les pseudo-classes et les pseudo-éléments.

Dans cette leçon, nous allons déjà apprendre à manipuler les sélecteurs d’attributs qui vont nous permettre de sélectionner un élément HTML selon qu’il possède un attribut avec une certaine valeur ou pas.

 

Sélectionner un élément selon qu’il possède un attribut

Pour commencer, nous allons en CSS pouvoir cibler un élément HTML selon qu’il possède un certain attribut comme un attribut href, src, target, class, etc.

Pour faire cela, nous allons utiliser la syntaxe suivante : E[foo] où « E » représente un nom d’élément et « foo » représente un nom d’attribut.

Par exemple, on va pouvoir cibler tous les éléments a qui possèdent un attribut target en écrivant a[target] ou encore tous les éléments p qui possèdent un attribut class avec p[class].

Support HTML pour exemple d'utilisation de sélecteurs CSS d'attributs

Exemple d'utilisation de sélecteurs CSS d'attributs

On peut sélectionner notre contenu HTML avec précision grâce aux sélecteurs CSS d'attributs

See the Pen Cours HTML CSS 10.1.1 by Pierre (@pierregiraud) on CodePen.

 

Sélectionner un élément selon qu’il possède un attribut avec une valeur exactement

Nous allons également pouvoir sélectionner de façon plus précise les éléments HTML possédant un attribut auquel on a attribué une valeur en particulier en CSS. Par exemple, nous allons pouvoir sélectionner tous les éléments a possédant un attribut rel avec une valeur exactement égale à nofollow en utilisant la syntaxe a[rel="nofollow"].

Support HTML pour exemple d'utilisation de sélecteurs CSS d'attributs

Utilisation sélecteur CSS d'attribut avec valeur exacte

On peut sélectionner un élément avec un attribut et une valeur exacte en CSS

See the Pen Cours HTML CSS 10.1.2 by Pierre (@pierregiraud) on CodePen.

Note : l’attribut rel sert à indiquer la relation entre le document de départ et le document lié. Ici, la valeur nofollow permet d’indiquer aux robots des moteurs de recherche qu’il n’est pas nécessaire de suivre le lien. Cet attribut est souvent utilisé à des fins d’optimisation du référencement.

 

Sélectionner un élément selon qu’il possède un attribut contenant une sous-valeur distincte (séparée du reste par un espace)

Nous allons encore pouvoir sélectionner en CSS un élément HTML possédant un attribut qui contient une certaine sous-valeur distincte des autres, c’est-à-dire séparée des autres par une espace.

Ici, je parle de « sous-valeur » pour désigner une partie de la valeur d’un attribut, c’est-à-dire pour désigner un ou plusieurs caractères inclus dans la valeur passée à l’attribut.

Par exemple, on va pouvoir cibler tous les éléments img d’une page dont l’attribut alt contient le texte « soleil » grâce à la syntaxe suivante : img[alt~="soleil"].

Support HTML pour exemple d'utilisation de sélecteurs CSS d'attributs

Utilisation sélecteur CSS d'attribut avec valeur séparée parmi d'autres

On sélectionne en CSS un élément qui possède un attribut avec une valeur séparée

See the Pen Cours HTML CSS 10.1.3 by Pierre (@pierregiraud) on CodePen.

 

Sélectionner un élément selon qu’il possède un attribut commençant par une certaine sous-valeur

Pour sélectionner un élément E selon qu’il possède un attribut foo commençant par la sous valeur val, nous utiliserons la syntaxe suivante : E[foo^=val].

En utilisant ce sélecteur, on n’impose pas plus de contrainte sur la sous-valeur val. Celle-ci peut donc faire partie d’un mot plus grand par exemple.

On va également pouvoir utiliser le sélecteur E[foo|=val] dans le cas où l’on souhaite cibler un élément possédant un attribut foo dont la valeur est exactement val ou commence par val suivi d’un tiret - (hyphen) en anglais).

Support HTML pour exemple d'utilisation de sélecteurs CSS d'attributs

On peut sélectionner en CSS un élément avec un attribut qui commence par une valeur

On sélectionne un élément HTML en CSS possédant un attribut qui commence par une valeur

See the Pen Cours HTML CSS 10.1.4 by Pierre (@pierregiraud) on CodePen.

 

Sélectionner un élément selon qu’il possède un attribut se finissant par une certaine sous-valeur

Nous allons encore pouvoir en CSS cibler des éléments HTML possédant un attribut dont la valeur se termine par une certaine valeur, sans plus de restriction que cela.

Nous allons ainsi par exemple pouvoir cibler tous nos éléments a possédant un attribut href dont la valeur se termine par « .com » avec la syntaxe suivante : a[href$=".com"].

Support HTML pour exemple d'utilisation de sélecteurs CSS d'attributs

On peut sélectionner en CSS un élément avec un attribut qui se finit par une valeur

On sélectionne un élément HTML en CSS possédant un attribut qui se termine par une valeur

See the Pen Cours HTML CSS 10.1.5 by Pierre (@pierregiraud) on CodePen.

 

Sélectionner un élément selon qu’il possède un attribut possédant une valeur parmi d’autres

Finalement, on va pouvoir cibler en CSS un élément HTML qui possède un attribut contenant lui-même une certaine sous-valeur sans aucune restriction en utilisant la syntaxe E[foo*="val"] (où E représente un élément, foo représente un attribut et val une sous-valeur.

Support HTML pour exemple d'utilisation de sélecteurs CSS d'attributs

On sélectionne les éléments HTML qui possèdent un attribut avec une certaine valeur en CSS

On peut appliquer des styles en CSS aux éléments HTML qui possèdent un attribut avec une valeur

See the Pen Cours HTML CSS 10.1.6 by Pierre (@pierregiraud) on CodePen.

 

Rendre ses sélecteurs d’attributs insensibles à la casse

Par défaut, les sélecteurs d’attributs vont être sensibles à la casse c’est-à-dire faire la différence entre un caractère en majuscule et en minuscule. Ainsi, les valeurs « un », « UN », « Un » et « uN » vont être considérées comme différentes.

On va pouvoir changer ce comportement et rendre nos sélecteurs insensibles à la casse en ajoutant la lettre i (I minuscule) à la fin de nos sélecteurs d’attributs.

Support HTML pour exemple d'utilisation de sélecteurs CSS d'attributs

On ajoute une option i en CSS pour rendre les sélecteurs d'attribut insensibles à la casse

On peut rendre les sélecteurs CSS d'attributs insensibles à la casse

See the Pen Cours HTML CSS 10.1.7 by Pierre (@pierregiraud) on CodePen.

Attention cependant : cette notation est récente est n’est à l’heure actuelle par encore une recommandation et n’est pas supportée par les navigateurs Edge ni d’Internet Explorer.

 

Tableau récapitulatif des différents sélecteurs d’attributs

Vous pourrez retrouver ci-dessous les différents sélecteurs d’attributs avec leur définition et la version CSS où ils ont été passés en recommandation.

Sélecteur Description Recommandation CSS
E[foo] Sélectionne tout élément E possédant un attribut foo CSS2
E[foo="bar"] Sélectionne tout élément E possédant un attribut foo dont la valeur est exactement « bar » CSS2
E[foo~="bar"] Sélectionne tout élément E possédant un attribut foo dont la valeur contient distinctement « bar » (c’est-à-dire dont la valeur contient le mot « bar » séparé du reste par des espaces) CSS2
E[foo|="en"] Sélectionne tout élément E possédant un attribut foo dont la valeur commence par « en » séparé du reste par un tiret (ou hyphen en anglais) CSS2
E[foo^="bar"] Sélectionne tout élément E possédant un attribut foo dont la valeur commence exactement par « bar » CSS3
E[foo$="bar"] Sélectionne tout élément E possédant un attribut foo dont la valeur se termine exactement par « bar » CSS3
E[foo*="bar"] Sélectionne tout élément E possédant un attribut foo dont la valeur contient la valeur « bar » CSS3
E[foo{~|^$*}="bar" i] L’ajout d’un i à la fin des sélecteurs précédents rend la sélection « case insensitive » c’est-à-dire « insensible à la casse ». La valeur recherchée ne tiendra pas compte de la casse, c’est-à-dire de l’utilisation de majuscules et de minuscules. 4

Laisser un commentaire

© Pierre Giraud - Toute reproduction interdite - Mentions légales