Les sélecteurs en CSS

Les sélecteurs en CSS.

Le sélecteur indique à quoi se rapporte un ensemble de propriétés. Dans l'exemple ci-dessous la taille des caractères et le centrage du texte vont s'appliquer à toutes les balises td du document.

td {font-size:12pt; text-align:center;}

Principaux sélecteurs.

h1 Le nom d'une balise. Toutes les balises de ce nom contenues dans le document seront concernées.
h1,h2,h3 Plusieurs sélecteurs séparés par des virgules.
Toutes les balises énumérées sont concernées.
#logo Le caractère # indique un identifiant. La balise avec cet ID est concernée.
Exemple img id="logo" src="..."/.
.bidule Le point introduit une classe. Toutes les balises comportant un attribut class de ce nom sont concernées.
Exemple : p class="bidule"
:first-letter Le caractère : (deux points) introduit un pseudo-élément, c'est à dire un élément calculé suivant une règle. Ici il s'agira de la première lettre. Voir la liste complète des pseudo-éléments.
* Le caractère * (étoile) désigne toutes les balises du document.
Ce sélecteur est assez délicat à utiliser car il détruit tout le mécanisme d'héritage (les valeurs inherit, qui sont souvent les valeurs par défaut, sont toutes perdues).
table img Plusieurs sélecteurs séparés par un espace : inclusion.
Les balises img incluses dans un tableau sont concernées. Il peut exister des niveaux intermédiaires : ici il y aura probablement au moins des balises tr et td.
td > img Plusieurs sélecteurs séparés par un caractère supérieur : inclusion directe.
Les balises img incluses dans une cellule de tableau sont concernées. Il ne doit pas exister de niveaux intermédiaires.
p + img Plusieurs sélecteurs séparés par un signe + : vient après.
Désigne les balises img venant après une balise p.
p ~ img Plusieurs sélecteurs séparés par un signe ~ : vient avant.
Désigne les balises img venant avant une balise p.

Ces syntaxes sont cumulables. Voici quelques exemples :
p.edito Désigne les balises p class="edito".
p .edito Désigne les éléments comportant l'attribut class="edito" inclus dans une balise p. La seule différence avec la syntaxe précédente est l'espace.

Quelques remarques complémentaires :

Sélecteurs avec critère.

Les crochets introduisent un critère portant sur un attribut.

img[ width ] Désigne les balises img comportant un attribut alt quelle que soit la valeur de ce dernier. On teste donc seulement la présence de l'attribut.
p[ lang="fr" ] Ici on limite la portée aux balises p qui comportent l'attribut lang avec la valeur "fr".
p lang="fr"
a[ title ~= "lexique" ] Ici on limite la portée aux balises a qui comportent l'attribut title avec une valeur contenant le mot "lexique".
a[ title *= "lexique" ] Ici on limite la portée aux balises a qui comportent l'attribut title avec une valeur contenant la suite de caractères "lexique". Notez la différence avec la syntaxe précédente.
a[ href |= "https" ] Ici on limite la portée aux balises a qui comportent l'attribut href avec une valeur commençant par "https".
Autrement dit les liens avec un protocole crypté https.
a[ href $= "png" ] Ici on limite la portée aux balises a qui comportent l'attribut href avec une valeur se terminant par "png".
Autrement dit les liens vers des images png.

Sélecteurs particuliers.

@page Désigne la page imprimée. Peu de propriétés s'appliquent à ce sélecteur : margin, size, etc.
Il peut être utilisé avec les pseudo-éléments :left, :right ou :first.