Les sélecteurs d'attribut portent sur la présence ou la valeur d'un attribut
Pour ne sélectionner que les éléments dotés d'un attribut de nom donné on note :
Ainsi p[style] ne portera que sur les paragraphes enrichis d'un attribut style.
Il est possible d'imposer la présence de plusieurs attributs :
Pour ne sélectionner que les éléments dotés d'un attribut de nom donné ayant une certaine valeur on note :
nom_elt[nom_attribut="valeur"]
Ainsi img[alt="logo"] ne portera que sur les images enrichies d'un attribut "alt" ayant pour valeur "logo"
On peut imposer plusieurs contraintes simultannées sur les valeurs de plusieurs attributs distincts :
La valeur de certains attributs peut être composée de plusieurs termes séparés par un espace. Par exemple : <p class="exemple important"> ou <h1 title="La planete bleue">
Pour ne sélectionner que les éléments dotés d'un attribut de nom donné, comprenant, parmi ses multiples valeurs, une valeur fixée on note:
Ainsi p[class~="exemple"] et p[class~="important"] sélectionnent tous deux les paragraphes <p class="exemple important">
Notons que :
elt[classe~="nom_classe"] est équivalent à elt.nom_classe ( notation des classes)
et plus généralement
elt[classe~="classe1"][classe~="classe2"]... [classe~=" classeN"] équivalent à elt.nom_classe1.classe 2 ... .classeN
Remarque : bien que les notations ci-dessus soient équivalentes leurs priorités sont différentes selon les règles de la cascade.
La valeur de certains attributs peuvent être composés de plusieurs termes séparés par un tiret. C'est le cas pour l'attribut lang : <p lang="fr-ca">
Pour ne sélectionner que les éléments dotés d'un attribut dont le premier terme (avant le premier tiret) prend une valeur donnée on note :
Ainsi p[lang|="fr"] sélectionne le paragraphe <p lang="fr-ca"> ou <p lang="fr">
Notons que
elt[lang="nom_lang"] est équivalent à elt:lang(nom_lang) ( pseudo-classe :lang() )