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.

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.

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.

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

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 .

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.

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.

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.