Copyright ©2001 W3C (MIT, INRIA, Keio), tous droits réservés. Les règles du W3C sur la responsabilité, les marques de commerce, les droits d'auteur et les licences de logiciels sont applicables.
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.
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.
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.
Les principales différences entre les Sélecteur CSS 2 et les Sélecteurs W3C sont :
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".
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.
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.
Quand plusieurs sélecteurs sont associés aux mêmes déclarations, ils peuvent être groupés en les séparant par des virgules.
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.
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.
Le sélecteur suivant représente un élément h1 dans l'arbre du document :
h1
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é :
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.
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.
Le sélecteur universel peut contenir un composant optionel d'espace de noms
Les sélecteurs W3C permettent de représenter les attributs attachés à un élément.
Quatre différents sélecteurs d'attribut sont disponibles :
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.
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]
Trois différents sélecteurs d'attribut sont disponibles pour la représentation d'une séquence dans la valeur d'un attribut :
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"]
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.
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.
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
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 ".".
On pourra représenter un élément quelconque portant class~="pastoral" de la manière suivante:
*.pastoralou tout simplement
.pastoralLe sélecteur suivant représente un élément h1 portant class~="pastoral":
h1.pastoralExemple(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".
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.
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" :
#chapter1Le sélecteur d'ID suivant représente tout élément dont l'ID a la valeur "z98y".
*#z98y
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.
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 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 :
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 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.
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.
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.
*:target { color : red } *:target:before { content : url(target.png) }
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"]
.
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
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
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 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
.
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 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 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.
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.
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 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.
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 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.
img:nth-of-type(2n+1) { float: right; } img:nth-of-type(2n) { float: left; }
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.
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)
Identique à :nth-child(1)
. La pseudo-classe :first-child
représente un élément qui est le premier fils d'un autre
élément.
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-childCe 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 */
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.
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
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.
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-typeC'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ée</dt> <dd>multistage rocket</dd> <dt>table</dt> <dd>nest of tables</dd> </dl></dd> </dl>
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.
Le sélecteur suivant représente la dernière cellule de données td d'une ligne de tableau..
tr > td:last-of-type
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.
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.
La pseudo-classe empty représente un élément qui n'a aucun enfant, y compris les noeuds textuels.
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>
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.
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.
: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 }
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.
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.
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'.
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 :
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 :
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
.
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.
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é.
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
.
Par exemple, considérons le sélecteur suivant :
h1 emC'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 * prepré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]
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.
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.
Il y a deux différents combinateurs d'adjacence : le combinateur d'adjacence directe et le combinateur d'adjacence indirecte.
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.
Ainsi, le sélecteur suivant représente un élément
p
suivant immédiatement un élement math
:
math + pExemple(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
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.
h1 ~ prerepré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>
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é.
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".
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 ;
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;}
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.
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.
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 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 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 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 :
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 :
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].
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.