Détails du sélecteur d'attribut CSS

CSS 2 a introduit les sélecteurs d'attribut.

Les sélecteurs d'attribut peuvent sélectionner des éléments en fonction des attributs et de leurs valeurs.

Sélecteur d'attribut simple

Si vous souhaitez sélectionner des éléments possédant un certain attribut, peu importe la valeur de cet attribut, vous pouvez utiliser le sélecteur d'attribut simple.

Exemple 1

Si vous souhaitez que tous les éléments contenant un titre (title) soient de couleur rouge, vous pouvez écrire :

*[title] {color:red;}

Essayez-le vous-même

Exemple 2

De manière similaire à celle ci-dessus, vous pouvez appliquer des styles uniquement aux éléments ancre (éléments a) possédant l'attribut href :

a[href] {color:red;}

Essayez-le vous-même

Exemple 3

Il est possible de faire des sélections basées sur plusieurs attributs, il suffit de lier les sélecteurs d'attributs ensemble.

Par exemple, pour设置为红色，可以这样写：a[href][title] {color:red;}

a[href][title] {color:red;}

Essayez-le vous-même

Exemple 4

Il est possible d'utiliser cette caractéristique de manière créative.

Par exemple, vous pouvez appliquer un style à toutes les images portant l'attribut alt pour les mettre en évidence :

img[alt] {border: 5px solid red;}

Essayez-le vous-même

Astuce :Ce cas particulier est plus approprié pour la diagnostique que pour la conception, c'est-à-dire pour déterminer si une image est effectivement valide.

Exemple 5 : Utilisation des sélecteurs d'attributs pour les documents XML

Les sélecteurs d'attributs sont très utiles dans les documents XML, car le langage XML recommande de spécifier les noms d'élément et d'attribut en fonction de l'utilisation des éléments et des attributs.

Supposons que nous ayons conçu un document XML pour décrire les planètes du système solaire. Si nous voulons choisir tous les éléments planet possédant l'attribut moons et les afficher en rouge pour attirer l'attention sur les planètes avec des lunes, nous pourrions écrire ainsi :

planet[moons] {color:red;}

Cela rendra le texte des deuxièmes et troisièmes éléments des balises suivantes en rouge, mais le texte du premier élément ne le sera pas :

<planet>Vénus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

Voyons l'effet

Sélection en fonction de la valeur de l'attribut spécifique

En plus de sélectionner les éléments possédant certains attributs, vous pouvez également restreindre davantage la portée de la sélection pour ne choisir que les éléments ayant des valeurs d'attributs spécifiques.

Exemple 1

Par exemple, supposons que vous souhaitiez rendre le lien hypertexte pointant vers un document spécifique sur le serveur Web en rouge, vous pourriez écrire ainsi :

a[href="http://www.codew3c.com/about_us.asp"] {color: red;}

Essayez-le vous-même

Exemple 2

De la même manière que pour les sélecteurs d'attributs simples, vous pouvez lier plusieurs sélecteurs d'attributs-valeurs pour sélectionner un document.

a[href="http://www.codew3c.com/"][title="W3School"] {color: red;}

Cela rendra le texte du premier lien hypertexte des balises suivantes en rouge, mais le deuxième ou le troisième lien ne sera pas affecté :

<a href="http://www.codew3c.com/" title="W3School">W3School</a>
<a href="http://www.codew3c.com/css/" title="CSS">CSS</a>
<a href="http://www.codew3c.com/html/" title="HTML">HTML</a>

Essayez-le vous-même

Exemple 3

De la même manière, le langage XML peut également utiliser cette méthode pour définir les styles.

Retournons maintenant à l'exemple des planètes. Supposons que vous ne vouliez sélectionner que les éléments planet dont l'attribut moons a la valeur 1 :

planet[moons="1"] {color: red;}

Le code suivant rendra le deuxième élément des balises suivantes rouge, mais le premier et le troisième éléments ne seront pas affectés :

<planet>Vénus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

Voyons l'effet

L'attribut et la valeur de l'attribut doivent correspondre parfaitement

Veuillez noter que ce format nécessite une correspondance complète avec la valeur de l'attribut.

Si la valeur de l'attribut contient une liste de valeurs séparées par des espaces, il peut y avoir des problèmes de correspondance.

Considérez l'extrait de balise suivant :

<p class="important warning">Ce paragraphe est une alerte très importante.</p>

Si vous écrivez p[class="important"], cette règle ne pourra pas correspondre aux balises d'exemple.

Pour sélectionner un élément spécifique en fonction de la valeur de l'attribut, vous devez l'écrire ainsi :

p[class="important warning"] {color: red;}

Essayez-le vous-même

Sélection basée sur la valeur partielle de l'attribut

Si vous devez sélectionner en fonction d'un mot spécifique dans une liste de mots de la valeur de l'attribut, vous devez utiliser le tilde (~).

Supposons que vous vouliez sélectionner des éléments qui contiennent important dans l'attribut class, vous pouvez le faire avec ce sélecteur :

p[class~="important"] {color: red;}

Essayez-le vous-même

Si vous négligez le tilde (~), cela signifie que vous devez effectuer une correspondance de valeur complète.

La différence entre le sélecteur d'attribut de valeur partielle et la notation de nom de classe avec point.

Ce sélecteur est équivalent à la notation de nom de classe avec point que nous avons discutée dans le sélecteur de classe.

C'est-à-dire, p.important et p[class="important"] sont équivalents lorsqu'ils s'appliquent à un document HTML.

Alors, pourquoi avoir un sélecteur d'attribut "~=" ? Parce qu'il peut être utilisé pour n'importe quel attribut, pas seulement pour la classe.

Par exemple, un document peut contenir un grand nombre d'images, mais seulement une partie d'entre elles sont des images. Pour cela, vous pouvez utiliser un sélecteur de partie basé sur l'attribut title du document pour sélectionner ces images :

img[title~="Figure"] {border: 1px solid gray;}

Cette règle sélectionnera toutes les images dont le texte title contient "Figure". Les images sans attribut title ou dont l'attribut title ne contient pas "Figure" ne correspondront pas.

Essayez-le vous-même

Sélecteur d'attribut de correspondance de sous-chaine

Nous vous présentons maintenant un module de sélecteur plus avancé, qui a été publié après la finalisation de CSS2. Il contient plus de parties de sélecteurs de valeurs d'attributs. Selon la norme, il devrait être appelé "sélecteur d'attribut de correspondance de sous-chaine".

De nombreux navigateurs modernes prennent en charge ces sélecteurs, y compris IE7.

Le tableau suivant est une simple synthèse de ces sélecteurs :

Type Description
[abc^="def"] Sélectionnez tous les éléments pour lesquels la valeur de l'attribut abc commence par "def".
[abc$="def"] Sélectionnez tous les éléments pour lesquels la valeur de l'attribut abc se termine par "def".
[abc*="def"] Sélectionnez tous les éléments pour lesquels la valeur de l'attribut abc contient la sous-chaine "def".

On peut penser que ces sélecteurs ont de nombreuses applications.

Par exemple, si vous souhaitez appliquer un style à tous les liens pointant vers CodeW3C.com, vous n'avez pas besoin de spécifier une classe pour tous ces liens et d'écrire une règle de style en fonction de cette classe. Vous devez écrire la règle suivante :

a[href*="codew3c.com"] {color: red;}

Essayez-le vous-même

Astuce :N'importe quel attribut peut utiliser ces sélecteurs.

Type de sélecteur spécifique

Nous vous présentons maintenant un sélecteur d'attribut spécifique. Regardez l'exemple suivant :

*[lang|="en"] {color: red;}

Cette règle sélectionnera tous les éléments avec l'attribut lang égal à en ou commençant par en-. Par conséquent, les trois premiers éléments du balisage d'exemple suivant seront sélectionnés, mais les deux derniers éléments ne le seront pas :

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-<p lang="au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

Essayez-le vous-même

En règle générale, [att|="val"] peut être utilisé pour n'importe quel attribut et sa valeur.

Supposons qu'un document HTML contienne une série d'images, où chaque nom de fichier d'image est de la forme figure-1.jpg et figure-2.jpgVous pouvez utiliser les sélecteurs suivants pour correspondre à toutes ces images :

img[src|="figure"] {border: 1px solid gray;}

Essayez-le vous-même

Bien sûr, l'utilisation la plus courante de cet sélecteur d'attribut est de correspondre aux valeurs de langue.

Manuel de référence des sélecteurs CSS

Sélecteur Description
[attribute] Utilisé pour sélectionner les éléments qui ont une valeur d'attribut spécifiée.
[attribute=value] Utilisé pour sélectionner les éléments qui ont une valeur d'attribut spécifiée et de valeur.
[attribute~=value] Utilisé pour sélectionner les éléments qui contiennent le terme spécifié dans la valeur de l'attribut.
[attribute|=value] Utilisé pour sélectionner les éléments qui ont une valeur d'attribut commençant par la valeur spécifiée, cette valeur doit être un mot entier.
[attribute^=value] Correspond à chaque élément dont la valeur de l'attribut commence par la valeur spécifiée.
[attribute$=value] Correspond à chaque élément dont la valeur de l'attribut se termine par la valeur spécifiée.
[attribute*=value] Correspond à chaque élément dont la valeur de l'attribut contient la valeur spécifiée.