5 Les sélecteurs

5.1 La reconnaissance d'un motif

En CSS, des règles de reconnaissance de motifs déterminent les règles de style qui s'appliquent aux éléments de l'arbre du document. Ces motifs, nommés sélecteurs, sont variés, allant du simple nom d'un élément jusqu'aux riches motifs contextuels. Quand toutes les conditions d'un motif sont vérifiées pour un élément donné, celui-ci est retenu par le sélecteur.

Dans un sélecteur, la sensibilité à la casse d'un nom d'élément du document dépend du langage utilisé pour le document. Par exemple, ceux-ci sont insensibles à la casse en HTML, par contre, ils le sont en XML.

Cette table résume la syntaxe du sélecteur de CSS2 :

5.2 La syntaxe des sélecteurs

Un sélecteur simple est soit un sélecteur de type, soit un sélecteur universel immédiatement suivi par un sélecteur d'attribut, un sélecteur d'ID ou une pseudo-classes, zéro ou plusieurs de ceux-ci, dans n'importe quel ordre. Le sélecteur simple a une correspondance si tous ses composants sont vérifiés.

Un sélecteur consiste en une succession d'un, ou plusieurs, sélecteurs simples, séparés par des combinateurs. Ces combinateurs sont : les blancs et les caractères ">" et "+". Des blancs peuvent être insérés entre un combinateur et ses sélecteurs simples.

Les éléments de l'arbre du document en correspondance avec un sélecteur sont appelés sujets de ce sélecteur. Un sélecteur consistant en un seul sélecteur simple est en correspondance avec tout élément qui satisfait à ses conditions. Quand on place un sélecteur simple avec son combinateur au début d'une succession d'autres sélecteurs, ceci entraîne un supplément de contraintes pour la correspondance. C'est pourquoi, les sujets d'un sélecteur forment toujours un sous-ensemble des éléments qui correspondent au sélecteur simple situé le plus à droite.

On peut accoler un pseudo-élément au dernier sélecteur d'une succession ; dans ce cas, l'information de style s'applique sur une partie de chacun des sujets.

5.2.1 Le regroupement

On peut regrouper plusieurs sélecteurs dans une liste, séparés par des virgules, quand ceux-ci partagent les mêmes déclarations.

H1 { font-family: sans-serif }
H2 { font-family: sans-serif }
H3 { font-family: sans-serif }

H1, H2, H3 { font-family: sans-serif }

CSS offre d'autres mécanismes "raccourcis" semblables, comme les déclarations multiples et les propriétés raccourcies.

5.3 Le sélecteur universel

Le sélecteur universel, noté "*", est vérifié pour le nom de n'importe quel type d'élément. Il agit sur chacun des éléments de l'arbre du document.

Si le sélecteur universel n'est pas le seul composant d'un sélecteur simple, on peut l'omettre. Par exemple :

• *[LANG=fr] et [LANG=fr] sont équivalents.
• *.warning et .warning sont équivalents.
• *#myid et #myid sont équivalents.

5.4 Les sélecteurs de type

Un sélecteur de type correspond au nom d'un type d'élément dans le langage du document. Il correspond à chaque instance de ce type d'élément dans l'arbre du document.

H1 { font-family: sans-serif }

5.5 Les sélecteurs descendants

Un auteur peut vouloir disposer d'un sélecteur pour atteindre un élément donné, celui-ci étant lui-même un descendant d'un autre élément de l'arbre du document (ex. "Toucher ces éléments EM qui sont dans un élément H1"). Les sélecteurs descendants sont l'expression de cette relation dans un motif. Ceux-ci se composent de deux sélecteurs, ou plus, séparés par un blanc. Un sélecteur descendant de la forme "A B" se vérifie quand un élément B est un descendant arbitraire d'un élément A, son ancêtre.

H1 { color: red }
EM { color: red }

<H1>Ce titre est <EM>très</EM> important</H1>

H1 { color: red }
EM { color: red }
H1 EM { color: blue }

<H1>Ce <SPAN class="myclass">titre 
est <EM>très</EM> important.</SPAN></H1>

DIV * P 

DIV P *[href]

5.6 Les sélecteurs d'enfant

Un sélecteur d'enfant se vérifie quand un élément est l'enfant d'un autre élément. Celui-ci se compose de deux sélecteurs, ou plus, séparés par le caractère ">".

BODY > P { line-height: 1.3 }

DIV OL>LI P

Pour des renseignements sur la façon de sélectionner le premier enfant d'un élément, voir le chapitre sur la pseudo-classe :first-child plus loin.

5.7 Les sélecteurs d'enfants adjacents

Les sélecteurs d'enfants adjacents suivent une syntaxe de cette forme : E1 + E2, où E2 est le sujet du sélecteur. Celui-ci est vérifié quand E1 et E2 ont le même parent dans l'arbre du document et quand E1 y précède immédiatement E2.

Selon le contexte, les éléments adjacents génèrent un formatage des objets dont la mise en forme est gérée automatiquement (ex. les marges verticales des boîtes adjacentes qui fusionnent). Avec le combinateur "+", les auteurs peuvent ajouter des styles aux éléments adjacents.

MATH + P { text-indent: 0 } 

H1 + H2 { margin-top: -5mm }   

H1.opener + H2 { margin-top: -5mm }   

5.8 Les sélecteurs d'attribut

Avec CSS2, on peut spécifier des règles qui s'applique aux attributs définis dans le document source.

5.8.1 La correspondance entre les attributs et leurs valeurs

Les sélecteurs d'attribut peuvent trouver une correspondance de quatre façons :

[att]

Quand un élément a un attribut "att", quelle que soit sa valeur ;

[att=val]

Quand un élément a un attribut "att" dont la valeur est exactement "val" ;

[att~=val]

Quand un élément avec un attribut "att" qui admet comme valeur une suite de valeurs séparées par des blancs, une des valeurs est exactement "val". Avec ce sélecteur, les valeurs de la liste ne doivent pas contenir de blancs (car ceux-ci font déjà office de séparateurs) ;

[att|=val]

Quand un élément avec un attribut "att" qui admet comme valeur une suite de valeurs séparées par des tirets, la première valeur est "val". La correspondance intervient toujours au début de la valeur de l'attribut. Ceci, principalement, pour permettre une correspondance sur les sous-codes des langues qui sont décrits dans RFC 1766 ([RFC1766]).

Les valeurs d'attribut doivent être des identifiants ou des chaînes. La sensibilité à la casse des noms et des valeurs d'attributs dans les sélecteurs dépendent du langage du document.

H1[title] { color: blue; }

SPAN[class=exemple] { color: blue; }

On peut utiliser plusieurs sélecteurs d'attribut qui se réfèrent à plusieurs attributs d'un élément, ou même, plusieurs fois au même attribut.

SPAN[bonjour="soleil"][adieu="nuages"] { color: blue; }

A[rel~="copyright"]
A[href="http://www.w3.org/"]

*[LANG=fr] { display : none }

*[LANG|="en"] { color : red }

DIALOGUE[character=romeo] 
     { voice-family: "Lawrence Olivier", charles, male }
      
DIALOGUE[character=juliet]  
     { voice-family: "Vivien Leigh", victoria, female }

5.8.2 Les valeurs par défaut des attributs dans les DTDs

La correspondance se fait sur les valeurs d'attributs dans l'arbre du document. Pour des langages de document autres que HTML, les valeurs par défaut des attributs peuvent être définies dans un DTD ou ailleurs. Les feuilles de style devraient être construites pour fonctionner même si les valeurs par défaut n'étaient pas inclues dans l'arbre du document.

<!ATTLIST EXEMPLE notation (decimal,octal) "decimal">

EXEMPLE[notation=decimal] { /*... paramètres par défaut des propriétés ...*/ }
EXEMPLE[notation=octal] { /*... autres paramètres ...*/ }

EXAMPLE { /*... paramètres par défaut de la propriété ...*/ }

5.8.3 Les sélecteurs de classe

Pour les feuilles de style employées avec HTML, les auteurs, visant l'attribut "class", peuvent utiliser la notation avec un point (.) en remplacement de celle avec "~=". Ainsi, "DIV.valeur" et "DIV[class~=valeur]" ont la même signification en HTML. La valeur de l'attribut doit suivre immédiatement le caractère ".".

*.pastoral { color: green }  /* tous les éléments avec class~=pastoral */

.pastoral { color: green }  /* tous les éléments avec class~=pastoral */

H1.pastoral { color: green }  /* les éléments H1 avec class~=pastoral */

<H1>Pas vert</H1>
<H1 class="pastoral">Vraiment vert</H1>

Pour une correspondance sur un sous-ensemble des valeurs de "class", chacune des valeurs doit être précédée par un ".", dans n'importe quel ordre.

 
P.pastoral.marine { color: green }

5.9 Les sélecteurs d'ID

Les langages de document peuvent contenir des attributs déclarés de type ID. Ceux-ci sont particuliers dans la mesure où il ne peut y avoir deux de ces attributs avec une même valeur ; quel que soit le langage du document, un attribut ID sert à identifier un élément unique. En HTML, les attributs ID sont représentés par "id" ; en XML, les applications peuvent utiliser d'autres noms pour ceux-ci, mais avec les mêmes restrictions.

Les auteurs peuvent utiliser l'attribut ID d'un langage donné pour identifier une instance d'un élément dans l'arbre du document. Un sélecteur d'ID de CSS correspond avec un tel élément au travers de l'identifiant qui lui est assigné. Ce sélecteur est formé du caractère "#" immédiatement suivi par la valeur de l'ID.

H1#chapitre1 { text-align: center }

<HEAD>
  <TITLE>Toucher P</TITLE>
  <STYLE type="text/css">
    *#z98y { letter-spacing: 0.3em }
  </STYLE>
</HEAD>
<BODY>
   <P id=z98y>Un texte élargi</P>
</BODY>

<HEAD>
  <TITLE>Touche seulement H1</TITLE>
  <STYLE type="text/css">
    H1#z98y { letter-spacing: 0.5em }
  </STYLE>
</HEAD>
<BODY>
   <P id=z98y>Un texte élargi</P>
</BODY>

Les sélecteurs d'ID sont plus spécifiques que les sélecteurs d'attribut. En HTML, par exemple, le sélecteur #p123 a plus de poids que le sélecteur [ID=p123], compte tenu de la cascade.

5.10 Les pseudo-éléments et les pseudo-classes

En CSS2, le style est habituellement lié à un élément selon sa position dans l'arbre du document. Ce modèle simple est suffisant la plupart du temps, mais du fait de la structure de cet arbre, n'est pas adapté dans certains contextes usuels de publication. Par exemple, en HTML 4.0 (voir [HTML40]), il n'existe pas d'éléments qui se réfèrent à la première ligne d'un paragraphe, et donc aucun sélecteur simple en CSS ne peut y correspondre.

C'est pourquoi CSS introduit les concepts de pseudo-éléments et de pseudo-classes ce qui permet une mise en forme à partir d'informations absentes de l'arbre du document.

• Les pseudo-éléments créent des abstractions dans l'arbre en plus des éléments déjà spécifiés par le langage du document. Ainsi, certains langages n'offrent pas de mécanismes de correspondance avec la première lettre ou la première ligne du contenu d'un élément. Les pseudo-éléments de CSS permettent aux auteurs d'y accéder, ce qui serait autrement impossible. Ces pseudo-éléments leur permettent de donner un style à un contenu qui n'apparaît même pas dans le document source. Par exemple, les pseudo-éléments :before et :after autorisent une action sur un contenu généré.
• Les pseudo-classes classent les éléments selon des caractéristiques autres que leur nom, attribut ou contenu, celles-ci ne pouvant pas en principe être déduites de l'arbre du document. Les pseudo-classes peuvent être dynamiques, dans le sens où un élément peut les acquérir ou les perdre pendant l'interaction de l'utilisateur avec le document. Une exception, la pseudo-classe ':first-child', qui peut se déduire de l'arbre. La pseudo-classe ':lang()' également dans certains cas.

Ni les pseudo-éléments, ni les pseudo-classes n'apparaissent dans la source ou l'arbre du document.

Les pseudo-classes sont autorisées n'importe où dans le sélecteur, alors qu'un pseudo-élément ne peut être spécifié qu'après le sujet du sélecteur.

Les pseudo-éléments et pseudo-classes sont insensibles à la casse.

Certaines pseudo-classes s'excluent mutuellement, d'autres peuvent s'appliquer simultanément au même élément. Les conflits éventuels se résolvent selon l'ordre normal de cascade.

Les agents utilisateurs conformes à HTML peuvent ignorer toutes les règles comportant dans leur sélecteurs les pseudo-éléments :first-line ou :first-letter, ou bien, peuvent alternativement ne supporter qu'une partie de leurs propriétés.

5.11 Les pseudo-classes

5.11.1 La pseudo-classe :first-child

La pseudo-classe :first-child correspond au premier élément enfant d'un autre élément.

DIV > P:first-child { text-indent: 0 }

<P> Le dernier P avant la note.
<DIV class="note">
   <P> Le premier P à l'intérieur de la note.
</DIV>

<P> Le dernier P avant la note.
<DIV class="note">
   <H2>Note</H2>
   <P> Le premier P à l'intérieur de la note.
</DIV>

P:first-child EM { font-weight : bold }

Noter que les boîtes anonymes n'apparaissent pas dans l'arbre du document, c'est pourquoi elles ne sont pas prises en compte au moment de la mise en forme du premier enfant.

<P>abc <EM>défaut</EM> 

Les deux sélecteurs suivants sont équivalents :

* > A:first-child   /* A est le premier enfant pour tout élément */
A:first-child       /* Idem */

5.11.2 Les pseudo-classes d'ancre : :link et :visited

En général, les agents utilisateurs représentent différemment les liens qui n'ont pas été visités de ceux qui l'ont déjà été. CSS en fournit un équivalent au travers des pseudo-classes ':link' et ':visited'.

• La pseudo-classe :link s'applique aux liens qui n'ont pas été visités ;
• La pseudo-classe :visited s'applique lorsque le lien a été visité par l'utilisateur.

Remarque : Après un certain temps, les agents utilisateurs peuvent revenir de l'état visité à l'état non-visité du lien.

Ces deux états s'excluent mutuellement.

Le langage du document détermine quelles ancres ont des sources hyperliens. Ainsi en HTML 4.0, les pseudo-classes d'ancre s'appliquent aux éléments A avec un attribut "href". Les deux déclarations CSS2 suivantes produisent le même effet :

A:link { color: red }
:link  { color: red }

<A class="external" href="http://out.side/">lien externe</A>

A.external:visited { color: blue }

5.11.3 Les pseudo-classes dynamiques : :hover, :active et :focus

Les agents utilisateurs interactifs changent parfois l'aspect du rendu en réponse aux actions de l'utilisateur. CSS2 propose trois pseudo-classes pour un usage courant :

• La pseudo-classe :hover, qui est appliquée quand l'utilisateur désigne un élément (au moyen d'un appareil de pointage) sans l'activer. Par exemple, un agent utilisateur visuel pourrait appliquer celle-ci quand le pointeur (d'une souris) survole la boîte produite par un élément. Les agents utilisateurs qui n'ont pas de capacités interactives ne sont pas tenus d'appliquer cette pseudo-classe. Certains agents utilisateurs conformes dotés de ces capacités interactives peuvent être incapables de l'appliquer (ex. un crayon optique) ;
• La pseudo-classe :active, qui est appliquée quand l'utilisateur active un élément. Par exemple, entre le moment où l'utilisateur presse le bouton de la souris et le relâche.
• La pseudo-classe :focus, qui s'applique quand un élément reçoit l'attention (celui-ci acceptant les événements du clavier ou d'autres formes d'entrées de texte).

Ces pseudo-classes ne s'excluent pas mutuellement. Un élément peut correspondre à plusieurs d'entre elles au même moment.

CSS ne définit pas lesquels des éléments peuvent être dans un de ces états ou comment ceux-ci entrent et sortent de ces états. L'écriture peut varier, selon que les éléments réagissent aux actions de l'utilisateur, ou non ; les divers appareils et agents utilisateurs peuvent avoir différentes façons de désigner ou d'activer les éléments.

Les agents utilisateurs ne sont pas tenus, en raison des transitions provoquées par les pseudo-classes, de remettre en forme le document en cours d'affichage. Par exemple, une feuille de style peut spécifier que la taille de la police ('font-size') d'un lien sous l'effet de la pseudo-classe :active soit plus grande que celle d'un lien inactif, et un agent utilisateur, comme cela peut modifier la position des lettres, peut en ignorer la règle.

A:link    { color: red }    /* lien non-visité */
A:visited { color: blue }   /* lien visité   */
A:hover   { color: yellow } /* lien survolé     */
A:active  { color: lime }   /* lien activé    */

A:focus { background: yellow }
A:focus:hover { background: white }

Au sujet de la représentation des contours de l'objet qui a l'attention, consulter le chapitre sur les contours dynamiques pour l'attention.

5.11.4 La pseudo-classe de langue : :lang

Quand le langage du document spécifie une manière de déterminer le langage humain d'un élément, on peut écrire des sélecteurs CSS pour viser un élément selon la langue que celui-ci emploie. Par exemple en HTML [HTML40], on peut déterminer la langue employée en combinant l'attribut "lang", l'élément META et, d'une certaine façon, des informations issues du protocole (tel que les entêtes HTTP). En XML, on utilise un attribut nommé xml:lang, d'autres méthodes de détermination spécifiques au langage d'un document pouvant exister.

La pseudo-classe ':lang(C)' est vérifiée pour un élément dans la langue C. La lettre C représente un code de langue tel que spécifié dans HTML 4.0 [HTML40] et RFC 1766 [RFC1766]. La correspondance s'effectue de la même façon que pour l'opérateur '|='.

HTML:lang(fr) { quotes: '« ' ' »' }
HTML:lang(de) { quotes: '»' '«' '\2039' '\203A' }
:lang(fr) > Q { quotes: '« ' ' »' }
:lang(de) > Q { quotes: '»' '«' '\2039' '\203A' }

5.12 Les pseudo-éléments

5.12.1 Le pseudo-élément :first-line

Le pseudo-élément :first-line produit un style particulier sur la première ligne formatée d'un paragraphe. Par exemple :

P:first-line { text-transform: uppercase }

La règle précédente signifie "mettre les lettres de la première ligne de chaque paragraphe en majuscule". Cependant, le sélecteur "P:first-line" ne correspond à aucun élément HTML réel. Celui-ci correspond en fait à un pseudo-élément que l'agent utilisateur conforme va insérer au début de chaque paragraphe.

Noter que la longueur de la première ligne dépend de plusieurs facteurs, dont la largeur de la page, la taille de la police, etc. Ainsi un paragraphe quelconque en HTML tel que :

<P>Voici un paragraphe HTML plutôt 
long qui va être découpé en plusieurs 
lignes. La première ligne sera identifiée
à l'aide d'une séquence de balises fictives. 
Les autres lignes vont rester ordinaires 
dans la suite du paragraphe.</P>

VOICI UN PARAGRAPHE HTML PLUTÔT LONG
qui va être découpé en plusieurs lignes.
La première ligne sera identifiée à
l'aide d'une séquence de balises fictives. 
Les autres lignes vont rester ordinaires
dans la suite du paragraphe.

<P><P:first-line>Voici un paragraphe HTML plutôt
long </P:first-line>qui va être découpé
en plusieurs lignes. La première ligne sera identifiée à
l'aide d'une séquence de balises fictives. Les autres lignes
vont rester ordinaires dans la suite du paragraphe.</P>

Quand un pseudo-élément coupe un élément réel, on peut souvent décrire l'effet désiré avec une séquence de balises fictives qui ferment puis ré-ouvrent cet élément. Ainsi, si on balise le paragraphe de l'exemple avec un élément SPAN :

<P><SPAN class="test">Voici un paragraphe HTML plutôt long
qui va être découpé en plusieurs lignes.</SPAN>
La première ligne sera identifiée à l'aide d'une séquence
de balises fictives. Les autres lignes vont rester ordinaires dans la suite du
paragraphe.</P>

<P><P:first-line><SPAN class="test"> Voici un paragraphe
HTML plutôt long</SPAN></P:first-line><SPAN class="test"> qui
va être découpé en plusieurs lignes.</SPAN> La
première ligne sera identifiée à l'aide d'une séquence de
balises fictives. Les autres lignes vont rester ordinaires dans la suite du
paragraphe.</P>

Dans le cas où une certaine première ligne est aussi la première d'un certain élément de type bloc A et en même temps que l'ancêtre B de celui-ci, la séquence de balise fictive devient :

<B>...<A>...<B:first-line><A:first-line>Voici la première ligne</A:first-line></B:first-line>

Toutes les balises fictives se trouvent dans le plus petit des élément de type bloc, l'ordre d'imbrication des balises fictives A:first-line et B:first-line correspondant à celui des éléments A et B.

La "première ligne mise en forme" d'un élément de type bloc correspond à la première ligne dans le flot de l'élément, ignorant ainsi d'éventuels éléments flottants ou en position absolue. Par exemple :

<div>
  <p style="float: left">Paragraphe flottant...</p>
  <p>La première ligne commence ici...</p>
</div>

Un sélecteur 'div:first-line' s'appliquerait à la première ligne du second paragraphe, car le premier paragraphe se trouve en dehors du flot normal.

Le pseudo-élément :first-line ne peut s'attacher qu'à un élément de type bloc.

Le pseudo-élément :first-line est similaire à un élément de type en-ligne, avec certaines restrictions. Seules les propriétés suivantes peuvent lui être appliquées : les propriétés de police, les propriétés de couleur, les propriétés d'arrière-plan, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow' et 'clear'.

5.12.2 Le pseudo-élément :first-letter

Le pseudo-élément :first-letter peut être employé pour faire des capitales initiales et des lettrines, ce sont des effets typographiques courants. Ce genre de lettre initiale est assimilé à un élément de type en-ligne quand la valeur de sa propriété 'float' est 'none', et assimilé à un élément flottant autrement.

Le pseudo-élément :first-letter admet ces propriétés : les propriétés de police, les propriétés de couleur, les propriétés d'arrière-plan, 'text-decoration', 'vertical-align' (seulement si la valeur de la propriété 'float' est 'none'), 'text-transform', 'line-height', les propriétés de marge, les propriétés d'espacement, les propriétés de bordure, 'float', 'text-shadow' et 'clear'.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
 <HEAD>
  <TITLE>Lettrine</TITLE>
  <STYLE type="text/css">
   P              { font-size: 12pt; line-height: 12pt }
   P:first-letter { font-size: 200%; font-style: italic;
                    font-weight: bold; float: left }
   SPAN           { text-transform: uppercase }
  </STYLE>
 </HEAD>
 <BODY>
  <P><SPAN>Les premiers</SPAN> mots parmi ceux d'un article
  de journal.</P>
 </BODY>
</HTML>

<P>
<SPAN>
<P:first-letter>
L
</P:first-letter>es premiers
</SPAN> 
mots parmi ceux d'un article de journal.
</P>

Pour obtenir le formatage des lettrines traditionnelles, les agents utilisateurs peuvent approcher les tailles des polices, par exemple dans l'alignement des lignes de base. Le contour des glyphes peut aussi intervenir dans le formatage.

Les caractères de ponctuation (c.à.d. les caractères définis en Unicode [UNICODE] dans les classes de ponctuation "open" (Ps), "close" (Pe) et "other" (Po) ) qui précèdent la première lettre devraient également être pris en compte, comme ici :

Le pseudo-élément :first-letter ne peut correspondre qu'avec une partie d'un élément de type bloc.

Certaines combinaisons de lettres, dans une langue donnée, peuvent obéir à des règles particulières. En hollandais, par exemple, quand la combinaison "ij" survient au début d'un mot, le pseudo-élément :first-letter devrait les prendre en compte ensemble.

P { color: red; font-size: 12pt }
P:first-letter { color: green; font-size: 200% }
P:first-line { color: blue }

<P>Voici un morceau de texte qui est formaté sur deux lignes.</P>

<P>
<P:first-line>
<P:first-letter> 
V 
</P:first-letter>oici un morceau de texte qui est formaté
</P:first-line> 
sur deux lignes. 
</P>

5.12.3 Les pseudo-éléments :before et :after

Les pseudo-élément ':before' et ':after' servent à insérer un contenu généré avant ou après celui d'un élément. Le chapitre sur le texte généré en donne une explication.

H1:before {content: counter(chapno, upper-roman) ". "}

Combinés aux pseudo-éléments :before et :after, le pseudo-élément :first-letter, ou :first-line, s'applique à la première lettre, ou à la première ligne, de l'élément, y compris le texte inséré.

P.special:before {content: "Spécial !"}
P.special:first-letter {color: gold}