W3C

Module CSS3 : Sélecteurs W3C

Document de Travail du W3C 26 Janvier 2001

Cette version:
http://www.w3.org/TR/2001/WD-css3-selectors-20010126
Dernière version:
http://www.w3.org/TR/css3-selectors
Versions précédentes:
http://www.w3.org/TR/2000/WD-css3-selectors-20001005
http://www.w3.org/TR/2000/WD-css3-selectors-20000410
Éditeurs:
Daniel Glazman (Netscape/AOL)
Tantek Çelik (Microsoft Corporation)
Ian Hickson
Peter Linss (ancien éditeur, anciennement de Netscape/AOL)
John Williams (ancien éditeur, Quark, Inc.)

Résumé

Les CSS (Cascading Style Sheets) sont un langage permettant de décrire la restitution de documents HTML et XML à l'écran, sur papier, vocalement, etc. Pour attacher des propriétés stylistiques aux éléments du document, elles utilisent les sélecteurs, qui sont des conditions de sélection de ces éléments. Ce document de travail décrit les sélecteurs proposés pour CSS level 3. Il comprend et étend les sélecteurs de CSS level 2.

Statut de ce document

Ce document est une version de travail de l'un des "modules" de la future spécification CSS3. Il ne décrit pas seulement les sélecteurs déjà présents en CSS1 et CSS2, mais propose également de nouveaux sélecteurs pour CSS3 ainsi que pour les autres langages qui pourraient en avoir besoin. Le Groupe de Travail ne s'attend pas à ce que toutes les implémentations des CSS3 implémentent tous les types de sélecteurs. A la place, il y aura probablement un petit nombre de variantes des CSS3, aussi appelées "profils". Par exemple, il est possible que seul le profil pour les Agents Utilisateurs non interactifs contienne l'ensemble des sélecteurs proposés ici.

Ce document est un document de travail du Groupe de Travail CSS & FP faisant partie de l'activité Style.

Le Groupe de Travail pense que cette spécification est prête et souhaite donc en faire le dernier appel à commentaires. Si le retour est positif, la spécification deviendra une Recommendation Candidate du W3C. Les commentaires doivent être reçus avant le 1er Mars 2001.

Les commentaires sur ce document de travail et les discussions le concernant peuvent être envoyés dans la liste de diffusion publique (archivée) www-style@w3.org (voyez les instructions). Les Membres du W3C peuvent également envoyer leurs commentaires directement au Groupe de Travail CSS & FP.

Ce document est toujours à l'état de document de travail et peut donc être mis à jour, remplacé ou rendu obsolète par d'autres documents du W3C à tout moment. Il est inapproprié d'utiliser les Documents de Travail du W3C en tant que documents de référence ou de les citer autrement qu'en tant que "travaux en cours". Sa publication n'implique pas son acceptation officielle par les membres du W3C ou par le Groupe de Travail CSS & FP (Accès réservé au membres du W3C).

La dernière version de ce document de travail est disponible en suivant le lien "Dernière version" ci-dessus, ou en visitant la liste des Rapports Techniques du W3C.

Des traductions de ce document sont disponibles. La version anglaise de cette spécification est la seule version normative.

Dépendances aux autres Modules CSS3

Table des matières

1. Contexte

Les membres du CSS & FP Working Group ont décidé durant leur réunion de Clamart de la modularisation de la spécification CSS.

Cette modularisation des CSS, associée à l'externalisation de la syntaxe générale, va diminuer la taille de la spécification et va permettre à de nouveaux langages de réutiliser les sélecteurs et/ou la syntaxe générale des CSS. Par exemple pour la définition de comportements ou de transformations d'arbre.

Cette spécification contient sa propre suite de tests, un test par concept introduit dans ce document. Ces tests ne sont pas des tests de conformité absolue mais se proposent de fournir aux usagers un moyen simple de vérifier si une partie de cette spécification est implémentée au moins a minima ou, au contraire, pas du tout.

1.1. Changements par rapport à CSS 2

Les principales différences entre les Sélecteur CSS 2 et les Sélecteurs W3C sont :

2. Sélecteurs

Un sélecteur W3C représente une structure. Cete structure peut être vue par exemple comme une condition (p.ex. dans une règle CSS) qui détermine quels éléments de l'arbre documentaire sont sélectionnés par le sélecteur, ou comme une description plate du fragment HTML ou XML correspondant à cette structure.

Les sélecteurs W3C vont de la simple représentation du nom d'un élément jusqu'à des représentations contextuelles complexes.

La table qui suit résume la syntaxe des sélecteurs W3C :

Séquence Signification Décrit en section Défini originellement en CSS niveau
* tout élément Sélecteur universel 2
E tout élément de type E Sélecteur de type d'élément 1
E[foo] tout élément E portant l'attribut "foo" Sélecteurs d'attribut 2
E[foo="bar"] tout élément E portant l'attribut" foo" et dont la valeur de cet attribut est exactement "bar" Sélecteurs d'attribut 2
E[foo~="bar"] tout élément E dont l'attribut "foo" contient une liste de valeurs séparées par des espaces, l'une de ces valeurs étant exactement égale à "bar" Sélecteurs d'attribut 2
E[foo^="bar"] tout élément E dont la valeur de l'attribut "foo" commence exactement par la chaîne "bar" Sélecteurs d'attribut 3
E[foo$="bar"] tout élément E dont la valeur de l'attribut "foo" finit exactement par la chaîne "bar" Sélecteurs d'attribut 3
E[foo*="bar"] tout élément E dont la valeur de l'attribut "foo" contient la sous-chaîne "bar" Sélecteurs d'attribut 3
E[lang|="en"] tout élément E dont l'attribut 'lang" est une liste de valeurs séparées par des tirets et commençant (à gauche) par "en" Sélecteurs d'attribut 2
E:root un élément E, racine du document Pseudo-classes structurelles 3
E:nth-child(n) un élément E qui est le n-ième enfant de son parent Pseudo-classes structurelles 3
E:nth-last-child(n) un élément E qui est le n-ième enfant de son parent en comptant depuis le dernier enfant Pseudo-classes structurelles 3
E:nth-of-type(n) un élément E qui est le n-ième enfant de son parent et de ce type Pseudo-classes structurelles 3
E:nth-last-of-type(n) un élément E qui est le n-ième enfant de son parent et de ce type en comptant depuis le dernier enfant Pseudo-classes structurelles 3
E:first-child un élément E, premier enfant de son parent Pseudo-classes structurelles 2
E:last-child un élément E, dernier enfant de son parent Pseudo-classes structurelles 3
E:first-of-type un élément E, premier enfant de son type Pseudo-classes structurelles 3
E:last-of-type un élément E, dernier enfant de son type Pseudo-classes structurelles 3
E:only-child un élément E, seul enfant de son parent Pseudo-classes structurelles 3
E:only-of-type un élément E, seul enfant de son type Pseudo-classes structurelles 3
E:empty un élément E qui n'a aucun enfant (y compris noeuds textuels purs) Pseudo-classes structurelles 3
E:link
E:visited
un élément E qui est la source d'un hyperlien dont la cible n'a pas encore été visitée (:link) ou a déjà été visitée (:visited) Les pseudo-classes de lien 1
E:active
E:hover
E:focus
un élément E pendant certaines actions de l'usager Les pseudo-classes d'action Usager 1 and 2
E:target un élément E qui est la cible de l'URL d'origine contenant lui-même un fragment identifiant. La pseudo-classe :target 3
E:lang(c) un élément E dont le langage (humain) est c (le langage du document spécifie comment le langage humain est déterminé) La pseudo-classe :lang()  2
E:enabled
E:disabled 
un élément d'interface utilisateur E qui est actif ou inactif. Les pseudo-classes d'état d'élément d'interface 3
E:checked
E:indeterminate 
un élément d'interface utilisateur E qui est coché ou dont l'état est indéterminé (par exemple un bouton-radio ou une case à cocher) Les pseudo-classes d'état d'élément d'interface 3
E:contains("foo") un élément E dont le contenu textuel concaténé contient la sous-chaîne "foo" La pseudo-classe de contenu 3
E::first-line la première ligne formatée d'un élément E The :first-line pseudo-element 1
E::first-letter le premier caractère formaté d'un élément E Le pseudo-élément ::first-letter 1
E::selection la partie d'un élément E qui est actuellement sélectionnée/mise en exergue par l'usager Les pseudo-éléments fragments d'éléments d'interface 3
E::before le contenu généré avant un élément E Le pseudo-élément ::before 2
E::after le contenu généré après un élément E Le pseudo-élément ::after 2
E.warning Uniquement en HTML. Identique à E[class~="warning"]. Sélecteurs de classe 1
E#myid un élément E dont l'ID est égal à "myid". Sélecteurs d'ID 1
E:not(s) un élément E qui n'est pas représenté par le sélecteur simple s La pseudo-classe de négation 3
E F un élément F qui est le descendant d'un élément E Combinateur de descendance 1
E > F un élément F qui est le fils d'un élément E Combinateur filial 2
E + F un élément F immédiatement précédé par un élément E Combinateur d'adjacence directe 2
E ~ F un élément F précédé par un élément E Combinateur d'adjacence indirecte 3

Exemple : en CSS, la signification réelle de chaque sélecteur est déterminée à partir de la table ci-dessus en faisant précéder le mot "sélectionne" au contenu de chaque cellule de la colonne "Signification".

3. Sensibilité à la casse

La sensibilité à la casse des noms d'éléments d'un langage de documents donné dans les sélecteurs W3C dépend du langage de documents en question. Par exemple, en HTML, les noms d'éléments ne sont pas senbibles à la casse, alors qu'ils le sont en XML

La sensibilité à la casse des noms d'attribus et des valeurs d'attributs dépend également du langage de documents.

4. Syntaxe des sélecteurs

Un sélecteur est une chaîne d'une ou plusieurs séquences de sélecteurs simples séparés par des combinateurs.

Une séquence de sélecteurs simples est une chaîne de sélecteurs simples qui ne sont pas séparés par des combinateurs. Ele commence toujours par un sélecteur de type d'élément ou un sélecteur universel. Aucun autre sélecteur de type d'élément ou sélecteur universel n'est autorisé dans la séquence.

Un sélecteur simple est soit un sélecteur de type d'élément, un sélecteur universel, un sélecteur d'attribut, un sélecteur d'ID, un sélecteur de contenu ou une pseudo-classe. Un pseudo-élément peut suivre la dernière séquence de sélecteurs simples.

Les combinateurs sont : l'espace, ">", "+" et "~". Un espace peut être présent entre un combinateur et les sélecteurs simples qui l'entourent. Seuls les caractères "espace" (code Unicode 32), "tab" (9), "saut de ligne" (10), "retour chariot" (13), and "saut de page" (12) peuvent composer un espace. Les autres caractères de type espace, comme "em-space" (8195) et "ideographic space" (12288), ne peuvent composer un espace.

5. Groupes de sélecteurs

Quand plusieurs sélecteurs sont associés aux mêmes déclarations, ils peuvent être groupés en les séparant par des virgules.

Exemples CSS :

Dans cette exemple, les trois règles CSS sont réduites à une seule :

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }
est équivalent à :
h1, h2, h3 { font-family: sans-serif }

Attention : cette équivalence est vérifiée dans cet exemple car les trois sélecteurs initiaux sont des sélecteurs valides. Si l'un ou plus de ces sélecteurs est invalide, le groupe composé des trois sélecteurs est lui-même invalide, invalidant l'ensemble de la règle ; il n'y a alors pas équivalence.

6. Sélecteurs simples

6.1 Sélecteur de type d'élément

Un sélecteur de type d'élément est le nom d'un type d'élement du langage de documents. Un sélecteur de type d'élement représente une occurence d'un élément du type donné dans l'arbre du document.

Exemple(s):

Le sélecteur suivant représente un élément h1 dans l'arbre du document :

h1

6.1.1 Sélecteur de type d'élément et Espaces de noms

Les sélecteurs de type d'élément peuvent contenir un composant optionel d'espace de noms. Un préfixe d'espace de noms préalablement déclaré (via une règle-at @namespace) peut être préfixé à un nom d'élément en les séparant par le séparateur d'espace de noms "|". Le composant d'espace de noms peut être laissé vide pour indiquer que le sélecteur ne représente que des éléments sans espace de noms déclaré. De plus, une étoile peut être utilisée comme préfixe d'espace de noms, indiquant alors que le sélecteur représente des élements dans quelque espace de noms que ce soit (y compris les éléments sans espace de noms déclaré). Les sélecteurs de type d'élément qui n'ont pas de composant d'espace de noms (pas de séparateur d'espace de noms) représentent les éléments sans considération d'espace de noms (équivalent à "*|") sauf si un espace de noms par défaut à été déclaré, auquel cas le sélecteur représente les éléments dans cet espace de noms par défaut.

Une autre approche serait d'associer les sélecteurs de type d'élément n'ayant pas de composant d'espace de noms qu'aux éléments n'ayant pas d'espace de noms (sauf si un espace de noms par défaut a été déclaré). Dans ce cas, le sélecteur "h1"serait équivalent au sélecteur "|h1" et non pas au sélecteur "*|h1". L'aspect négatif de cette approche est que les feuilles de styles existantes (écrites dans usage d'espaces de noms) serait inopérantes dans tous les documents faisant usage des espaces de noms, c'est-à-dire dans tous les documents XHTML.

Il doit être noté que si un préfixe d'espace de noms utilisé dans un sélecteur n'a pas été préalablement déclaré, le sélecteur doit alors être considéré comme invalide et l'ensemble de la règle est alors ignorée en conformité avec les règles standard de gestion d'erreur.

Il doit être de plus noté que dans un outil gérant les espaces de noms, les sélecteurs de type d'élément sont comparés seulement à la partie locale du nom qualifié d'un élément. Voir ci-dessous pour les comparaisons effectuées dans un outils ne gérant pas les espaces de noms.

En résumé :

ns|E
éléments E dans l'espace de nom ns
*|E
éléments E dans tout espace de noms, y compris ceux sans espace de noms déclaré
|E
éléments E sans espace de noms déclaré
E
si aucun espace de noms par défaut n'a été déclaré, ceci est équivalent à *|E. Sinon, c'est équivalent à ns|E où ns est l'espace de noms par défaut.

Exemples CSS :

@namespace foo url(http://www.foo.com);

foo|h1 { color: blue }

foo|* { color: yellow }

|h1 { color: red }

*|h1 { color: green }

h1 { color: green }

La première règle sélectionnera uniquement les éléments h1 dans l'espace de noms "http://www.foo.com".

La seconde règle sélectionnera tous les éléments de l'espace de noms "http://www.foo.com".

La troisième règle sélectionnera uniquement les éléments h1 elements sans déclaration d'espace de noms.

La quatrième règle sélectionnera les éléments h1 dans tout espace de noms (y compris ceux sans espace de noms déclaré).

La dernière règle est équivalente à la quatrième car aucun espace de noms par défaut n'a été défini.

6.2 Sélecteur universel

Le sélecteur universel, dénoté"*", represente le nom qualifié de tout type d'élément. Il représente donc tout élément de l'arbre du document dans tout espace de noms (y compris les éléments sans espace de noms déclaré) si aucune espace de noms par défaut n'a été déclaré. Si un espace de noms par défaut a été déclaré, consultez ci-dessous Sélecteur universel et Espaces de noms.

Si le sélecteur universel n'est pas le seul composant d'une séquence de sélecteurs simples, le * peut être omis. Par exemple:

Attention : il est recommandé de ne pas omettre le *, representant le sélecteur universel.

6.2.1 Sélecteur universel et Espace de noms

Le sélecteur universel peut contenir un composant optionel d'espace de noms

ns|*
tous les éléments de l'espace de noms ns
*|*
tous les éléments
|*
tous les éléments sans espace de noms déclaré
*
si aucun espace de noms par défaut n'a été spécifié, ceci est équivalent à *|*. Dans le cas contraire, c'est équivalent à ns|* où ns est l'espace de noms par défaut.

6.3 Sélecteurs d'attribut

Les sélecteurs W3C permettent de représenter les attributs attachés à un élément.

6.3.1 Représentation des attributs et des valeurs d'attributs

Quatre différents sélecteurs d'attribut sont disponibles :

 
[att]
Représente l'attribut att, quelque soit la valeur de l'attribut.
[att=val]
Représente l'attribut att, sa valeur étant exactement égale à "val".
[att~=val]
Représente l'attribut att, sa valeur étant une liste de mots séparés par des espaces, l'un de ces mots étant exactement "val". En cas d'usage de ce sélecteur, les mots dans la valeur ne doivent pas être séparés par des espaces (puisqu'ils sont séparés par des espaces).
[att|=val]
Représente l'attribut att, sa valeur étant une liste de mots séparés par des tirets et commençant par "val". La comparaison se fait toujours au début de la valeur de l'attribut. Ceci est principalement destiné à la sélection de sous-codes linguistiques (p.ex. l'attribut LANG en HTML) conformément à la RFC 1766 ([RFC1766]).

Les valeurs d'attributs doivent être des identificateurs ou des chaînes de caractères. La sensibilité à la casse des noms d'attributs et de leurs valeurs dépend du langage de documents.

Exemple(s):

Par exemple, le sélecteur suivant représente un élément h1 portant l'attribut title, quelque soit sa valeur:

h1[title]
Exemple(s):

Dans l'exemple suivant, le sélecteur représente un élément span dont l'attribut class a exactement la veleur "exemple":

span[class=exemple]
Plusieurs sélecteurs d'attribut peuvent être utilisés pour représenter plusieurs attributs d'un élément, ou plusieurs fois le même attribut.

Exemple(s):

Ici, le sélecteur représente un élément span dont l'attribut hello a exactement la valeur "Cleveland" et dont l'attribut goodbye a exactement la valeur "Columbus":

span[hello="Cleveland"][goodbye="Columbus"]
Exemple(s):

Les sélecteurs suivants illustrent les différences entre "=" et "~=". Le premier sélecteur représentera, par exemple, la valeur "copyright copyleft copyeditor" pour l'attribut rel. Le second sélecteur représentera uniquement un élément a dont l'attribut href a exactement la veleur "http://www.w3.org/".

a[rel~="copyright"]
a[href="http://www.w3.org/"]
Exemple(s):

Le sélecteur suivant représente un élément quelconque dont l'attribut lang a la valeur "fr" (p.ex. dont la langue est le Français).

*[lang=fr]
Exemple(s):

Le sélecteur qui suit représente un élément quelconque dont l'attribut lang a une valeur commençant par "en", par exemple "en", "en-US" ou "en-cockney":

*[lang|="en"]
Exemple(s):

De même, les sélecteurs qui suivent représentent un élément DIALOGUE ayant deux valeurs différentes pour le même attribut character:

DIALOGUE[character=romeo] 

DIALOGUE[character=juliet]

6.3.2 Sélecteurs de sous-chaîne dans la valeur d'un attribut

Trois différents sélecteurs d'attribut sont disponibles pour la représentation d'une séquence dans la valeur d'un attribut :

[att^="val"]
Représente l'attribut att, sa valeur commençant exactement par le préfixe "val"
[att$=ident]
Représente l'attribut att, sa valeur finissant exactement par le préfixe "ident"
[att*="val"]
Représente l'attribut att, sa valeur contenant au moins une fois la sous-chaîne "val"

Les valeurs d'attributs doivent être des identificateurs ou des chaîne de caractères. La sensibilité à la casse des noms d'attributs et de leurs valeurs dépend du langage de documents.

Exemple(s) :

Le sélecteur suivant représente un élément HTML object, ciblant une image.

object[type^="image/"]

Le sélecteur suivant représente un élément XML foo1 portant l'attribut bar, la valeur de cet attribut finissant par "cpg".

foo1[bar$="cpg"]

Le sélecteur suivant représente un paragraphe HTML dont la valeur de l'attribut title contient la sous-chaîne "hello".

p[title*="hello"] 

6.3.3 Sélecteurs d'attribut et Espace de noms

Les sélecteurs d'attribut peuvent contenir un composant optionel d'espace de noms. Un préfixe correspondant à un espace de noms préalablement déclaré (via la règle-at @namespace) peut précéder le nom d'un attribut en les séparant par le séparateur d'espace de noms "|". En conformité avec la recommandation Namespaces in XML, les espaces de noms par défaut ne s'appliquent pas aux attributs, et les sélecteurs d'attributs sans composant d'espace de noms représentent donc seulement les attributs sans espace de noms déclaré (équivalent à "|attr"). Une étoile peut être utilisée comme composant d'espace de noms pour indiquer que le sélecteur représente tous les attributs sans considération d'espaces de noms.

Exemples CSS :

@namespace foo "http://www.foo.com";

[foo|att=val] { color: blue }

[*|att] { color: yellow }

[|att] { color: green }

[att] { color: green }
La première règle s'appliquera uniquement aux éléments portant l'attribut att dans l'espace de noms "http://www.foo.com" avec la valeur "val".

La second règle s'appliquera uniquement aux éléments portant l'attribut att sans considération d'espace de noms (incluant ceux sans espace de noms déclaré).

Les deux dernières règles sont équivalentes et s'appliqueront uniquement aux éléments portant l'attribut att sans déclaration d'espace de noms.

6.3.4 Valeurs d'attribut par défaut dans les DTDs

Les sélecteurs d'attribut représentent des valeurs d'attribut dans l'arbre documentaire. Des valeurs d'attribut par défaut peuvent être définies dans la DTD ou ailleurs. Les Sélecteurs W3C doivent être implémentés de manière à fonctionner même si les valeurs par défaut ne sont pas présentes dans l'arbre documentaire.

Exemple(s):

Par exemple, considérons un élément EXAMPLE avec un attribut notation ayant la valeur par défaut "decimal". Le fragment de DTD pourrait être:

<!ATTLIST EXAMPLE notation (decimal,octal) "decimal">
Si les sélecteurs suivants représentent un élément EXAMPLE dont la valeur de l'attribut notation est explicitement définie
EXAMPLE[notation=decimal]
EXAMPLE[notation=octal]
on pourra utiliser le sélecteur qui suit pour représenter le cas où l'attribut est défini par défaut, et non explicitement:
EXAMPLE

6.4 Sélecteurs de classe

En HTML, les auteurs peuvent utiliser la notation point (.) comme alternative à la notation ~= notation dans le cas de l'attribut class. En HTML, div.value et div[class~=value] ont donc la même signification. La valeur de l'attribut doit suivre immédiatement le ".".

Exemple(s):

On pourra représenter un élément quelconque portant class~="pastoral" de la manière suivante:

*.pastoral
ou tout simplement
.pastoral
Le sélecteur suivant représente un élément h1 portant class~="pastoral":
h1.pastoral
Exemple(s):

Le sélecteur suivant représente un élément p dont l'attribut class contient une liste de valeurs séparées par des espaces et contenant "pastoral" et "marine":

p.pastoral.marine

Il est absolument identique à :

p.marine.pastoral

Ce sélecteur représente par exemple un élément p avec class="pastoral blue aqua marine" ou class="marine blue pastoral aqua" mais pas avec class="pastoral blue".

6.5 Sélecteurs d'ID

Les langages de documents peuvent contenir des attributs qui sont déclarés être de type ID. Les attributs de type ID sont spéciaux en ce sens que deux tels attributs ne peuvent pas avoir la même valeur dans un document, sans considération du type des éléments qui les portent ; quelque soit le langage, un attribut ID peut être utilisé pour identifier de façon unique les éléments. En HTML, tous les attributs ID sont nommés "id" ; les applications XML peuvent nommer les attributs ID différemment, mais avec les mêmes contraintes.

L'attribut ID d'un langage de documents permet aux auteurs d'assigner un identificateur à une instance d'élément dans l'arbre documentaire. Les sélecteurs W3C d'ID représentent une instance d'élément en se basant sur son identificateur. Un sélecteur d'ID contient un "#" immédiatement suivi de la valeur d'ID.

Exemple(s):

Le sélecteur d'ID qui suit représente un élément h1 dont l'attribut id a la valeur "chapter1" :

h1#chapter1

Le sélecteur d'ID ci-dessous représente tout élément dont l'attribut id a la valeur "chapter1" :

#chapter1
Le sélecteur d'ID suivant représente tout élément dont l'ID a la valeur "z98y".
*#z98y
Note. En XML 1.0 [XML10], l'information déterminant quels attributs contiennent les IDs d'éléments est contenue dans une DTD. Lors du parsing XML, les Agents Utilisateurs ne lisent pas toujours la DTD, and peuvent donc ne pas savoir ce qu'st l'ID d'un élément. Si un auteur de feuille de styles sait ou soupçonne que tel est le cas, il doit alors plutôt utiliser les sélecteurs d'attributs usuels : [name=p371] au lieu de #p371. Bien entendu, les éléments de documents XML 1.0 sans DTD n'ont pas d'ID du tout.

6.6 Pseudo-classes

Le concept de pseudo-classe est introduit pour permettre une sélection basée sur des informations qui résident à l'extérieur de l'arbre documentaire ou qui ne peuvent pas être exprimées à l'aide des autres sélecteurs simples.

Une pseudo-classe contient toujours deux-points (:) suivis du nom de la pseudo-classe et optionnellement d'une valeur entre parenthèses.

Les pseudo-classes sont autorisées dans toutes les séquences de sélecteurs simples contenues dans un sélecteur. Les pseudo-classes sont autorisées partout dans une séquence de sélecteurs simples, après le sélecteur de type ou le sélecteur universel (éventuellement omis) initial. Les noms des pseudo-classes sont insensibles à la casse. Quelques pseudo-classes sont mutuellement exclusives, alors que d'autres peuvent être appliquées simultanément au même élément. Des pseudo-classes peuvent être dynamiques, en ce sens qu'un élément peut acquérir ou perdre une pseudo-classe lorsqu'un usager interagit avec le document.

6.6.1 Pseudo-classes dynamiques

Les pseudo-classes dynamiques classent les éléments selon des caractéristiques autres que le nom, les attributs ou le contenu, caractéristiques qui en principe ne peuvent pas être déduites de l'arbre documentaire.

Les pseudo-classes dynamiques n'apparaissent pas dans le source du document ni dans l'arbre documentaire.

Les pseudo-classes de liens : :link et :visited

Les Agents Utilisateurs restituent les liens non visités différemment des liens visités. Les Sélecteurs W3C offrent les pseudo-classes :link et :visited pour les distinguer :

Note. Après un certain délai, les Agents Utilisateurs peuvent choisir de ramener un lien à l'état (non visité) ':link'.

Les deux états sont mutuellement exclusives.

Exemple(s):

Le sélecteur suivant représente des liens portant la classe external et déjà visités :

a.external:visited
Les pseudo-classes d'action usager :hover, :active, and :focus

Les Agents Utilisateurs interactifs changent parfois la restitution en réponse à des actions de l'usager. Les Sélecteurs W3C offrent trois pseudo-classes pour la sélection d'un élément sur lequel l'usager agit.

Seuls les éléments dont la propriété 'user-input' (Cf. [UI]) a pour valeur "enabled" peuvent devenir :active ou acquérir :focus.

Ces pseudo-classes ne sont pas mutuellement exclusives. Un élément peut déclencher plusieurs d'entre elles en même temps.

Exemple(s):
a:link    /* liens non visites */
a:visited /* liens visites     */
a:hover   /* survol            */
a:active  /* liens actifs      */

Exemple(s):

Un exemple de pseudo-classes dynamiques combinées :

a:focus
a:focus:hover

Le dernier sélecteur représente les éléments A qui ont la pseudo-classe :focus et la pseudo-classe :hover.

Note. Un élément peut être à la fois ':visited' et ':active' (ou ':link' et ':active').

6.6.2 La pseudo-classe :target

Certains URIs se réfèrent à un point bien déterminé dans une ressource. Ce type d'URI se termine par "#" suivi par un identificateur d'ancre (appelé l'identificateur de fragment).

Les URIs avec un identificateur de fragment ciblent un élément donné dans le document, appelé élément cible. Par exemple, voici un URI ciblant une ancre nommée section_2 dans un document HTML :

http://somesite.com/html/top.html#section_2

Un élément cible peut être représenté par la pseudo-classe:target :

p.bar:target

représente un élément p de classe bar qui est la cible deURI.

Exemple CSS d'usage de la pseudo-classe :target :
*:target { color : red }

*:target:before { content : url(target.png) }

6.6.3 La pseudo-classe :lang

Si le langage de documents spécifie comment est déterminée la langue humaine d'un élément, il est possible d'écrire des sélecteurs qui représentent un élément sur la base de sa langue. Par exemple, en HTML [HTML40], la langue est déterminée par la combinaison de l'attribut lang, de l'élément meta, et potentiellement d'informations venant du protocole (comme les en-têtes HTTP). XML utilise un attribut appelé XML:LANG, et il peut y avoir d'autres méthodes spécifiques au langage de documents pour déterminer la langue.

La pseudo-classe :lang(C) représente un élément dans la langue C. C est ici un code linguistique comme spécifié par HTML 4.0 [HTML40] et RFC 1766 [RFC1766]. Il est sélectionné de la même manière que par le sélecteur d'attribut linguistique [att |= "C"].

Exemple(s):

Les deux premiers sélecteurs ci-dessous représentent un document HTML qui est en Français ou en Allemand. Les deux sélecteurs suivants représentent des citations q contenues dans un élément quelconque dont la langue est le Français ou l'Allemand.

html:lang(fr)
html:lang(de)
:lang(fr) > q
:lang(de) > q

6.6.4 Les pseudo-classes d'état d'élément d'inteface

Les pseudo-classes :enabled et :disabled

La pseudo-classe :enabled permet aux auteurs de modifier le style des éléments d'interface qui sont actifs - que l'utilisateur peut sélectionner/activer d'une manière ou d'une autre (par exemple en cliquant sur un bouton avec la souris). Une telle pseudo-classe est utile parce qu'il est autrement impossible de spécifier programmatiquement l'apparence par défaut de disons un élément input actif sans spécifier également son allure s'il est inactif.

Parallèlement à :enabled, :disabled permet aux auteurs de spécifier exactement comment un élément d'interface inactif ou inactivé doit être restitué.

Notez que la plupart des éléments ne sont ni actifs ni inactifs. Un élément est actif si l'utilisateur peut l'activer ou lui transférer le focus. Un élément est inactif s'il peut être actif, mais que l'utilisateur ne peut à ce moment précis l'activer ou lui transférer le focus.

La pseudo-classe :checked

La pseudo-classe :checked ne s'applique aux éléments qui ont 'user-input: enabled' ou 'user-input : disabled' (voyez [UI] à propos de la propriété 'user-input'). L'utilisateur peut changer l'état des éléments radio et cases à cocher. Quelques entrées de menu sont "cochées" quand l'utilisateur les sélectionne. Quand de tels éléments passent dans l'état "allumé", la pseudo-classe :checked s'applique. La pseudo-classe :checked s'applique initialement à de tels éléments qui possèdent l'attribut HTML4 selected tels que décrits dans la Section 17.2.1 de HTML4, mais bien entendu l'utilisateur peut faire passer à "éteint" ces éléments auquel car la pseudo-classe :checked ne s'applique plus. Alors que la pseudo-classe :checked est dynamique par nature, et est modifiée par l'action de l'utilisateur, elle s'applique à tous les media puisqu'elle peut aussi se fonder sur la présence de l'attribut sémantique HTML4 selected.

La pseudo-classe :indeterminate

La pseudo-classe :indeterminate s'applique aux éléments qui ont 'user-input: enabled' ou 'user-input: disabled' (voyez [UI] à propos de la propriété 'user-input'). Les éléments radio et cases à cocher peuvent être changés d'état par l'utilisateur, mais sont parfois dans un état indéterminé, ni coché ni non-coché. Cela peut être causé par un attribut de l'élément, ou par une manipulation du DOM. La pseudo-classe :indeterminate s'applique à de tels éléments. Alors que la pseudo-classe :indeterminate est dynamique par nature, et est modifiée par l'action de l'utilisateur, elle s'applique à tous les media puisqu'elle peut aussi se fonder sur la présence de l'attribut sémantique HTML4 selected.

Les composants d'un radio-groupe sans choix pré-sélectionné sont un exemple d'état :indeterminate.

6.6.5 Les pseudo-classes structurelles

Les Sélécteurs W3C introduisent la notion de pseudo-classes structurelles qui permettent la sélection sur la base d'informations supplémentaires se trouvant dans l'arbre documentaire mais qui ne peuvent être représentées par d'autres sélecteurs simples ou par des combinateurs.

Veuillez noter que le texte seul PCDATA n'est pas compté lors du calcul de la position d'un élément dans la liste des enfants de son parent. Lors du calcul de la position d'un élément dans la liste des enfants de son parent, la numérotation commence à 1.

La pseudo-classe :root

La pseudo-classe :root représente un élément qui est la racine du document. En HTML 4, il s'agit de l'élément html. En XML, c'est ce qui est spécifié par la DTD, le schéma, l'espace de noms pour le document XML en question.

La pseudo-classe :nth-child()

La notation de pseudo-classe :nth-child(an+b) représente un élément qui a an+b-1 éléments frères devant lui dans l'arbre documentaire, pour une valeur entière positive ou nulle de n. En d'autres mots, cela sélectionne chaque b-ième fils d'un élément après que tous ses enfants aient été séparés en groupes de a éléments chacun. Par exemple, cela permet de sélectionner les lignes paires dans un tableau, et peut être utilisé, par exemple, pour alterner la couleur du texte d'un paragraphe sur quatre couleurs. Les valeurs de a et b doivent être des entiers négatifs, positifs ou nuls. L'index du premier enfant d'un élément esr 1.

De plus, :nth-child() peut prendre pour argument 'odd' et 'even'. 'odd' a la même signification que 2n+1, et 'even' a la même signification que 2n.

Exemples:
tr:nth-child(2n+1) /* represents every odd row of a HTML table */
tr:nth-child(odd)  /* same */
tr:nth-child(2n)   /* represents every even row of a HTML table */
tr:nth-child(even) /* same */

/* Alternate paragraph colours in CSS */
p:nth-child(4n+1) { color: navy; }
p:nth-child(4n+2) { color: green; }
p:nth-child(4n+3) { color: maroon; }
p:nth-child(4n+4) { color: purple; }

Lorsque a=0, il n'y a pas de répétition, et donc par exemple :nth-child(0n+5) représente uniquement le cinquième enfant. Quand a=0, la partie a n'est pas obligatoire, et la syntaxe se simplifie alors en :nth-child(b), l'exemple précédent devenant :nth-child(5).

Autres exemples:

foo:nth-child(0n+1)   /* represents an element foo, first child of its parent element */
foo:nth-child(1)      /* same */

Quand a=1, le nombre peut être omis.

Les exemples suivants sont donc équivalents :

bar:nth-child(1n+0)   /* represents all bar elements, specificity (0,1,1) */
bar:nth-child(n+0)    /* same */
bar:nth-child(n)      /* same */
bar                   /* same but lower specificity (0,0,1) */
Si b=0, alors tous les éléments dont l'index est multiple de a sont sélectionnés.
Par exemple :
tr:nth-child(2n) /* represents every even row of a HTML table */

Si a et b sont tous deux égaux à 0, la pseudo-classe ne représente aucun élément dans l'arbre documentaire.

La valeur a peut être négative, mais seules les valeurs positives de an+b, pour n=0, peuvent représenter un élément dans l'arbre documentaire, bien entendu.

Par exemple:

html|tr:nth-child(-n+6)  /* represents the 6 first rows of XHTML tables */
La pseudo-classe :nth-last-child()

La notation de pseudo-classe :nth-last-child(an+b) représente un élément qui an+b-1 frères après lui dans l'arbre documentaire, pour une valeur entière positive ou nulle de n. Voyez la pseudo-classe :nth-child() pour la syntaxe de son argument. Elle accepte également les valeurs 'even' et 'odd' pour argument.

Exemples:
tr:nth-last-child(-n+2)    /* represents the two last rows of a HTML table */

foo:nth-last-child(odd)    /* represents all odd foo elements in their parent element,
                              counting from the last one */
La pseudo-classe :nth-of-type()

La notation de pseudo-classe :nth-of-type(an+b) représente un élément qui a an+b-1 frères du même type d'élément devant lui dans l'arbre documentaire, pour une valeur entière positive ou nulle de n. En d'autres mots, cela sélectionne chaque b-ième fils du type d'élément donné d'un élément après que tous ses enfants aient été séparés en groupes de a éléments chacun. Voyez la pseudo-classe :nth-child() pour la syntaxe de son argument. Elle accepte également les valeurs 'even' et 'odd' pour argument.

Par exemple, cela permet en CSS d'alterner la position des images flotantes :
img:nth-of-type(2n+1) { float: right; }
img:nth-of-type(2n) { float: left; }
La pseudo-classe :nth-last-of-type()

La notation de pseudo-classe :nth-last-of-type(an+b) représente un élément qui a an+b-1 frères du même type d'élément après lui dans l'arbre documentaire, pour une valeur entière positive ou nulle de n. Voyez la pseudo-classe :nth-child() pour la syntaxe de son argument. Elle accepte également les valeurs 'even' et 'odd' pour argument.

Par exemple, pour représenter tous les h2 fils d'un élément XHTML body sauf le premier et le dernier, on pourra écrire le sélecteur suivant :
body > h2:nth-of-type(n+2):nth-last-of-type(n+2)

Dans ce cas, on peut aussi utiliser :not(), malgré que le sélecteur ne soit pas moins long :

body > h2:not(:first-of-type):not(:last-of-type) 
La pseudo-classe :first-child

Identique à :nth-child(1). La pseudo-classe :first-child représente un élément qui est le premier fils d'un autre élément.

Exemple(s):

Dans l'exemple qui suit, le sélecteur représente un élément p qui est le premier fils d'un élément div.

div > p:first-child
Ce sélecteur peut représenter un p à l'intérieur d'un div du fragment suivant ::
<p> The last P before the note.</p>
<div class="note">
   <p> The first P inside the note.</p>
</div>
mais ne peut pas représenter le second p du fragment suivant :
<p> The last P before the note.</p>
<div class="note">
   <h2>Note</h2>
   <p> The first P inside the note.</p>
</div>
Les deux sélecteurs qui suivent sont équivalents :
* > a:first-child   /* a is first child of any element */
a:first-child       /* Same */
La pseudo-classe :last-child

Identique à :nth-last-child(1). La pseudo-classe :last-child pseudo-class représente un élément qui est le dernier fils d'un autre élément.

Exemple:

Le sélecteur suivant représente une entrée de liste li qui est le dernier enfant d'une liste ordonnée ol.

ol li:last-child
La pseudo-classe :first-of-type

Identique à :nth-of-type(1). La pseudo-classe :first-of-type pseudo-class représente un élément qui est le premier enfant de son type dans la liste des enfants de son élément parent.

Exemple:

Le sélecteur qui suit représente un titre de définition dt à l'intérieur d'une liste de définitions dl, cette dt étant le premier enfant de son type dans la liste des enfants de l'élément parent.

dl dt:first-of-type
C'est une description valide pour les deux premiers dt dans l'exemple qui suit mais pas pour le troisième ::
<dl><dt>gigogne</dt>
        <dd><dl><dt>fus&eacute;e</dt>
                    <dd>multistage rocket</dd>
                <dt>table</dt>
                    <dd>nest of tables</dd>
            </dl></dd>
</dl>
La pseudo-classe :last-of-type

Identique à :nth-last-of-type(1). La pseudo-classe :last-of-type pseudo-class représente un élément qui est le premier enfant de son type dans la liste des enfants de son élément parent.

Exemple:

Le sélecteur suivant représente la dernière cellule de données td d'une ligne de tableau..

tr > td:last-of-type
La pseudo-classe :only-child

Représente un élément qui n'a aucun frère. Identique à :first-child:last-child ou :nth-child(1):nth-last-child(1), mais avec une spécificité inférieure.

La pseudo-classe :only-of-type

Représente un élément qui n'a pas de frère avec le même nom d'élément. Identique à :first-of-type:last-of-type or :nth-of-type(1):nth-last-of-type(1), mais avec une spécificité inférieure.

:empty pseudo-class

La pseudo-classe empty représente un élément qui n'a aucun enfant, y compris les noeuds textuels.

Exemples:

p:empty est une représentation valide du fragment ci-dessous :

<p></p>

foo:empty n'est pas une représentation valide des fragments ci-dessous :

<foo>bar</foo>
<foo><bar>bla</bar></foo>
<foo>this is not <bar>:empty</bar></foo>

6.6.6 La pseudo-classe de contenu

La notation de pseudo-classe :contains("foo") représente un élément dont le contenu textuel contient la sous-chaîne donnée. L'argument de cette pseudo-classe peut être une chaîne de caractères (entourée par des guillemets) ou un mot-clé.

L'usage de la pseudo-classe de contenu est restreint aux media statiques.

Le contenu textuel d'un élément donné est déterminé par la concaténation de tous les PCDATA contenus dans l'élément et ses sous-éléments.

Exemple:
p:contains("Markup")
est une description correcte et valide, mais partielle, de :
<p><strong>H</strong>yper<strong>t</strong>ext
   <strong>M</strong><em>arkup</em>
   <strong>L</strong>anguage</p>

Des caracatères spéciaux peuvent être insérés dans l'argument de la pseudo-classe de contenu par usage du mécanisme d'échappement pour les caractères Unicode et caractères spéciaux.

Note : :contains() est une pseudo-classe, pas un pseudo-élément. La règle CSS suivante appliquée au fragment HTML ci-dessus n'ajoutera pas un fond rouge au seul mot "Markup" mais ajoutera ce fond à tout le paragraphe.
P:contains("Markup") { background-color : red }

6.6.7 La pseudo-classe de negation

La pseudo-classe de négation est une notation fonctionnelle prenant un sélecteur simple (à l'exclusion de la pseudo-classe de négation elle-même) pour argument. Elle représente un élément qui n'est pas représenté par l'argument.

Exemple(s) :

Le sélecteur CSS suivant sélectionne tous les éléments button qui ne sont pas désactivés dans un document HTML :

button:not([DISABLED])

Le sélecteur suivant représente tous les éléments sauf les éléments FOO :

*:not(FOO)

Le groupe de sélecteurs suivant représente tous les éléments sauf les liens HTML :

html|*:not(:link):not(:visited)

Note: la pseudo-classe :not() permet d'écrire des sélecteurs inutiles. Par exemple, :not(*|*), qui ne représente aucun élément du tout, or foo:not(bar), qui est équivalent à foo mais avec une spécificité supérieure.

7. Pseudo-éléments

Les pseudo-éléments créent des abstractions hors de l'arbre documentaire qui ne sont pas spécifiables par le langage de documents. Par exemple, les langages de documents n'offrent aucun moyen d'accéder à la première lettre ou la première ligne du contenu d'un élément. Les pseudo-éléments permettent aux auteurs de se référer à ces données inaccessibles autrement. Les pseudo-éléments peuvent aussi fournir aux auteurs un moyen de se référer à du contenu qui n'existe pas dans le source du document (par exemple, les pseudo-éléments :before et :after donnent accés au contenu généré).

Un pseudo-élément est formé de deux deux-points (::) suivis du nom du pseudo-élément.

Attention : cette notation :: est introduite par le présent document dans le but d'établir une discrimination entre les pseudo-classes et les pseudo-éléments. Pour des raisons de compatibilité avec les feuilles de styles existantes, les Agents Utilisateurs doivent aussi accepter la notation précédente avec un seul deux-points. Cepedant cette compatibilité n'est pas requise pour les nouveaux pseudo-élémentsp introduits dans CSS level 3.

Les pseudo-éléments peuvent apparaître une fois seulement dans la séquence de sélecteurs simples représentant les sujets du sélecteur.

Les noms des pseudo-éléments sont insensibles à la casse.

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

Le pseudo-élément ::first-line décrit la première ligne formatée d'un élément.

Par exemple en CSS :

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

La règle ci-dessus signifie "changer les lettres de la première ligne de chaque paragraphe en majuscules". Cependant, le sélecteur p::first-line ne sélectionne aucun élément HTML réel. Il sélectionne un pseudo-élément que les Agents Utilisateurs conformes vont insérer au début de chaque paragraphe.

Veuillez noter que la longueur de la première ligne dépend d'un grand nombre de facteurs, y compris de la largeur de la page, la taille de fonte, etc. Ainsi, dans un paragraphe HTML ordinaire tel que :

<p>This is a somewhat long HTML 
paragraph that will be broken into several 
lines. The first line will be identified
by a fictional tag sequence. The other lines 
will be treated as ordinary lines in the 
paragraph.</p>
les lignes qui seront découpées de la manière suivante :
THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT
will be broken into several lines. The first
line will be identified by a fictional tag 
sequence. The other lines will be treated as 
ordinary lines in the paragraph.
peuvent être "réécrites" par les Agents Utilisateurs pour y inclure la séquence de balises fictives pour ::first-line. Cette séquence de balises fictives aide à montrer comment les propriétés sont héritées.
<p><p::first-line> This is a somewhat long HTML 
paragraph that will </p::first-line> be broken into several
lines. The first line will be identified 
by a fictional tag sequence. The other lines 
will be treated as ordinary lines in the 
paragraph.</p>

Si un pseudo-element scinde un élément réel, l'effet désiré peut souvent être décrit par une séquence de balises fictives qui ferme et ré-ouvre l'élément. Ainsi, si l'on balise le paragraphe précédent avec un élément span :

<p><span class="test"> This is a somewhat long HTML
paragraph that will be broken into several
lines.</span> The first line will be identified
by a fictional tag sequence. The other lines 
will be treated as ordinary lines in the 
paragraph.</p>
l'Agent Utilisateur pourra générer les balises de début et de fin appropriées pour span lors de l'insertion de la séquence de balises fictives pour ::first-line.
<p><p::first-line><span class="test"> This is a
somewhat long HTML
paragraph that will </span></p::first-line><span class="test"> be
broken into several
lines.</span> The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the 
paragraph.</p>

Le pseudo-élément ::first-line ne peut être attaché qu'à des éléments de niveau bloc.

Le pseudo-élément ::first-line est similaire à un élément de niveau flot de texte, mais avec certaines restrictions, en fonction de l'usage. Seules les propriétés suivantes s'appliquent aux pseudo-éléments ::first-line : propriétés de fontes, propriétés de couleurs, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow', et 'clear'.

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

Le pseudo-élément ::first-letter la première lettre formatée d'un élément.

Le pseudo-élément ::first-letter peut être attaché à tout élément.

Le pseudo-élément ::first-letter peut être utilisé pour des "initiales en capitales" et des "lettrines", qui sont des effets typographiques usuels. Ce type de lettre initiale est similaire à un élément de niveau flot de texte si sa propriété CSS 'float' a pour valeur 'none', mais avec certaines restrictions, en fonction de l'usage. Autrement, il est similaire à un élément flottant.

Voici les propriétés CSS qui s'appliquent aux pseudo-éléments ::first-letter : propriétés de fontes, propriétés de couleurs, propriétés de fonds, 'text-decoration', 'vertical-align' (seulement si 'float' est 'none'), 'text-transform', 'line-height', propriétés de marges externes, propriétés de marges internes, propriétés de cadres, 'float', 'text-shadow', et 'clear'.

L'exemple CSS 2 suivant génèrera une initiale "lettrine" courant sur deux lignes :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
 <HEAD>
  <TITLE>Drop cap initial letter</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>The first</SPAN> few words of an article
    in The Economist.</P>
 </BODY>
</HTML>

Cet exemple pourra être formaté de la manière qui suit :

Image illustrating the combined effect of the :first-letter and :first-line pseudo-elements

La séquence de balises fictives est :

<P>
<SPAN>
<P::first-letter>
T
</P::first-letter>he first
</SPAN> 
few words of an article in the Economist.
</P>

Veuillez noter que les balises du pseudo-élément ::first-letter entourent le contenu (i.e. le caractère initiale), alors que la balise de début de ::first-line est insérée immédiatement la balise de début de l'élément auquel il est attaché.

Pour réaliser le formatage traditionnel des "lettrines", les Agents Utilisateurs pourront approximer les tailles de fontes, par exemple pour aligner les lignes de base. De même, le contour des glyphes peut être pris en compte lors du formatage.

Les ponctuations (c'est-à-dire les caractères définis dans Unicode [UNICODE] dans les classes de ponctuation "open" (Ps), "close" (Pe), et "other" (Po)), qui précèdent la première lettre doivent être incluses, comme dans :

Quotes that precede the
first letter should be included.

Le pseudo-élément ::first-letter sélectionne des parties d'élément seulement.

Quelques langues ont des règles spécifiques de traitement de certaines combinaisons de lettres. En Néerlandais, par exemple, si la combinaison de lettres "ij" apparait en début de mot, les deux lettres doivent être prises en compte dans le pseudo-élément ::first-letter.

L'exemple suivant illustre comment des pseudo-éléments superposés peuvent interagir. La première lettre de chaque élément P sera verte avec une taille de fonte de '24pt'. Le reste de la première ligne formatée sera 'blue' alors que le reste du paragraphe sera 'red'.

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

<P>Some text that ends up on two lines</P>

En supposant qu'un saut de ligne se produira avant le mot "ends", la séquence de balises fictives pour ce fragment pourra alors être:

<P>
<P::first-line>
<P::first-letter> 
S 
</P::first-letter>ome text that 
</P::first-line> 
ends up on two lines 
</P>

Veuillez noter que les éléments ::first-letter se trouvent à l'intérieur de l'élément ::first-line. Les propriétés assignées à ::first-line sont héritées par ::first-letter, mais sont surclassées si la même propriété est assignée à ::first-letter.

7.3 Les pseudo-éléments fragments d'éléments d'interface

Le pseudo-élément ::selection

Le pseudo-élément ::selection s'applique à la portion du document qui a été mise en exergue par l'utilisateur. Cela s'applique aussi, par exemple, au texte sélectionné dans un champ de texte éditable. Seuls les éléments qui ont une propriété 'user-select' différente de 'none' peuvent avoir un ::selection. Ce pseudo-élément ne doit pas être confondu avec la pseudo-classe :checked (qui s'appelait auparavant :selected).

Malgré que le pseudo-élément ::selection soit dynamique par nature, et soit modifié par l'action de l'utilisateur, il est raisonnable de s'attendre à ce que, quand un Agent Utilisateur re-restitue sur un medium statique (comme une page imprimée) ce qui était initialement restitué sur un medium dynamique (comme un écran), l'Agent Utilisateur puisse souhaiter transférer la ::selection courante à cet autre medium, at disposer de tout le formatage et la restitution appropriés également. Cela n'est pas requis - certains Agents Utilisateurs peuvent omettre le pseudo-élément ::selection pour les media statiques.

Voici les propriétés CSS qui s'appliquent aux pseudo-éléments ::selection : couleur, fond, contour. La couleur de 'background-image' sur ::selection peut être ignorée.

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

Les pseudo-éléments ::before et ::after peuvent être utilisés pour décrire du contenu généré devant ou après le contenu d'un élément. Ils sont expliqués dans le Module CSS 3 Contenu Généré et Marqueurs (module 14).

Quand les pseudo-éléments ::first-letter et ::first-line sont combinés avec ::before et ::after, ils 'appliquent à la première lettre iy ligne de l'élément y compris le texte inséré.

8. Combinateurs

8.1 Combinateur de descendance

Parfois, les auteurs veulent des sélecteurs pour décrire un élément qui est le descendant d'un autre élément dans l'arbre documentaire (par exemple "un élément EM qui est contenu dans un élément H1") . Les combinateurs de descendance expriment ce type de relation. Un combinateur de descendance est un espace séparant deux séquences de sélecteurs simples. Un sélecteur de la forme "A B" représente un élément B qui est un descendant quelconque d'un élément ancêtre A.

Exemple(s):

Par exemple, considérons le sélecteur suivant :

h1 em
C'est une description correcte et valide, mais partielle, du fragment suivant :
<h1>This <span class="myclass">headline 
is <em>very</em> important</span></h1>
Le sélecteur suivant :
div * p
représente un élément p qui est le petit-fils ou un descendant ultérieur d'un élément div. Veuillez noter les espaces entourant le "*".

Le sélecteur sui suit, qui combine des sélecteurs de descendance et des sélecteurs d'attributs, représente un élement qui (1) possède l'attribut href assigné (2) est à l'intérieur d'un p lui-même dans un div.

div p *[href]

8.2 Combinateur filial

Un combinateur filial décrit une relation de filiation entre deux éléments. Un combinateur filial est composé du caractère ">" et sépare deux séquences de sélecteurs simples.

Exemple(s):

Le sélecteur suivant représente un élément p qui est le fils de body :

body > p

Exemple(s):

L'exemple qui suit combine des combinateurs de descendance et des combinateurs filiaux :

div ol>li p

Il représente un élément p qui est le descendant d'un li ; l'élément li doit être le fils d'un élément ol ; l'élément ol doit être le descendant d'un div. Veuillez noter que les espaces optionnels autour du ">" ont été omis.

Pour toute information sur la sélection du premier fils d'un élément, veuillez s'il-vous-plait voir la section sur la pseudo-classe :first-child ci-dessus.

8.3 Combinateurs d'adjacence

Il y a deux différents combinateurs d'adjacence : le combinateur d'adjacence directe et le combinateur d'adjacence indirecte.

8.3.1 Combinateur d'adjacence directe

Les combinateurs d'adjacence directe sont composés du caractère "+" séparant deux séquences de sélecteurs simples. Les éléments représentés par les deux séquences partagent le même parent dans l'arbre documentaire et l'élément représenté par la première séquence précède immédiatement l'élément représenté par la seconde.

Exemple(s):

Ainsi, le sélecteur suivant représente un élément p suivant immédiatement un élement math :

math + p
Exemple(s):

Le sélecteur suivant est conceptuellement similaire à celui de l'exemple précédent, à ceci près qu'il ajoute un sélecteur d'attribut. Ainsi, il ajoute une contrainte à l'élément h1 qui doit avoir class="opener" :

h1.opener + h2

8.3.2 Combinateur d'adjacence indirecte

Les combinateurs d'adjacence indirecte sont composés du caractère "~" séparant deux séquences de sélecteurs simples. Les éléments représentés par les deux séquences partagent le même parent dans l'arbre documentaire et l'élément représenté par la première séquence précède (pas nécessairement immédiatement) l'élément représenté par la seconde.

Exemple(s):
h1 ~ pre
représente un élément pre suivant un h1. C'est une description correcte et valide, mais partielle, de :
<h1>Definition of the function a</h1>
<p>Function a(x) has to be applied to all figures in the table.</p>
<pre>function a(x) = 12x/13.5</pre>

9. Calcul de la spécificité d'un sélecteur

La spécificité d'un sélecteur se calcule de la manière suivante :

La concaténation des trois nombres a-b-c (dans un système de numération avec une grande base) fournit la spécificité.

Exemple(s):

Quelques exemples:

*               /* a=0 b=0 c=0 -> specificity =   0 */
LI              /* a=0 b=0 c=1 -> specificity =   1 */
UL LI           /* a=0 b=0 c=2 -> specificity =   2 */
UL OL+LI        /* a=0 b=0 c=3 -> specificity =   3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red    /* a=0 b=1 c=3 -> specificity =  13 */ 
LI.red.level    /* a=0 b=2 c=1 -> specificity =  21 */
#x34y           /* a=1 b=0 c=0 -> specificity = 100 */ 
#s12:not(FOO)   /* a=1 b=0 c=1 -> specificity = 101 */

Note: la spécificité des styles spécifiés dans un attribut HTML style est décrite dans le module CSS 3 "Cascade et Héritage".

10. La grammaire des sélecteurs W3C

10.1 Grammaire

La grammaire ci-dessous définit la syntaxe des sélecteurs W3C. Elle est globalement LL(1) et peut être localement LL(2) (mais veuillez noter que la plupart des Agents Utilisateurs ne devraient pas l'utiliser directement, car elle n'exprime pas les conventions d'analyse). Le format des productions est optimisé pour la compréhension humaine et quelques notations raccourcies de Yacc (voyez [YACC]) sont utilisées :

Les productions sont :

selectors_group
  : selector [ ',' S* selector ]*
  ;

selector
  /* there is at least one sequence of simple selectors in a */
  /* selector and the pseudo-elements occur only in the last */
  /* sequence ; only pseudo-element may occur */
  : [ simple_selector_sequence combinator ]* 
       simple_selector_sequence [ pseudo_element ]?
  ;

combinator
  /* combinators can be surrounded by whitespace */
  : S* [ '+' | '>' | '~' | /* empty */ ] S*
  ;

simple_selector_sequence
  /* the universal selector is optional */
  : [ type_selector | universal ]?
        [ HASH | class | attrib | pseudoclass | negation ]+ |
    type_selector | universal
  ;

type_selector
  : [ namespace_prefix ]? element_name
  ;

namespace_prefix
  : [ IDENT | '*' ]? '|'
  ;

element_name
  : IDENT
  ;

universal
  : [ namespace_prefix ]? '*'
  ;

class
  : '.' IDENT
  ;

attrib
  : '[' S* [ namespace_prefix ]? IDENT S*
        [ [ PREFIXMATCH | 
            SUFFIXMATCH |
            SUBSTRINGMATCH |
            '=' |
            INCLUDES |
            DASHMATCH ] S* [ IDENT | STRING ] S*
        ]? ']'
  ;

pseudoclass
  /* a pseudo-class is an ident, or a function taking an */
  /* ident or a string or a number or a simple selector  */
  /* (excluding negation and pseudo-elements) */
  /* or a an+b expression for argument */
  : ':' [ IDENT | functional_pseudo ]
  ;

functional_pseudo
  : FUNCTION S* [ IDENT | STRING | NUMBER | 
                  expression | negation_arg ] S* ')'
  ;

expression
  :  [ [ '-' | INTEGER ]? 'n' [ SIGNED_INTEGER ]? ] | INTEGER
  ;

negation_arg
  : type_selector | universal | HASH | class | attrib | pseudoclass
  ;

pseudoelement
  : [ ':' ]? ':' IDENT
  ;

10.2 Analyseur lexical

Ci-dessous se trouve le tokenizer, écrit en notation Flex (voyez [FLEX]). Le tokenizer est insensible à la casse.

Les deux occurences de "\377" représetent le plus haut numéro de caractère que les versions actuelles de Flex sachent traiter (255 en décimal). Elles doivent être lues "\4177777" (1114111 en décimal), qui est le plus haut code possible dans Unicode/ISO-10646.

%option case-insensitive

h                       [0-9a-f]
nonascii                [\200-\377]
unicode                 \\{h}{1,6}[ \t\r\n\f]?
escape                  {unicode}|\\[ -~\200-\377]
nmstart                 [a-z]|{nonascii}|{escape}
nmchar                  [a-z0-9-]|{nonascii}|{escape}
string1                 \"([\t !#$%&(-~]|\\{nl}|\'|{nonascii}|{escape})*\"
string2                 \'([\t !#$%&(-~]|\\{nl}|\"|{nonascii}|{escape})*\'

ident                   {nmstart}{nmchar}*
name                    {nmchar}+
integer                 [-]?[0-9]+
signed_integer          [-+][0-9]+
num                     {integer}|[0-9]*"."[0-9]+
string                  {string1}|{string2}
nl                      \n|\r\n|\r|\f
%%

[ \t\r\n\f]+    {return S;}

\/\*[^*]*\*+([^/][^*]*\*+)*\/   /* ignore comments */

"~="                    {return INCLUDES;}
"|="                    {return DASHMATCH;}
"^="                    (return PREFIXMATCH;)
"$="                    (return SUFFIXMATCH;)
"*="                    (return SUBSTRINGMATCH;)
{string}                {return STRING;}
{ident}                 {return IDENT;}
{ident}"("              {return FUNCTION;}
{num}                   {return NUMBER;}
{signed_integer}        {return SIGNED_INTEGER;}
{integer]               {return INTEGER;}
"#"{name}               {return HASH;}

.                       {return *yytext;}

11. Espaces de noms et Outils de bas niveau

Une importante question ouverte est l'interaction entre les sélecteurs CSS et les documents XML dans les clients web qui ont été développés avant le présent document. Malheureusement, parce que les espaces de noms doivent être sélectionnées sur la base de l'URI qui identifie l'espace de noms, et pas sur la base du préfixe d'espace de noms, un mécanisme d'identification des espaces de noms par leur URI est aussi nécessaire en CSS. Sans un tél mécanisme, il est impossible de construire une feuille de styles CSS qui sélectionnera correctement dans tous les cas dans un ensemble quelconque de documents XML. Cependant, avec la connaissance complète du document XML sur lequel s'applique une feuille de styles, et avec un usage limité des espace de noms dans le document XML, il est possible de construire une feuille de styles dans laquelle les sélecteurs sélectionneront correctement les éléments et les attributs.

Il doit être noté qu'un outil CSS de bas niveau (s'il est correctement conforme aux règles d'analyse compatible ascendante CSS) ignore toutes les règles @namespace, de même que toutes les règles stylistiques qui font usage des sélecteurs de types ou sélecteurs d'attributs avec espaces de noms. La syntaxe de séparation des préfixes d'espaces de noms en CSS a été délibérément choisie pour que les outils CSS de bas niveau ignorent les règles stylistiques plutôt que de les sélectionner incorrectement.

L'usage de l'espace de noms par défaut en CSS rend possible l'écriture de sélecteurs de types d'élément qui fonctionneront tant dans les outils reconnaissant les espaces de noms que dans les outils de bas niveau. Il doit être noté que les outils de bas niveau peuvent sélectionner incorrectement des éléments XML dans d'autres espaces de noms.

Ci-dessous se trouvent des scenarii et exemples de construction de feuilles de styles qui fonctionneraient correctement dans des clients web n'implémentant pas la présent proposition.

  1. Le document XML n'utilise pas les espaces de noms.
  2. Le document XML définit un unique espace de noms par défaut utilisé dans tout le document. Il n'y a pas de préfixe d'espace de noms dans les noms d'éléments.
  3. Le document XML ne définit pas d'espace de noms par défaut, tous les préfixes d'espaces de noms sont connus de l'auteur de la feuille de styles et il y a un corrélation directe entre les préfixes d'espaces de noms et les URIs d'espaces de noms (un préfixe donné ne peut être associé qu'à un URI d'espace de noms à travers le document XML, il peut y avoir plusieurs préfixes associés au même URI).

Dans d'autres scenarii : quand les préfixes d'espaces de noms utilisés dans le XML ne sont pas connus d'avance de l'auteur de la feuille de styles ; ou qu'une combinaison d'éléments sans espaces de noms est utilisée en conjonction avec des éléments utilisant un espace de noms par défaut ; ou quand le préfixe d'espace de noms est associé à plusieurs URIs d'espaces de noms dans le même document, ou dans plusieurs documents ; il est impossible de construire une feuille de styles CSS qui fonctionnera correctement avec tous les éléments dans ces documents à moins que la feuille de styles ne soit écrite en utilisant une syntaxe d'URI d'espace de noms (comme signalé par ce document ou similairement) et que ce document soit traité par un client reconnaissant les espaces de noms CSS et XML.

12. Profils

Chaque spécification utilisant les Sélecteurs W3C doit définir le sous-ensemble des Sélecteurs W3C qu'elle accepte et exclut, et décrire la signification locale de chacun des composants de ce sous-ensemble.

Exemples non normatifs :

 
profil Sélecteurs W3C
Spécification CSS level 1
Accepte sélecteurs de types
sélecteurs de classes
sélecteurs d'ID
pseudo-classes :link, :visited et :active
combinateur de descendance
pseudo-éléments :first-line et :first-letter
Exclut

sélecteur universel
sélecteurs d'attributs
pseudo-classes :hover et :focus
pseudo-classe :target
pseudo-classe :lang()
toutes les pseudo-classes d'état d'élément d'interface
toutes les pseudo-classes structurelles
pseudo-classe :contains()
pseudo-classe de negation
tous les pseudo-éléments de fragments d'élément d'interface
les pseudo-éléments ::before et ::after
combinateur filial
combinateurs d'adjacence

espaces de noms

Contraintes supplémentaires un seul sélecteur de classe autorisé par séquence de sélecteurs simples

 
 
profil Sélecteurs W3C
Spécification CSS level 2
Accepte sélecteurs de types
sélecteur universel
sélecteurs de présence et de valeurs d'attributs
sélecteurs de classe
sélecteurs d'ID
pseudo-classes :link, :visited, :active, :hover, :focus, :lang() et :first-child
combinateur de descendance
combinateur filial
combinateur d'adjacence directe
pseudo-éléments ::first-line et ::first-letter
pseudo-éléments ::before et ::after
Exclut

Sélecteurs de sous-chaîne dans la valeur d'un attribut
pseudo-classe :target
toutes les pseudo-classes d'état d'élément d'interface
toutes les pseudo-classes structurellesautre que :first-child
pseudo-classe :contains()
pseudo-classe de négation
tous les pseudo-éléments de fragments d'élément d'interface
combinateur d'adjacence indirecte

espace de noms

Contraintes supplémentaires plus d'un sélecteur de classe autorisé par séquence de sélecteurs simples (contrainte CSS 1)

En CSS, les sélecteurs expriment des règles de sélection sur modèle qui déterminent quelles règles stylistiques s'appliquent aux éléments dans l'arbre documentaire.

Le sélecteur suivant (CSS level 2) sélectionnera toutes les ancres a portant un attribut href et étant à l'intérieur d'un titre de section de niveau 1 h1 :

h1 a[name]

Toutes les déclarations CSS attachées à un tel sélecteur s'appliqueront aux éléments le vérifiant.

Exemple non normatif :

 
profil Selecteurs W3C
Spécification STTS
Accepte

sélecteurs de types
sélecteur universel
sélecteurs d'attribut
sélecteurs de classes
sélecteurs d'ID
toutes les pseudo-classes structurelles
pseudo-classe :contains()
tous les combinateurs

espaces de noms

Exclut pseudo-classes non acceptées
pseudo-éléments
Contraintes supplémentaires quelques sélecteurs et combinateurs ne sont pas autorisés dans les descriptions de fragments dans la partie droite des déclarations STTS.

En STTS, les sélecteurs W3C peuvent être utilisés de deux différentes manières :

  1. un mécanisme de sélection équivalent à celui des CSS : les déclarations attachées à un sélecteur donné sont appliquées aux éléments vérifiant ledit sélecteur,
  2. des descriptions de fragments qui apparaissent sur la partie droite des déclarations.

13. Conformité et Critères de convergence

Cette section définit la conformité à la présente spécification.

L'incapacité d'un Agent Utilisateur à implémenter une partie de cette spécifications due aux limitations d'un périphérique particulier (par exemple, les Agents Utilisateurs non interactifs ne vont probablement pas implémenter les pseudo-classes dynamiques car elles ne n'ont pas de sens sans interactivité) n'implique pas la non-conformité.

Toute spécification réutilisant les Sélecteurs W3C doit contenir un Profil détaillant le sous-ensemble des Sélecteurs W3C qu'elle accepte et exclut, et décrivant les contraintes qu'elle ajoute à la présente spécification.

Les Agents Utilisateurs doivent respecter les règles de gestion des erreurs d'analyse :

14. Tests

Cette spécification contient une suite de tests permettants aux Agents Utilisateurs de vérifier leur conformité de base à cette spécification. Cette suite de tests ne prétend pas être exhaustive et ne couvre pas tous les usages combinés possibles des Sélecteurs W3C.

Ces tests sont disponibles [lien à venir].

15. Remerciements

Cette spécificiation est le produit du Groupe de Travail du W3C sur les Cascading Style Sheets et Propriétés de Formatage. S'ajoutant aux éditeurs de cette spécification, les membres du Groupe de Travail sont :

Plusieurs experts invités dans le Groupe de Travail ont contribué de manière significative aux CSS 3 : David. L Baron, Tim Boland (NIST), Todd Fahrner, Daniel Glazman, Ian Hickson, Eric Meyer (The OPAL Group), Jeff Veen.

Anciens membres du Groupe de Travail :

Nous les remercions tous (membres, experts invités et anciens membres) pour leurs efforts.

Bien entendu, ce document dérive des Recommandations CSS Level 1 et CSS Level 2. Nous remercions tous les auteurs, éditeurs et contributeurs de/aux CSS 1 et CSS 2.

Le Dr. Hasan Ali Çelik a suggéré la simple et puissante syntaxe de l'argument de :nth-child() alors que le Groupe de Travail s'orientait vers ses solutions bien plus complexes.

Les discussions tenues en www-style@w3.org ont eu beaucoup d'influence sur de nombreux points critiques. En particulier, nous voudrions remercier Ian Hickson, Ian Graham, David Baron, Björn Höhrmann, fantasai, Jelks Cabanis et Matthew Brealey pour leur participation active et utile.

16. Références

  1. [CSS1] Bert Bos, Håkon Wium Lie; "Cascading Style Sheets, level 1", W3C Recommendation, 17 Déc 1996, révisée 11 Jan 1999
    (http://www.w3.org/TR/REC-CSS1)
  2. [CSS2] Bert Bos, Håkon Wium Lie, Chris Lilley, Ian Jacobs, editors; "Cascading Style Sheets, level 2", W3C Recommandation, 12 Mai 1998
    (http://www.w3.org/TR/REC-CSS2)
  3. [UNICODE] "The Unicode Standard: Version 3.0.1", The Unicode Consortium, Addison Wesley Longman, 2000, ISBN 0-201-61633-5.
    URL: http://www.unicode.org/unicode/standard/versions/Unicode3.0.1.html.
    La dernière version de Unicode. Pour plus d'informations, consultez la page d'acceuil du Consortium Unicode en http://www.unicode.org/.
  4. [STTS3] Daniel Glazman ; "Simple Tree Transformation Sheets 3", Electricité de France, soumission au W3C, 11 Nov 1998
    (http://www.w3.org/TR/NOTE-STTS3)
  5. [ACTIONS] Vidur Apparao, Brendan Eich, Ramanathan Guha, Nisheeth Ranjan ; "Action Sheets : a Modular Way of Defining Behavior for XML and HTML", Netscape Communications Corp., soumission au W3C, 19 Juin 1998
    (http://www.w3.org/TR/NOTE-AS)
  6. [UI] Tantek Çelik, editor; "User Interface for CSS3", W3C Working Draft, 16 Février 2000
    (http://www.w3.org/TR/2000/WD-css3-userint-20000216)
  7. [NMSP] Peter Linss, editor; "CSS Namespace Enhancements (Proposal)", W3C Working Draft, 25 Juin 1999
    (http://www.w3.org/1999/06/25/WD-css3-namespace-19990625/)