3. Les sélecteurs

Un sélecteur est une série de conditions sur la structure d’un document HTML (ou XML). Si les conditions représentées par un sélecteur sont vraies, les déclarations de la règle contenant ce sélecteur sont appliquées à l’élément vérifiant le dernier sélecteur de type d’élément ou sélecteur universel formant le sélecteur.

Concept de base

Les sélecteurs permettent de spécifier des conditions sur les hiérarchies d’éléments, les juxtapositions d’éléments, la présence ou la valeur d’un attribut, etc. Il est donc facile d’attacher des styles à un élément donné en fonction soit de ses attributs, soit de son contexte dans le document, soit des deux à la fois.

Considérons le fragment de document HTML suivant :

<H1>Titre du chapitre</H1>
<P>Ce premier paragraphe doit avoir une présentation particulière</P>
<P>mais les suivants sont tous normaux..</P>
<P>Tous les suivants.</P>
<P>Vraiment tous !</P>

Appliquons-lui la règle CSS 2 suivante :

H1 + P { margin-left : 1cm }

En d’autres termes, il s’agit de créer une marge gauche de 1 centimètre au niveau de tous les paragraphes P qui succèdent directement à un H1 (c’est-à-dire les P figurant après un H1 et ayant le même élément-parent) :

Figure 3–1 : Utilisation d’un sélecteur

Cette règle est particulièrement adaptée aux documents scientifiques. Le paragraphe qui suit un titre de section 1 représente souvent le résumé de la section. L’insertion d’une marge gauche le distingue du reste du texte.

Il est également possible de déterminer le style d’un tel paragraphe en fonction des attributs qu’il porte. Ainsi, l’attribut HTML CLASS est particulièrement adapté à la sélection d’un ensemble d’éléments (nous y reviendrons plus loin) :

<H1>Titre du chapitre</H1>
<P CLASS=resume>Ce premier paragraphe doit avoir une présentation particulière</P>
<P>mais les suivants sont tous normaux..</P>
<P>Tous les suivants.</P>
<P>Vraiment tous !</P>

Appliquons à ces lignes la règle :

*.resume { margin-left : 1cm }

Nous obtenons alors la même présentation qu’à la figure 3.1. Quelle est la différence entre les deux approches ? La première permet d’associer à tous les paragraphes P qui figurent dans un contexte défini un style unique. Dans notre exemple, tous les P suivant un H1 sont associés à une marge gauche de 1 centimètre. Dans la seconde approche, tous les éléments portant la classe resume donnent lieu à l’insertion d’une marge gauche, qu’il s’agisse d’un P ou d’un autre type d’élément !

Les sélecteurs ont donc pour fonction de sélectionner les éléments auxquels s’appliquent les déclarations contenues dans le bloc associé. Grâce au mécanisme des sélecteurs, un éditeur est en mesure de définir une feuille de styles applicable à un ensemble de documents de conception et d’origine différentes.

Sélecteurs simples

Un sélecteur simple représente une condition unitaire sur un élément. Il s’agit par exemple d’une condition sur le type de l’élément ou sur un attribut porté par l’élément en question. Les différents sélecteurs simples sont :

• les sélecteurs de type d’élément ;

• les sélecteurs universels ;

• les sélecteurs d’attribut ;

• les sélecteurs de classe ;

• les sélecteurs d’ID ;

• les pseudo-classes.

Parallèlement aux sélecteurs, la spécification CSS introduit également la notion de pseudo-élément. Cependant un pseudo-élément n’implique pas de condition sur la structure du document ou sa restitution. Les pseudo-éléments doivent figurer après le dernier sélecteur simple de la condition. C’est pourquoi ils ne sont pas décrits dans cette section.

Sélecteur de type d’élément

Un sélecteur de type d’élément est composé d’un nom d’élément. La condition qu’il représente est vraie pour un élément donné quand ce dernier a le type indiqué.

Ainsi les déclarations de la règle TH { ... } sont appliquées à tous les titres de colonnes de tableau TH du document.

Sélecteur universel

Le sélecteur universel est celui qui sélectionne indifféremment tous les types d’éléments. Il est noté par une étoile * . Ainsi les déclarations de la règle * { ... } sont appliquées à tous les éléments du document.

Si une séquence de sélecteurs simples est basée sur un sélecteur universel, mais ne se réduit pas à * , vous pouvez omettre ce caractère. Par exemple, écrivez [WIDTH] au lieu de *[WIDTH] , et .cetteClasse au lieu de *.cetteClasse .

Sélecteur d’attribut

Un sélecteur d’attribut est une condition sur l’existence d’un attribut porté par un élément du document ou sur la valeur de cet attribut. On peut par exemple sélectionner dans un document HTML tous les éléments portant l’attribut LANG ou encore toutes les barres horizontales HR dont la taille WIDTH atteint 50 % de la taille de l’élément englobant :

*[LANG] { ... }
HR[WIDTH="50%"] { ... }

Il existe quatre sélecteurs d’attributs :

• le sélecteur d’existence d’attribut ;

• le sélecteur de valeur d’attribut monovalué ;

• le sélecteur de valeur d’attribut multivalué ;

• le sélecteur de valeur d’attribut linguistique.

Tous les sélecteurs se composent du nom de l’attribut sélectionné suivi éventuellement d’une condition, le tout encadré de crochets.

Sélecteur d’existence d’attribut

Un sélecteur d’existence d’attribut se construit avec le nom de l’attribut sélectionné mis entre crochets. La condition que ce sélecteur représente est vraie si l’attribut est porté par l’élément sélectionné, c’est-à-dire si le document lui précise une valeur ou s’il a la valeur par défaut fixée par le modèle de document. Analysons la règle suivante :

*[LANG] { background-color : silver }

Elle est appliquée à tous les éléments qui portent l’attribut LANG . Si on l’applique à l’exemple suivant :

<H1 LANG="fr">Titre en français</H1>
<P>Ici commence le texte...</P>

seul H1 est restitué sur fond gris.

Figure 3–2 : Sélecteur d’existence d’attribut

Sélecteur de valeur d’attribut monovalué

Un attribut monovalué est un attribut possédant une seule valeur. Il existe des attributs multivalués en HTML ; leurs valeurs sont alors séparées par un espace pour former une seule chaîne de caractères.

Un sélecteur de valeur d’attribut monovalué est représenté par le nom de l’attribut sélectionné suivi de = et de la valeur sélectionnée, le tout entre crochets. La condition que ce sélecteur représente est vraie si l’attribut est porté par l’élément sélectionné et si sa valeur est celle précisée.

*[LANG="fr"] { background-color : silver }

La règle précédente est appliquée à tous les éléments du document dont l’attribut LANG vaut fr (la langue française). Ainsi, dans :

<H1 LANG="fr">Titre en français</H1>
<H1 LANG="sv">Titeln på svenska</H1>
<P LANG="fr">Ici commence le texte...</P>
<P LANG="sv">Här börjar texten...</P>

seuls les éléments en français sont restitués sur fond gris.

Figure 3–3 : Sélecteur de valeur d’attribut monovalué

La valeur sélectionnée d’un attribut est soit une chaîne de caractères, soit un identificateur.

La sélection en fonction de la casse dépend du modèle de document sur lequel s’applique la règle. En HTML 4.0, les valeurs d’attributs sont en général indépendantes de la casse. Certains attributs dérogent à la règle, en particulier TITLE .

Netscape 4 et MSIE 4 ne restituent pas la propriété background­color de la même façon : MSIE utilise toute la largeur de l’environnement de l’élément tandis que Netscape ne colore que la largeur effectivement utilisée par le contenu de l’élément... Reportez-vous au chapitre sur la propriété width pour en comprendre la raison.

Sélecteur de valeur d’attribut multivalué

Un sélecteur de valeur d’attribut multivalué est représenté par le nom de l’attribut sélectionné suivi de ~ = et de la valeur sélectionnée, le tout entre crochets. La condition que ce sélecteur représente est vraie si l’attribut est porté par l’élément sélectionné, s’il est bien multivalué et si une des valeurs de l’attribut est celle précisée.

DIV[CLASS~=classe12] { ... }

Cette règle sélectionne tous les éléments DIV portant, entre autres , la classe classe12 , CLASS étant un attribut multivalué (les valeurs sont séparées par des espaces). En effet, un élément HTML peut avoir plusieurs classes :

<DIV CLASS="classe3 classe12 exemple"> ... </DIV>

Ne confondez pas DIV[CLASS~=classe12] { ... } avec :

DIV[CLASS=classe12] { ... } (notez l’absence du tilde ~ )

Cette dernière règle sélectionne les DIV portant uniquement la classe classe12 .

Sélecteur de valeur d’attribut linguistique

Grâce au sélecteur de valeur d’attribut linguistique, vous pouvez sélectionner un élément du document en fonction de sa langue et cela quel que soit le dialecte employé. Il est ainsi possible de distinguer tous les titres en français, qu’ils s’agisse du français métropolitain ou du québécois. Les différents dialectes d’une même langue sont indiqués via l’identificateur ISO de la langue suivi d’un tiret et de l’identificateur correspondant (et ainsi de suite s’il y a des sous-dialectes). Un sélecteur de valeur d’attribut linguistique représente une condition vraie si l’attribut sélectionné est porté par l’élément sélectionné, si la valeur de cet attribut est une suite de mots séparés par des tirets et si la valeur de cet attribut commence par la valeur sélectionnée. Un tel sélecteur est représenté par le nom de l’attribut sélectionné, suivi de | = et de la valeur sélectionnée, le tout placé entre crochets.

H1[LANG|="fr"] { ... }

Cette règle s’applique aussi bien au titres H1 en français ( fr ) qu’en québécois ( fr-ca ) ou encore en français de Belgique ( fr-be ).

En revanche, si vous écrivez H1[TITLE|="fr"] , <H1 TITLE="fric"> ne remplit pas la condition car TITLE n’est pas un attribut de type linguistique valué par une séquence de mots séparés par des tirets.

Agrégation de sélecteurs d’attributs

Il est possible d’agréger les sélecteurs d’attributs pour affiner la condition sur l’élément sélectionné. Observons la règle suivante :

A[HREF][NAME="aspic"] { ... }

Elle s’applique aux ancres A source d’un hyperlien (car portant l’attribut HREF ) et par ailleurs cible d’un hyperlien (car portant l’attribut NAME ), cet hyperlien étant identifié par la valeur aspic . Notez qu’aucun espace ne sépare les deux sélecteurs d’attributs.

Sélecteur de classe

CLASS est un attribut du modèle HTML défini pour la plupart des éléments. Il permet d’appliquer des styles à un élément en le sélectionnant par le biais des classes qu’il porte. Les CSS contiennent donc un sélecteur dit « de classe ».

Il est possible de définir une condition sur l’attribut CLASS par l’usage d’un sélecteur de valeur d’attribut multivalué ; un type spécifique de sélecteur semble donc inutile. Disons seulement que la sélection sur CLASS est très courante et qu’il s’agit d’un moyen plus concis et clair d’arriver au même résultat.

Un sélecteur de classe est représenté par un point « . » suivi du nom de la classe à sélectionner :

H1.introduction
TR[WIDTH="50%"].total
.classePerso

Il est tout à fait possible de sélectionner plusieurs classes par élément.

DL.glossaire.encadrement

Sont sélectionnés ici les éléments DL dont la liste des valeurs (séparées par des espaces) de l’attribut CLASS contient glossaire et encadrement .

Il s’agit là d’un changement important entre CSS 1 et CSS 2. Les CSS 1 n’autorisaient qu’un seul sélecteur de classe par séquence de sélecteurs simples.

Un nom de classe est un identificateur CSS ; il obéit aux règles de structure des identificateurs (voir la section sur la syntaxe générale des CSS pour plus d’informations).

Les classes sont une arme à double tranchant. Vous serez sans aucun doute tenté de définir votre propre « modèle » de document au-dessus de HTML en utilisant par exemple uniquement des DIV et des SPAN et en leur affectant diverses classes comme telephone ou total . Cette approche est tout à fait contraire à l’esprit de la documentation structurée et risque de compromettre sérieusement la maintenance de votre document ! Il est préférable dans ce cas de développer votre propre modèle documentaire basé alors sur XML...

Sélecteur d’ID

L’ID est un attribut spécial défini pour tous les éléments d’un document HTML. Un ID identifie un élément d’un document de façon unique ; la présence de deux éléments différents portant le même ID dans un même document constitue une erreur grave. En revanche, deux éléments de même ID peuvent figurer dans deux documents différents.

Pour sélectionner un élément d’ID donné, appliquez-lui un sélecteur d’ID représenté par un dièse suivi de l’ID en question :

H1#conclusion

Cette condition est vraie pour :

<H1 ID=conclusion>Conclusion</H1>

Elle est fausse pour :

<H1 ID=introduction>Introduction</H1>
<P TITLE="introduction">Paragraphe introductif</H1>
<H1 CLASS=introduction>Introduction</H1>

Si vous travaillez avec un document XML dans lequel le nom de l’attribut contenant l’ID n’est pas nécessairement ID , il faut utiliser un sélecteur de valeur d’attribut tel que :

ELEMENT [nom-de-l-attribut-ID ="valeur "]

Pseudo-classes

Les pseudo-classes sont des sélecteurs simples spéciaux qui définissent des conditions difficilement exprimables par les sélecteurs standard ou non liées à la structure du document.

En clair, il s’agit du moyen utilisé pour que les sélecteurs simples CSS 2 ne soient pas étendus à des fonctions en marge de la gestion de styles. Tout nouveau sélecteur CSS impose la mise au point d’un nouveau formalisme (point, dièse, entre crochets...) ; comme la liste des caractères disponibles est malheureusement limitée, on a recours à un formalisme un peu fourre-tout : la « pseudo­classe ».

Grâce à une pseudo-classe, vous pouvez, par exemple, sélectionner un élément ayant la particularité d’être le premier fils de son père.

Une pseudo-classe est formalisée de la même manière qu’un sélecteur de classe à ceci près qu’un deux-points « : » remplace le point de rigueur. Par exemple :

DIV:first-child
A:visited

En CSS 2, les pseudo-classes sont au nombre de six.

Pseudo-classe « premier fils »

La pseudo-classe :first-child est une condition sur l’élément sélectionné. Si cet élément est le premier fils de son père, cette condition est vraie.

Le texte #PCDATA pur n’est pas compté comme un élément. Dans le paragraphe <P>toto <EM>dort ici</EM></P> , EM est bien le premier fils de P . « élément fils » serait donc plus approprié que « fils ».

Définissons la règle :

UL > LI:first-child { background-color : silver }

Appliquons-la à :

<UL><LI>premier item</LI>
<LI>second item</LI>
<LI>troisième item</LI>
</UL>

Nous obtenons alors :

Figure 3–4 : Pseudo-classe :first-child

Manipulez cette pseudo-classe avec prudence car les erreurs d’interprétation sont faciles, comme le montre l’exemple suivant :

A B:first-child

Il ne faut pas lire « un B premier fils de A » (qui s’écrirait A > B:first-child ) mais « un B premier fils de son élément parent, descendant de A ».

Pseudo-classes d’hyperlien

Tous les navigateurs Web classiques sont capables de marquer la différence entre un lien qui n’a jamais été suivi et un lien déjà consommé. En fait, les navigateurs restituent plutôt une différence entre les liens vers les objets déjà visités et ceux qui ne l’ont pas été. Un lien que l’usager n’a pas suivi mais qui pointe vers un objet déjà visité est donc restitué comme un lien « suivi ». Pour plus de clarté, on parle plutôt de lien visité/non visité que de lien suivi/non suivi.

Afin que les styles attachés à cet état visité/non visité soient décrits par des règles CSS, et au lieu d’être fixés une fois pour toutes dans le navigateur ou définis par des attributs HTML portés par l’élément BODY , deux pseudo-classes ont été créées.

Vous noterez que rien dans le document lui-même ne permet de dire si un lien a été visité ou pas ! Il est donc difficile de reconnaître dans les pseudo-classes d’hyperlien la notion de sélecteur.

Pour que la pseudo-classe « hyperlien non visité » :link soit une condition vraie, il faut que l’élément sélectionné soit un lien et que l’objet référencé par ce lien ne soit pas encore visité.

L’expression « pas encore visité » est à prendre au sens de « n’est pas signalé comme visité dans l’historique du navigateur ». Tout navigateur qui se respecte dispose d’un cache de données et ne conserve un historique des URL visités que durant un temps limité.

La pseudo-classe « hyperlien visité » :visited est une condition vraie quand l’élément sélectionné est un lien et que l’objet référencé par ce lien a déjà été visité.

A:link { color : blue }
A:visited { color : red }

Dans cet exemple, les liens non visités sont restitués en bleu et les liens déjà visités en rouge.

Pseudo-classe « objet survolé »

L’expression « objet survolé » est une bien mauvaise traduction du mot anglo-saxon hover mais il est difficile de trouver mieux. Cette pseudo-classe est une condition vraie si l’élément sélectionné est désigné par l’utilisateur. Plaçons-nous par exemple dans un environnement visuel et graphique : la condition est vérifiée lorsque le pointeur de la souris se trouve au-dessus de la restitution visuelle de l’élément sélectionné. Ainsi, pour que le texte des ancres passe en caractères gras lorsque la souris passe dessus, inscrivez :

A:hover { font-weight : bold }

La spécification CSS 2 n’interdit pas le recours à cette pseudo-classe pour un autre type d’élément que les ancres A . Cependant, les implémentations de cette pseudo-classe dans les navigateurs restent encore limitées à ces éléments. Voyez la section sur les tests de conformité pour plus d’informations.

Pseudo-classe « objet activé »

La pseudo-classe « objet activé » :active est une condition vraie si l’élément sélectionné est activé par l’utilisateur. Lorsque l’utilisateur clique avec la souris sur un élément, l’élément en question est activé entre le clic et le relâchement du bouton de la souris.

Pseudo-classe « objet en attente »

La pseudo-classe :focus est une condition vraie si l’élément sélectionné attend une réaction de l’utilisateur. Si par exemple, dans un navigateur graphique, un champ éditable d’un formulaire reçoit les caractères saisis au clavier, ce champ détient le « focus » : la condition est alors vraie pour l’élément correspondant.

Pseudo-classe « langage »

La pseudo-classe :lang() est une notation fonctionnelle. Sa valeur, qui figure entre parenthèses, est comparée avec la langue de l’élément sélectionné. La règle de fonctionnement de cette pseudo-classe est identique à celle régissant un sélecteur d’attribut linguistique. En autres termes, :lang(fr) est vrai si la langue de l’élément sélectionné commence par fr .

Cette pseudo-classe permet de simplifier l’écriture des sélecteurs appliqués à un document HTML. Il est ainsi inutile d’écrire plusieurs fois [LANG|= " ... " ] . En XML, le nom de l’attribut portant la langue est a priori inconnu et il faut utiliser un sélecteur de valeur d’attribut linguistique.

La règle suivante permet ainsi de mettre en italique tout élément en langue française :

*:lang(fr) { font-style : italic }

Combinateurs

CSS 2 propose trois combinateurs :

• l’espace (pris au sens large et comprenant donc la tabulation) ;

• le caractère > (plus grand que) ;

• le caractère + (plus).

Ils définissent une relation entre les sélecteurs se trouvant à gauche du combinateur et ceux se trouvant à droite. Un combinateur sépare deux séquences de sélecteurs simples. Il peut être entouré d’espaces facultatifs.

Séquences de sélecteurs simples

Une séquence de sélecteurs simples est une chaîne de sélecteurs simples (pseudo-classes comprises) accolés ; en d’autres termes, ils ne sont pas séparés par des combinateurs. Une séquence de sélecteurs simples obéit aux règles suivantes :

• elle commence toujours par :

• un sélecteur de type d’élément ;

• ou par un sélecteur universel (qui peut éventuellement être omis).

• elle ne peut contenir plus d’un sélecteur de type d’élément ou universel ;

• elle ne contient pas de combinateurs.

Sélecteur de descendance

Un sélecteur de descendance sélectionne tout élément B descendant d’un élément A, autrement dit qui a pour ancêtre (et éventuellement père) A dans l’arborescence du document. Un sélecteur de descendance est représenté par deux séquences de sélecteurs simples séparées par un ou plusieurs espaces (compris comme des combinateurs).

DIV.abstract STRONG { ... }

Cette règle s’applique à tous les éléments STRONG qui descendent d’un DIV portant la classe abstract .

Considérons l’exemple suivant :

<BODY STYLE="background-color : white">
<UL><LI>item 1 liste 1</LI>
<LI>item 2 liste 1
<OL><LI>item 1 liste 1.1
<LI>item 2 liste 1.2
</OL></LI>
</UL>
<OL><LI>item 1 liste 2</LI>
<LI>item 2 liste 2
<UL><LI>item 1 liste 2.1
<LI>item 2 liste 2.2
</UL></LI>
</OL>
</BODY>

Appliquons-lui la règle suivante :

UL LI { background : silver }

Tous les items et sous-items de la liste 1 sont restitués sur fond argenté car ils descendent d’un UL . Pour la même raison, seuls les items de sous-liste figurent sur fond argenté dans la liste 2.

Figure 3–5 : Sélecteurs de descendance

Sélecteur filial

Pour mieux préciser les conditions nécessaires à l’application d’une règle CSS, il faut être capable de décrire plus en détail la structure exacte du fragment de document HTML concernée. Il faut, par exemple, pouvoir exprimer que « la règle s’applique à B s’il est fils de A ». L’objet du sélecteur filial est décrit par le combinateur > (plus grand que) séparant deux séquences de sélecteurs simples :

P > EM, P > I { text-transform : uppercase }

Comprenez que tous les éléments EM et I fils directs d’un paragraphe P sont restitués en capitales. Appliquons la règle précédente au fragment HTML suivant :

<H1>Livre des <EM>morts</EM></H1>
<P>Le <EM>Livre des morts</EM> date de l'<I>Egypte</I> ancienne</P>

Figure 3–6 : Sélecteur filial

Le premier EM n’est pas mis en majuscules car il n’est pas fils direct d’un P contrairement au second EM et au I qui sont fils directs d’un paragraphe P .

Sélecteur d’adjacence

Un sélecteur d’adjacence sert à sélectionner un élément compte tenu de son prédécesseur direct. Par exemple, les deux éléments HEAD et BODY de tout document HTML sont adjacents car BODY suit HEAD dans la liste des fils de l’élément racine HTML . Un sélecteur adjacent est représenté par deux séquences de sélecteurs simples séparées par le combinateur + (plus) éventuellement encadré par des espaces :

H1 + P { ... }
LI + LI { ... }

Testons la règle suivante :

H1+P { font-family : monospace }

Appliquons-la à ce fragment de document :

<H1>Où l'on apprend à manier les sélecteurs adjacents</H1>
<P>Le ver était dans le fruit dès le premier jour</P>
<P>mais le second, tout se passa bien et ils firent plein de petits
sélecteurs</P>

Figure 3–7 : Sélecteurs adjacents

Seul le paragraphe qui suit immédiatement le H1 est concerné par la règle et donc restitué en police non proportionnelle.

Pseudo-éléments

Les pseudo-classes pallient les insuffisances des sélecteurs CSS 2 usuels incapables de décrire certaines conditions. De la même façon, les pseudo-éléments facilitent l’accès à des morceaux de document autrement inaccessibles. Nous préférons ce terme « morceau », qui signifie « un bout du document » indépendamment de toute structure valide, au mot « fragment » qui signifie plutôt « partie du document correspondant à une sous-structure ».

Comment générer une lettrine en HTML avec CSS ? Une lettrine est un superbe effet visuel, hérité des manuscrits antiques et médiévaux : le premier caractère d’un paragraphe est agrandi tandis que le reste du texte, resté lui à taille normale, court le long de cette première lettre. Rassurez-vous, aucune propriété n’est prévue pour l’enluminure !

Figure 3–8 : Exemple de lettrine

Les CSS 2 définissent quatre pseudo-éléments représentés sur le modèle d’une pseudo-classe ; après le caractère « : », indiquez le nom du pseudo-élément.

P:first-line { font-weight : bold }
P.intro:first-letter { font-size : 300% }
H1:before { content : "TitreSection1 : " }

Un pseudo-élément est nécessairement placé après le dernier sélecteur simple qui le compose, sans espace intermédiaire :

A:first-letter
DIV.coucou > P:first-line

Contrairement aux deux exemples précédents, P:first-line > SPAN#id11 n’est pas un sélecteur valide car le pseudo-élément :first-line n’est pas comme il se doit situé à la fin du sélecteur.

Pseudo-élément « première ligne »

Ce pseudo-élément, noté :first-line , permet d’accéder à la première ligne restituée d’un élément. Vous pouvez ainsi employer une taille de caractères plus importante pour ladite ligne, ce qui constitue une pratique courante dans les journaux quotidiens. Il faut bien entendu que le concept de « première ligne » ait un sens pour le media sur lequel le document est restitué. Ainsi, une règle fondée sur ce pseudo-élément doit être ignorée lors d’une restitution d’information sur bande perforée.

Exploitons les règles suivantes :

P { font-style : italic }
P:first-line { font-style : normal ;
font-weight : bold}

Appliquons-les au paragraphe :

<P>Ce paragraphe doit être assez long pour pouvoir être restitué par le logiciel de navigation au moins sur deux lignes. Sinon, c'est un mauvais exemple...</P>

On obtient alors :

Figure 3–9 : Exemple de pseudo-élément "première ligne"

Agrandissons la largeur de la fenêtre et modifions donc la longueur des lignes du paragraphe : les caractères qui remontent au niveau de la première ligne changent automatiquement de style et passent en gras.

Figure 3–10 : Règles appliquées à la première ligne

Pseudo-élément « premier caractère »

Le pseudo-élément :first-letter permet d’accéder au premier caractère d’un élément.

Appliquons au paragraphe précédent la règle :

P:first-letter { font-size : 200% ; font-weight : bold }

On obtient alors :

Figure 3–11 : Lettrine générée avec un pseudo-élément « premier caractère »

Pseudo-éléments de génération de contenu

Il existe deux autres pseudo-éléments permettant d’insérer des boîtes de décoration avant ou après la restitution normale d’un élément. Le contenu inséré ne fait pas partie du document ; il n’est visible/audible qu’à la restitution.

Ces deux pseudo-éléments :before et :after sont détaillés dans le chapitre relatif aux compteurs.

Groupe de sélecteurs

Il est possible de regrouper plusieurs sélecteurs ouvrant sur le même ensemble de déclarations en les séparant par des virgules.

H1 { font-style : italic }
H2 { font-style : italic }
H3 { font-style : italic }

Ces trois lignes sont strictement équivalentes à :

H1, H2, H3 { font-style : italic }

Cette équivalence est vérifiée parce que H1 , H2 et H3 sont tous trois des sélecteurs CSS 2 valides. Ce n’est pas toujours le cas, comme le montre l’exemple suivant :

H1 { font-style : italic }
H2 / EM { font-style : italic }
H3 { font-style : italic }

Le regroupement des trois règles précédentes n’est pas équivalent à :

H1, H2 / EM, H3 { font-style : italic }

car dans le premier cas, deux règles (en gras) sont valides et sont prises en compte par le navigateur tandis que le groupe de sélecteurs du second cas est entièrement invalide. Il invalide donc toute la règle !

Restitution progressive

Pourquoi est-il possible de sélectionner le premier fils d’un élément mais pas le dernier, le successeur immédiat d’un élément mais pas le n­ième ?

Tout simplement pour préserver la notion de « restitution progressive ». La restitution progressive est cet effet de programmation qui vous permet de visualiser ce que le navigateur a déjà reçu bien que l’intégralité du document et les images ne soient pas encore transférées sur votre ordinateur.

Vous souhaitez, par exemple, vérifier que l’hypothétique sélecteur P:last-child représente une condition vraie pour un paragraphe donné. Il faut d’abord lire et analyser la suite du document pour savoir si oui ou non il existe un élément successeur du paragraphe en question !

<DIV>
<P ID="i1">ceci est un <SPAN CLASS="c2">paragraphe</SPAN>
suivi d''un autre <SPAN="c2">paragraphe</SPAN> ;
il est formaté sur plusieurs lignes</P>
<P ID="i2">et voila un second paragraphe !</P>
</DIV>

Dans cet exemple, il est impossible de savoir que le paragraphe portant l’ID i1 est le dernier P fils du DIV avant d’avoir atteint la balise de fin du DIV . Or les navigateurs ont pour principe de commencer leur restitution dès la reconnaissance de la balise de début d’un élément. Vous évitez ainsi une insupportable attente. On pourrait envisager de réappliquer les styles à la descendance d’un élément lorsque la balise de fin de cet élément est détectée, cependant l’opération nécessite quelques millisecondes, ce qui semble rédhibitoire aux éditeurs de logiciels.

Il est permis de rester dubitatif lorsqu’un PalmPilot™ ou même un Psion™ sont en mesure de restituer en un temps record un très long document HTML contenant des graphiques ou que les performances d’une Nintendo™ font blêmir de honte un PC récent. Microsoft et Netscape, qui affirment être incapables d’implémenter des sélecteurs un peu étoffés pour ne pas nuire à la « restitution progressive », n’avancent en fait aucun argument sérieux et font preuve par contre d’une indéniable mauvaise volonté. Les gros éditeurs de documents, industriels ou juridiques, seront les premiers pénalisés par une telle restriction.

Tableau récapitulatif

Les sélecteurs, les pseudo-classes et les pseudo-éléments permettent de définir aisément et de façon réutilisable des conditions d’attribution de styles de présentation à un document. Leur puissance est réelle et il est nécessaire d’en explorer toutes les facettes pour les utiliser au mieux. Le tableau qui suit reprend les différentes définitions qui figurent dans ce chapitre.

L’espace (pris au sens large et incluant donc la tabulation) est un combinateur. Sa présence dans une règle est donc significative :