Les sélecteurs d'attibuts sont des sélecteurs simples qui peuvent être utilisés tel que, sans être reliés à un élément particulier (voir Remarques en fin de page).

Toutefois, dans 99.99% des cas, les sélecteurs d'attribut sont utilisées avec un sélecteur principal et fonctionnent comme une spécialisation de ce sélecteur : le moteur CSS va d'abord cibler tous les éléments qui répondent au sélecteur principal, puis parmi ce groupe sélectionner uniquement ceux dont les attributs correspondent à une certaine valeur.

La syntaxe utilisée pour les sélecteurs d'attribut repose sur un selecteur suivi d'une paire de crochets, `[` et `]`, qui entourent un nom d'attribut généralement suivi d'un opérateur et d'une valeur.

syntaxe sélecteur d'attribut

Le crochet ouvrant `[` DOIT être collé au sélecteur.

A l'intérieur des crochets, les membres peuvent être séparés par des espaces.

La valeur peut ou pas être entourées par des guillements (simples ou doubles).

Je vous conseille de ne jamais mettre d'espaces entres les membres et de toujours entourer les valeurs avec des guillemets.

Il y a de moins en moins d'attributs dans les éléments HTML et on utilise les sélecteur d'attributs principalement avec 2 éléments : input et a.

L'élément input est un veritable couteau suisse totalement incontournable dès que l'on construit un formulaire.
Cet élément, à travers son attribut `type`, permet de créer un grand nombre de zones de saisie différentes (voir le tutoriel HTML).
Les sélecteurs d'attribut dans ce cas vont nous permettre des mises en forme différentes suivant la valeur de cet attribut `type` qui définit si la zone est une zone de texte, une case à cocher, un bouton radio, une zone email, un bouton de soumission, etc.
On pourra aussi travailler avec l'attribut `name` pour par exemple styler différemment des boutons.

L'élément a offre quant à lui 2 attributs sur lesquels faire porter les sélecteurs d'attribut.
L'attribut `href` qui contient l'URL sur laquelle pointe le lien offre avec sa valeur une cible pour les sélecteurs d'attribut "commence par", "finit par" ou "contient".
L'attribut `target` permet lui aussi l'utilisation de ces sélecteurs pour par exemple mettre en forme différemment les liens qui s'ouvrent dans un nouvel onglet.

Dans une moindre mesure, l'élément img avec ses attributs `src` et éventuellement `alt` pourra lui aussi faire l'objet d'une sélection avec les sélecteurs d'attribut.

### Présence d'un attribut

Syntaxe `[att]`

    a[target] {
    	border: 1px solid;
    	color: green;
    }

Ce sélecteur d'attribut sélectionne tous les éléments qui ont un attribut `att` définit dans leur tag d'ouverture. La valeur de l'attribut n'a pas d'importance, seule compte sa présence.

L'exemple suivant sélectionne tous les éléments a qui ont un attribut `target` et ajoute l'icone après le lien pour signaler que le lien ouvre dans un nouvel onglet.

Exemple : sélecteur d'attribut présent
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>L'Hagard des Etoiles</h3> <img src="../exemples/img/darkv2.png" align="left"> <p><a href="luke.html" target="new">Luke</a>, on a été racheté par <a href="http://disney.com"> Disney</a>.</p> <p>Rejoint nous, et ensemble nous régnerons sur <a href="http://www.disneylandparis.com/" target="new">Disneyland Paris</a>. </p> </body> </html>
Fichier CSS : styles.css
/* Sélection des élément a avec un attribut target */ a[target] { background: url(onglet.png) no-repeat right center; padding-right: 20px; }

### Valeur égale

Syntaxe `[att="val"]`

    input[type="text"] {
    	border: 1px solid;
    	background: grey;
    }

Ce sélecteur d'attribut sélectionne tous les éléments qui ont un attribut `att` dont la valeur est strictement égale à `val`.

Si `val` est une chaîne vide, le sélecteur ne sera pas pris en compte.

Dans l'exemple suivant on sélectionne tous les éléments input qui ont un attribut `type` dont la valeur est `text` pour en définir la longueur, la couleur de fond et la bordure.
On sélectionne aussi le bouton (input dont le `type` est `submit`) avec son attribut `name`

Exemple : sélecteur d'attribut "égale à"
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>Pénétrage dans l'Etoile Noire</h3> <label for="zDroid">dro-ID</label> <input type="text" id="zDroid" name="txtDroid"> <label for="zPasse">Mot de passe</label> <input type="password" id="zPasse" name="txtPasse"> <label><input type="checkbox" id="zCnx" name="chkCnx"> Restez connecté</label> <label for="zMsg">Message</label> <input type="text" id="zMsg" name="txtMsg"><br> <input type="submit" value="Entrage" name="btnOk"> </body> </html>
Fichier CSS : styles.css
/* Sélection des éléments input dont le 'type' est 'text' */ input[type="text"] { background: red; border: 2px solid lightyellow; width: 250px; } /* Sélection de l'élément input dont le 'name' est 'btnOk' */ input[name="btnOk"] { color: red; font-weight: bold; margin-top: 2em; } /* Décoration sans importance pour l'exemple */ label {display: block; margin-top: 1em; width: 150px;} body {background: #43515B; color: lightyellow;}

### Commence par

Syntaxe `[att^="val"]`

    input[name^="btn"] {
    	border: 1px solid;
    	border-radius: 10px;
    	width: 80px;
    }

Ce sélecteur d'attribut sélectionne tous les éléments qui ont un attribut `att` dont la valeur commence strictement par `val`.

Si `val` est une chaîne vide, le sélecteur ne sera pas pris en compte.

Dans l'exemple suivant on sélectionne tous les éléments a dont l'attribut `href` contient une URL qui commence par `http://`. Pour indiquer que ce lien pointe sur une page qui n'est pas dans notre site, on y ajoute l'icône .

Exemple : sélecteur d'attribut qui commence par
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>L'Hagard des Etoiles</h3> <img src="../exemples/img/darkv2.png" align="left"> <p><a href="luke.html" target="new">Luke</a>, on a été racheté par <a href="http://disney.com"> Disney</a>.</p> <p>Rejoint nous, et ensemble nous régnerons sur <a href="http://www.disneylandparis.com/" target="new">Disneyland Paris</a>. </p> </body> </html>
Fichier CSS : styles.css
/* Sélection des élément a avec un attribut href="http:// */ a[href^="http://"] { background: url(globe.png) no-repeat right center; padding-right: 20px; }

### Finit par

Syntaxe `[att$="val"]`

    img[src$=".jpg"] {
    	border: 1px solid;
    }

Ce sélecteur d'attribut sélectionne tous les éléments qui ont un attribut `att` dont la valeur finit strictement par `val`.

Si `val` est une chaîne vide, le sélecteur ne sera pas pris en compte.

Dans l'exemple suivant on ajoute une icône après les liens, en fonction du type de fichier sur lequel pointe le lien.

Exemple : sélecteur d'attribut qui finit par
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>Ressources disponibles</h3> <ul> <li><a href="sabre.pdf">Sabre laser</a></li> <li><a href="X-wing.jpg">X-wing</a></li> <li><a href="Y-wing.jpg">Y-wing</a></li> <li><a href="etoile.zip">Etoile noire</a></li> </ul> </body> </html>
Fichier CSS : styles.css
/* Sélection des élément a avec une url finissant par .pdf, .jpg ou .zip */ a[href$=".pdf"] { background: url(pdf.png) no-repeat right bottom; } a[href$=".jpg"] { background: url(jpg.png) no-repeat right bottom; } a[href$=".zip"] { background: url(zip.png) no-repeat right bottom; } /* Pour les icônes aient la place pour s'afficher */ li { font-size: 16px; line-height: 40px; } a { padding: 13px 36px 0 0; }

### Contient

Syntaxe `[att*="val"]`

    a[title*="menu"] {
    	background: grey;
    }

Ce sélecteur d'attribut sélectionne tous les éléments qui ont un attribut `att` dont la valeur contient `val` (au debut, au milieu, à la fin, une ou plusieurs fois).

Si `val` est une chaîne vide, le sélecteur ne sera pas pris en compte.

Dans l'exemple suivant les images qui contiennent "wing" dans leur attribut `alt` sont entourées en rouge.

Exemple : sélecteur d'attribut qui contient une valeur
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>Ressources disponibles</h3> <h4>Véhicules sans permis entourés en rouge </h4> <p><img src="../exemples/img/a_wing.png"><br>A-wing</p> <p><img src="../exemples/img/intercepteur_jedi.png"><br>Jedi Interceptor</p> <p><img src="../exemples/img/x_wing.png"><br>X-wing</p> <p><img src="../exemples/img/naboo_starfighter.png"><br>Naboo Starfighter</p> <p><img src="../exemples/img/droid_gunship.png"><br>Droid Gunship</p> </body> </html>
Fichier CSS : styles.css
/* Sélection des élément img dont l'attribut 'src' contient 'wing' */ img[src*="wing"] { padding: 5px; border: 3px dotted red; } /* Pour mettre les paragraphes côte à côte */ p { float: left; margin: 0.5em; } /* Pour l'ambiance */ body { background: url(../exemples/img/etoiles.jpg); color: lightyellow; }

### Remarques

Les sélecteur d'attribut sont des sélecteurs simples car ils peuvent être utilisés seuls.

Dans l'exemple suivant tous les éléments, quelque soit leur type, qui ont un attribut `title` sont entourés en rouge.

Exemple : sélecteur simple d'attribut
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>L'Hagard des Etoiles</h3> <img src="../exemples/img/darkv2.png" align="left" title="Dark Vador est un gros mickey"> <p><a href="luke.html" title="Page de Luke Skywalker"> Luke</a>, on a été racheté par <a href="http://disney.com">Disney</a>.</p> <p title="2eme phrase">Rejoint nous, et ensemble nous régnerons sur <a title="Disney Land en France" href="http://www.disneylandparis.com/">Disneyland Paris</a>. </p> </body> </html>
Fichier CSS : styles.css
/* Sélection de n'importe quel élément qui a un attribut title */ [title] { border: 1px solid red; }

On peut appliquer plusieurs sélecteurs d'attribut à un même élément en les enchaînant comme dans l'exemple suivant qui sélectionne tous les éléments a qui ont un attribut `href` commençant par `http://` ET un attribut `target` égale à `_blank`.

Exemple : sélecteur d'attribut qui commence par
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>L'Hagard des Etoiles</h3> <img src="../exemples/img/darkv2.png" align="left"> <p><a href="luke.html" target="new">Luke</a>, on a été racheté par <a href="http://disney.com"> Disney</a>.</p> <p>Rejoint nous, et ensemble nous régnerons sur <a href="http://www.disneylandparis.com/" target="_blank">Disneyland Paris</a>. </p> </body> </html>
Fichier CSS : styles.css
/* Sélection des élément a avec un attribut href="http:// */ a[href^="http://"][target="_blank"] { color: red; font-weight: bold; }