Sélecteurs CSS 2.1, partie 1publié le 25/09/2005 par Roger Johansson, traduit le 08/09/2009

Cet article est une traduction de CSS 2.1 selectors, Part 1, écrit par Roger Johansson pour son blog 456 Berea Street.

Une des premières choses à comprendre lorsque l'on commence à étudier les CSS sont les sélecteurs. Il s'agit évidemment d'une partie fondamentale des CSS, mais peu de développeurs les utilisent à leur plein potentiel. Même si beaucoup peut être fait avec les seuls sélecteurs de type, d'ID et de classes, il en existe bien d'autres.

Apprendre à utiliser correctement l'ensemble des sélecteurs offerts par CSS 2.1 peut vraiment vous aider à garder votre HTML simple et concis. Cela vous permettra d'éviter d'avoir recours à des attributs class non nécessaires, ou d'ajouter des div et span supplémentaires dans votre code. Pas mal, non ?

Alors pourquoi tous ces sélecteurs ne sont-ils pas plus utilisés ? La raison principale est qu'Internet Explorer n'en propose qu'un support incomplet et ce jusqu'à sa version 6. Tous les autres navigateurs récents supportent la majorité ou tous les sélecteurs CSS 2.1. Gardez donc bien cela à l'esprit avant d'utiliser tout ce qui est décrit dans cette série.

La bonne nouvelle est qu'Internet Explorer 7 aura un bien meilleur support des sélecteurs. Sachant que vous aurez la possibilité de les utiliser dans le futur, il est bon d'étudier dès maintenant l'ensemble des sélecteurs disponibles.

Vu qu'il existe de nombreux sélecteurs, un seul article les présentant tous serait trop long. Pour que l'ensemble soit plus facile à appréhender, il y aura trois parties :

• la partie 1 (cette page), explique les bases ainsi que les sélecteurs universel, de type, d'ID, et de classe,
• la partie 2 traite des combinateurs, des sélecteurs combinés, du regroupement et des sélecteurs d'attributs,
• la partie 3 examine les pseudo-classes et pseudo-éléments.

Je posterai la fin de cet article durant les prochaines semaines et le mettrai à jour avec des liens vers les autres parties quand elles seront publiées.

Et maintenant, allons-y !

Les bases

Commençons par les bases. Un sélecteur CSS est constitué d'un motif qui est testé contre tous les éléments de l'arbre du document. Quand toutes les conditions de test sont vraies, les déclarations présentes dans la règle concernée sont appliquées à l'élément ou aux éléments correspondants. Considérez cette règle CSS très simple :

p {color:#F00;}

Le sélecteur est la partie d'une règle CSS qui vient avant l'accolade d'ouverture "{". Il s'agit ici de p, qui correspondra à tous les éléments p du document et les fera apparaître en rouge.

Vue d'ensemble des sélecteurs

Ok, c'était un exemple vraiment très simple. Je décrirai tous les sélecteurs plus tard, et les choses vont certainement se compliquer. Mais avant cela, voici une vue d'ensemble de la syntaxe de tous les sélecteurs CSS 2.1 (basée sur le tableau CSS 2.1, 5.1 La reconnaissance d'un motif) :

Vue d'ensemble de la syntaxe des sélecteurs CSS 2.1

Type de sélecteur	Motif	Description
Universel	*	Correspond à tout élément.
Type	E	Correspond à tout élément E.
Classe	.info	Correspond à tout élément dont l'attribut class contient la valeur info.[a]
ID	#footer	Correspond à tout élément dont l'attribut id est égal à footer.
Descendant	E F	Correspond à tout élément F qui est un descendant d'un élément E.
Enfant	E > F	Correspond à tout élément F qui est un enfant d'un élément E.
Adjacent	E + F	Correspond à tout élément F immédiatement précédé par un élément E.
Attribut	E[att]	Correspond à tout élément E qui possède un attribut att, quelles qu'en soient les valeurs.
Attribut	E[att=val]	Correspond à tout élément E dont l'attribut att a exactement la valeur val.
Attribut	E[att~=val]	Correspond à tout élément E dont l'attribut att contient une liste de valeurs séparées par des espaces et dont l'une d'elles est val.
Attribut	E[att|=val]	Correspond à tout élément E dont l'attribut att contient une liste de valeurs séparées par des tirets débutant par val.
Pseudo-classe :first-child	E:first-child	Correspond à tout élément E qui est le premier enfant de son parent.
Pseudo-classes pour les liens	E:link E:visited	Correspond à tout élément E étant un lien non visité (:link) ou déjà visité (:visited).
Pseudo-classes dynamiques	E:hover E:focus E:active	Correspond à tout élément E durant certaines actions de l'utilisateur.
Pseudo-classe :langue	E:lang(c)	Correspond à tout élément E qui est dans la langue c.
Pseudo-élément :first-line	E:first-line	Correspond au contenu de la première ligne formatée de tout élément E.
Pseudo-élément :first-letter	E:first-letter	Correspond à la première lettre de tout élément E.
Pseudo-éléments :before et :after	E:before E:after	Pour insérer du contenu généré avant et après tout élément E.

J'expliquerai chacun de ces types de sélecteurs au cours des différentes parties de cet article, alors continuez votre lecture ! Mais quelques termes utilisés dans le tableau précédent méritent peut-être une explication^[b] :

descendant

Un élément qui est l'enfant, le petit enfant ou plus éloigné encore d'un élément dans l'arbre du document.

ancêtre

Un élément qui est le parent, le grand parent ou plus éloigné encore d'un élément dans l'arbre du document.^[c]

enfant

Le descendant direct d'un élément. Aucun autre élément ne peut s'intercaler entre les deux dans l'arbre du document.

parent

L'ancêtre direct d'un élément. Aucun autre élément ne peut s'intercaler entre les deux dans l'arbre du document.

Sélecteurs simples et combinés

Il existe deux catégories basiques de sélecteurs : simple et combinée.

Un sélecteur simple est soit un sélecteur de type, soit un sélecteur universel immédiatement suivi par zéro ou plusieurs sélecteurs d'attribut, d'ID, ou pseudo-classes. La règle suivante donne un exemple d'un sélecteur simple :

p.info {background:#FF0;}

Un sélecteur combiné (parfois appelé sélecteur contextuel^[d]) consiste en deux ou plusieurs sélecteurs simples séparés par des combinateurs. Voici un exemple très simple d'un sélecteur combiné :

div p {font-weight:bold;}

La règle ci-dessus s'appliquera à tous les éléments p qui sont des descandants d'un élément div.

Un pseudo-élément peut être attaché à un sélecteur simple. Dans un sélecteur combiné, un pseudo-élément ne peut être attaché qu'au dernier sélecteur simple.

Vous trouverez des détails sur les sélecteurs combinés, les combinateurs et les pseudo-éléments dans les parties 2 et 3 de cet article.

Le sélecteur universel

Le sélecteur universel est représenté par un astérisque "*" et correspond à tous les éléments du document.^[e] Il est assez rare de le voir directement dans une feuille de style, mais ce sélecteur est en fait souvent utilisé implicitement. Ainsi, si le sélecteur universel n'est pas le seul composant d'un sélecteur simple, il peut être omis :

• .myclass est équivalent à *.myclass
• #myid est équivalent à *#myid

Une utilisation du sélecteur universel qui est devenue assez populaire consiste à remettre à zéro les propriétés margin et padding de tous les éléments :

* {margin:0; padding:0;}

Cette technique est parfois appélée le "Global White Space Reset".

Sélecteurs de type

Un sélecteur de type correspond à chaque occurence d'un type d'élément particulier dans le document. La règle suivante s'applique à tous les éléments paragraphe du document et leur donne une taille de caractère de 2em :

p {font-size:2em;}

Le sélecteur de classe

Le sélecteur de classe est représenté par un point ".", et cible les éléments en fonction de la valeur de leur attribut class. La règle suivante s'appliquera à tous les éléments p ayant une classe "info" :

p.info {background:#FF0;}

Vous pouvez assigner des classes multiples à un élément (l'attribut class peut recevoir une liste de noms séparés par des espaces). Les sélecteurs de classe peuvent alors être utilisés pour cibler seulement des éléments possédant plusieurs noms de classe. La règle suivante s'appliquera ainsi à tous les éléments p qui ont à la fois une classe "info" et une classe "error" :

p.info.error {color:#900; font-weight:bold;}

Note : les sélecteurs de classes multiples ne sont pas implémentés dans les versions actuelles d'Internet Explorer, mais le seront dans IE7.

Le type d'élément ciblé n'a pas à être toujours spécifié. Cela revient à utiliser le sélecteur universel à la place d'un sélecteur de type. La règle suivante s'appliquera à tous les éléments ayant une classe "info", indépendamment de leurs types :

.info {background:#FF0;}

Le sélecteur d'ID

Le sélecteur d'ID est représenté par un caractère "#", et cible les éléments en fonction de la valeur de leur attribut id. La règle suivante s'appliquera à l'élément dont l'ID est "info", indépendamment de son type :

#info {background:#FF0;}

Si vous spécifiez également un type d'élément, la règle s'appliquera uniquement à un élément de ce type :

p#info {background:#FF0;}

Il est important de se rappeler que les sélecteurs d'ID ont une spécificité plus haute que les sélecteurs de classe^[f], et qu'une valeur d'ID doit être unique au sein d'un document.

A suivre…

Voilà pour la première partie de cet article. Dans la deuxième, je vous montrerai les combinateurs, les sélecteurs combinés, le regroupement, les sélecteurs d'attribut, et dans la dernière partie, j'étudierai les pseudo-classes et pseudo-éléments.