8000 csswg-drafts/selectors-3/Overview.fr.html at 3ef8f1c541dbfdc315864b6f4810fdb849588653 · simonwuelker/csswg-drafts · GitHub
Skip to content

Latest commit

 

History

History
executable file
·
2460 lines (2324 loc) · 130 KB

File metadata and controls

executable file
·
2460 lines (2324 loc) · 130 KB
<!doctype html public '-//W3C//DTD HTML 4.01 Transitional//EN'
'http://www.w3.org/TR/html4/loose.dtd'>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Language" content="en">
<title>CSS3 module: W3C Selectors</title>
<style type="text/css">
pre {
background-color: #d5d5d5;
margin: 1em 1cm;
padding: 0 0.3cm;
white-space: pre; /* for NS4 */
border: none; /* for NS4 */
font-size: 92%;
}
.code { font-family: monospace }
table.selectorsReview th { background: gray; color: white }
table.selectorsReview tr .pattern { width:20% ; font-family : monospace}
table.selectorsReview tr .meaning { width:45% }
table.selectorsReview tr .described { width:25% }
table.selectorsReview tr .origin { width : 10% ; text-align : center}
table.tprofile th.title { background: gray; color: white }
table.tprofile th { width:29% }
table.tprofile td { width:71% }
.toc,.subtoc ul,.subtoc ol { list-style-type: none }
.profile { margin: 1cm }
.editorNote { color: red; font-style: italic }
/* -- removed to allow styling from W3C-WD.css to take precedence --
h4,h5 {
color: #0050b2; font-family: tahoma, verdana, "Myriad Web", syntax, sans-serif; font-weight: normal; text-align: left
}
*/
.e-mail { font-size: 90% }
h1 {font-size:200%}
h2 {font-size:170%}
h3 {font-size:150%}
h4 {font-size:130%}
h5 {font-size:120%}
h6 {font-size:110%}
ul.changes { font-size : smaller }
table.selectorsReview { font-size: smaller ; border-collapse : collapse}
.figure { text-align : center }
</style>
<link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-WD.css">
</head>
<body>
<div class="head"> <a href="http://www.w3.org/"><img src="http://www.w3.org/Icons/w3c_home" alt="W3C" height=48 width=72 name="w3cLogo"></a>
<h1> Module CSS3 : S&eacute;lecteurs W3C</h1>
<h2> Document de Travail du W3C 26 Janvier 2001</h2>
<dl>
<dt> Cette version:</dt>
<dd> <a href="http://www.w3.org/TR/2001/WD-css3-selectors-20010126">http://www.w3.org/TR/2001/WD-css3-selectors-20010126</a></dd>
<dt> Derni&egrave;re version:</dt>
<dd> <a href="http://www.w3.org/TR/css3-selectors">http://www.w3.org/TR/css3-selectors</a> FEEA ;</dd>
<dt> Versions pr&eacute;c&eacute;dentes:</dt>
<dd> <a href="http://www.w3.org/TR/2000/WD-css3-selectors-20001005">http://www.w3.org/TR/2000/WD-css3-selectors-20001005</a></dd>
<dd> <a href="http://www.w3.org/TR/2000/WD-css3-selectors-20000410">http://www.w3.org/TR/2000/WD-css3-selectors-20000410</a></dd>
<dt> <a name="editors-list"></a>Éditeurs:</dt>
<dd> <a href="mailto:glazman@netscape.com">Daniel Glazman</a> (<a href="http://www.netscape.com/">Netscape/AOL</a>)</dd>
<dd><a href="mailto:tantekc@microsoft.com">Tantek &Ccedil;elik</a> (<span class=company><a
href="http://www.microsoft.com/">Microsoft Corporation</a></span>) </dd>
<dd><a href="mailto:ian@hixie.ch">Ian Hickson</a> </dd>
</dl>
<dl>
<dd> Peter Linss (ancien &eacute;diteur, anciennement de&nbsp;<span class=company><a
href="http://www.netscape.com/">Netscape/AOL</a></span>)</dd>
<dd> John Williams (ancien &eacute;diteur, <span class=company><a
href="http://www.quark.com">Quark, Inc.</a></span>)</dd>
</dl>
<p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice-20000612#Copyright">Copyright</a> &copy;2001 <a href="http://www.w3.org/">W3C</a> (<a href="http://www.lcs.mit.edu/">MIT</a>, <a href="http://www.inria.fr/">INRIA</a>, <a href="http://www.keio.ac.jp/">Keio</a>), tous droits réservés. Les règles du W3C sur <a href="http://www.w3.org/Consortium/Legal/ipr-notice-20000612#Legal_Disclaimer">la responsabilité</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice-20000612#W3C_Trademarks">les marques de commerce</a>, <a href="http://www.w3.org/Consortium/Legal/copyright-documents-19990405">les droits d'auteur</a> et <a href="http://www.w3.org/Consortium/Legal/copyright-software-19980720">les licences de logiciels</a> sont applicables.
</div>
<hr title="Separator for header">
<h2><a name="abstract"></a>R&eacute;sum&eacute;</h2>
<p>Les CSS (Cascading Style Sheets) sont un langage permettant de d&eacute;crire
la restitution de documents HTML et XML &agrave; l'&eacute;cran, sur papier,
vocalement, etc. Pour attacher des propri&eacute;t&eacute;s stylistiques aux
&eacute;l&eacute;ments du document, elles utilisent les <em>s&eacute;lecteurs</em>,
qui sont des conditions de s&eacute;lection de ces &eacute;l&eacute;ments. Ce
document de travail d&eacute;crit les s&eacute;lecteurs propos&eacute;s pour
CSS level 3. Il comprend et &eacute;tend les s&eacute;lecteurs de CSS level
2. </p>
<h2><a name="status"></a>Statut de ce document</h2>
<p>
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 <a href="http://www.w3.org/TR/REC-CSS1">CSS1</a> et
<a href="http://www.w3.org/TR/REC-CSS2/">CSS2</a>, 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.
</p>
<p>Ce document est un document de travail du Groupe de Travail CSS
&amp; FP faisant partie de l'activité <a
href="http://www.w3.org/Style/">Style</a>.
</p>
<p>Le Groupe de Travail pense que cette spécification est prête et
souhaite donc en faire le <strong>dernier appel</strong> à
commentaires. Si le retour est positif, la spécification deviendra une
<a href="http://www.w3.org/TR/#About">Recommendation Candidate du
W3C</a>. Les commentaires doivent être reçus avant le <strong>1er Mars
2001.</strong>
</p>
<p>Les commentaires sur ce document de travail et les discussions le
concernant peuvent être envoyés dans la liste de diffusion publique
(<a
href="http://lists.w3.org/Archives/Public/www-style/">archivée</a>) <a
href="http://www.w3.org/Mail/Lists.html#www-style">www-style@w3.org</a>
(voyez les <a href="http://www.w3.org/Mail/Request">instructions</a>).
Les Membres du W3C peuvent également envoyer leurs commentaires
directement au Groupe de Travail CSS &amp; FP.
</p>
<p>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 <a href="http://www.w3.org/Style/Group">Groupe de Travail CSS
&amp; FP</a> (Accès <a
href="http://cgi.w3.org/MemberAccess/AccessRequest">réservé</a> au
membres du W3C).
</p>
<p>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 <a href="http://www.w3.org/TR/">Rapports Techniques du W3C</a>.
</p>
<p>Des <a
href="/Style/css3-selectors-updates/translations">traductions</a> de
ce document sont disponibles. La version anglaise de cette
spécification est la seule version normative.
</p>
<h2><a name="dependencies"></a>D&eacute;pendances aux autres Modules CSS3</h2>
<ul>
<li>Syntaxe G&eacute;n&eacute;rale (Module 1)</li>
<li>Assignation de Valeur, Cascade et H&eacute;ritage (Module 4)</li>
<li>Contenu G&eacute;n&eacute;r&eacute; / Marqueurs (Module 14)</li>
<li>Interface Utilisateur (Module 17)</li>
</ul>
<div class="subtoc">
<h2><a name="contents">Table des mati&egrave;res</a></h2>
<ul class="toc">
<li class="tocline2"><a href="#context">1. Contexte</a>
<ul>
<li><a href="#changesFromCSS2">1.1 Changements par rapport &agrave; CSS
2</a></li>
</ul>
<li class="tocline2"><a href="#selectors">2. S&eacute;lecteurs</a>
<li class="tocline2"><a href="#casesens">3. Sensibilit&eacute; &agrave; la
casse</a>
<li class="tocline2"><a href="#selector-syntax">4. Syntaxe des s&eacute;lecteurs</a>
<li class="tocline2"><a href="#grouping">5. Groupes de s&eacute;lecteurs</a>
<li class="tocline2"><a href="#simple-selectors">6. S&eacute;lecteurs simples</a>
<ul class="toc">
<li class="tocline3"><a href="#type-selectors">6.1 S&eacute;lecteurs de
type d'&eacute;l&eacute;ment</a>
<ul class="toc">
<li class="tocline4"><a href="#typenmsp">6.1.1 S&eacute;lecteurs de
type d'&eacute;l&eacute;ment et Espaces de noms</a>
</ul>
<li class="tocline3"><a href="#universal-selector">6.2 S&eacute;lecteur
universel</a>
<ul>
<li><a href="#univnmsp">6.2.1 S&eacute;lecteur Universel et Espace
de noms</a></li>
</ul>
<li class="tocline3"><a href="#attribute-selectors">6.3 S&eacute;lecteurs
d'attribut</a>
<ul class="toc">
<li class="tocline4"><a href="#attribute-representation">6.3.1 Repr&eacute;sentation
des attributs et de leurs valeurs</a>
<li><a href="#attribute-substrings">6.3.2 S&eacute;lecteurs de sous-cha&icirc;ne
dans la valeur d'un attribut</a>
<li class="tocline4"><a href="#attrnmsp">6.3.3 S&eacute;lecteurs d'attribut
et Espaces de noms</a>
<li class="tocline4"><a href="#def-values">6.3.4 Valeur d'attribut
par d&eacute;faut dans les DTDs</a>
</ul>
<li class="tocline3"><a href="#class-html">6.4 S&eacute;lecteurs de classe</a>
<li class="tocline3"><a href="#id-selectors">6.5 S&eacute;lecteurs d'ID</a>
<li class="tocline3"><a href="#pseudo-classes">6.6 Pseudo-classes</a>
<ul class="toc">
<li class="tocline4"><a href="#dynamic-pseudos">6.6.1 Pseudo-classes
dynamiques </a>
<li class="tocline4"><a href="#target-pseudo">6.6.2 La pseudo-classe
:target </a>
<li class="tocline4"><a href="#lang-pseudo">6.6.3 La </a><a href="#target-pseudo">pseudo-classe
</a><a href="#lang-pseudo">:lang()</a>
<li class="tocline4"><a href="#UIstates">6.6.4 Les pseudo-classes
d'&eacute;tat d'&eacute;l&eacute;ment d'interface</a>
<li class="tocline4"><a href="#structural-pseudos">6.6.5 Les pseudo-classes
structurelles</a>
<ul>
<li><a href="#root-pseudo">:root</a></li>
<li><a href="#nth-child-pseudo">:nth-child()</a></li>
<li><a href="#nth-last-child-pseudo">:nth-last-child()</a></li>
<li><a href="#nth-of-type-pseudo">:nth-of-type()</a></li>
<li><a href="#nth-last-of-type-pseudo">:nth-last-of-type()</a></li>
<li><a href="#first-child-pseudo">:first-child</a></li>
<li><a href="#last-child-pseudo">:last-child</a></li>
<li><a href="#first-of-type-pseudo">:first-of-type</a></li>
<li><a href="#last-of-type-pseudo">:last-of-type</a></li>
<li><a href="#only-child-pseudo">:only-child</a></li>
<li><a href="#only-of-type-pseudo">:only-of-type</a></li>
<li><a href="#empty-pseudo">:empty</a></li>
</ul>
<li class="tocline4"><a href="#content-selectors">6.6.6 La pseudo-classe
de contenu</a>
<li><a href="#negation">6.6.7 La pseudo-classe de n&eacute;gation</a>
</ul>
</ul>
<li><a href="#pseudo-elements">7. Pseudo-&eacute;l&eacute;ments</a>
<ul>
<li><a href="#first-line">7.1 Le pseudo-&eacute;l&eacute;ment ::first-line</a>
</li>
<li><a href="#first-letter">7.2 </a><a href="#first-letter">Le pseudo-&eacute;l&eacute;ment
::first-letter</a> </li>
<li><a href="#UIfragments">7.3 </a><a href="#UIfragments">Les pseudo-&eacute;l&eacute;ments
fragments d'&eacute;l&eacute;ments d'interface</a> </li>
<li><a href="#gen-content">7.4 Les pseudo-&eacute;l&eacute;ments ::before
et ::after</a> </li>
</ul>
</li>
<li class="tocline2"><a href="#combinators">8. Combinateurs</a>
<ul class="toc">
<li class="tocline3"><a href="#descendant-combinators">8.1 </a><a href="#descendant-combinators">Combinateur
de descendance</a>
<li class="tocline3"><a href="#child-combinators">8.2 Combinateurs filiaux</a>
<li class="tocline3"><a href="#adjacent-combinators">8.3 Combinateurs
d'adjacence</a>
<ul class="toc">
<li class="tocline4"><a href="#adjacent-d-combinators">8.3.1 </a><a href="#adjacent-d-combinators">Combinateurs
d'adjacence directe</a>
<li class="tocline4"><a href="#adjacent-i-combinators">8.3.2 </a><a href="#adjacent-i-combinators">Combinators
d'adjacence indirecte</a>
</ul>
</ul>
<li class="tocline2"><a href="#specificity">9. </a><a href="#specificity">Calcul
de la sp&eacute;cificit&eacute; d'un s&eacute;lecteur</a>
<li class="tocline2"><a href="#w3cselgrammar">10. La grammaire des s&eacute;lecteurs
W3C</a>
<ul class="toc">
<li class="tocline3"><a href="#grammar">10.1 </a><a href="#grammar">Grammaire</a>
<li class="tocline3"><a href="#lex">10.2 </a><a href="#lex">Scanner lexical</a>
</ul>
<li class="tocline2"><a href="#downlevel">11. Espaces de noms et Outils de
bas niveau</a>
<li class="tocline2"><a href="#profiling">12. Profils</a>
<li><a href="#Conformance">13. Conformit&eacute; et Crit&egrave;res de convergence</a>
<li><a href="#Tests">14. Tests</a>
<li><A HREF="#ACKS">15. Remerciements</A>
<li class="tocline2"><a href="#references">16. R&eacute;f&eacute;rences</a>
</ul>
</div>
<h2><a name="context">1. Context</a>e</h2>
<p> Les membres du CSS &amp; FP Working Group ont d&eacute;cid&eacute; durant
leur r&eacute;union de Clamart de la modularisation de la sp&eacute;cification
CSS. </p>
<p>Cette modularisation des CSS, associ&eacute;e &agrave; l'externalisation de
la syntaxe g&eacute;n&eacute;rale, va diminuer la taille de la sp&eacute;cification
et va permettre &agrave; de nouveaux langages de r&eacute;utiliser les s&eacute;lecteurs
et/ou la syntaxe g&eacute;n&eacute;rale des CSS. Par exemple pour la d&eacute;finition
de comportements ou de transformations d'arbre.</p>
<p>Cette sp&eacute;cification contient sa prop CD6 re <a href="#Tests">suite de tests</a>,
un test par concept introduit dans ce document. Ces tests ne sont pas des tests
de conformit&eacute; absolue mais se proposent de fournir aux usagers un moyen
simple de v&eacute;rifier si une partie de cette sp&eacute;cification est impl&eacute;ment&eacute;e
au moins <i>a minima</i> ou, au contraire, pas du tout.</p>
<h3><a name="changesFromCSS2"></a>1.1. Changements par rapport &agrave; CSS 2</h3>
<p>Les principales diff&eacute;rences entre les S&eacute;lecteur CSS 2 et les
S&eacute;lecteurs W3C sont :</p>
<ul>
<li>la liste des d&eacute;finitions de base (s&eacute;lecteur, groupe de s&eacute;lecteurs,
s&eacute;lecteur simple, etc.) a &eacute;t&eacute; clarifi&eacute;e,</li>
<li>un composant optionel d'espace de noms est d&eacute;sormais autoris&eacute;
dans les s&eacute;lecteurs de type, le s&eacute;lecteur universel et les s&eacute;lecteurs
d'attribut,</li>
<li>un nouveau combinateur,</li>
<li>de nouveaux s&eacute;lecteurs simples comme les s&eacute;lecteurs de sous-cha&icirc;ne
dans une valeur d'attribut ou de nouvelles pseudo-classes,</li>
<li>de nouveaux pseudo-&eacute;l&eacute;ments,</li>
<li>une r&eacute;-&eacute;criture de la grammaire des s&eacute;lecteurs,</li>
<li>des profils &agrave; ajouter aux sp&eacute;cifications int&eacute;grant
les S&eacute;lecteurs W3C et d&eacute;finissant le jeu de s&eacute;lecteurs
reconnu et accept&eacute; par ces sp&eacute;cifications,</li>
<li>les S&eacute;lecteurs W3C sont d&eacute;sormais un Module CSS 3 et une sp&eacute;cification
ind&eacute;pendante. D'autres sp&eacute;cifications peuvent se r&eacute;f&eacute;rer
&agrave; ce document ind&eacute;pendamment des CSS,</li>
<li>la sp&eacute;cification contient d&eacute;sormais sa propre suite de tests.</li>
</ul>
<h2><a name="selectors"></a>2. S&eacute;lecteurs</h2>
<p>Un s&eacute;lecteur W3C repr&eacute;sente une structure. Cete structure peut
&ecirc;tre vue par exemple comme une condition (p.ex. dans une r&egrave;gle
CSS) qui d&eacute;termine quels &eacute;l&eacute;ments de l'arbre documentaire
sont s&eacute;lectionn&eacute;s par le s&eacute;lecteur, ou comme une description
plate du fragment HTML ou XML correspondant &agrave; cette structure.</p>
<p>Les s&eacute;lecteurs W3C vont de la simple repr&eacute;sentation du nom d'un
&eacute;l&eacute;ment jusqu'&agrave; des repr&eacute;sentations contextuelles
complexes.</p>
<p>La table qui suit r&eacute;sume la syntaxe des s&eacute;lecteurs W3C :</p>
<table border width="100%" class="selectorsReview" >
<tr>
<th class="pattern" height="47">S&eacute;quence</th>
<th class="meaning" height="47">Signification</th>
<th class="described" height="47">D&eacute;crit en section</th>
<th class="origin" height="47">D&eacute;fini originellement en CSS niveau</th>
</tr>
<tr>
<td class="pattern">*</td>
<td class="meaning">tout &eacute;l&eacute;ment</td>
<td class="described"><a href="#universal-selector">S&eacute;lecteur universel</a></td>
<td class="origin">2</td>
</tr>
<tr>
<td class="pattern">E</td>
<td class="meaning">tout &eacute;l&eacute;ment de type E</td>
<td class="described"><a href="#type-selectors">S&eacute;lecteur de type d'&eacute;l&eacute;ment</a></td>
<td class="origin">1</td>
</tr>
<tr>
<td class="pattern">E[foo]</td>
<td class="meaning">tout &eacute;l&eacute;ment E portant l'attribut &quot;foo&quot;</td>
<td class="described"><a href="#attribute-selectors">S&eacute;lecteurs d'attribut</a></td>
<td class="origin">2</td>
</tr>
<tr>
<td class="pattern">E[foo="bar"]</td>
<td class="meaning">tout &eacute;l&eacute;ment E portant l'attribut&quot;
foo&quot; et dont la valeur de cet attribut est exactement &quot;bar&quot;</td>
<td class="described"><a href="#attribute-selectors">S&eacute;lecteurs d'attribut</a></td>
<td class="origin">2</td>
</tr>
<tr>
<td class="pattern">E[foo~="bar"]</td>
<td class="meaning">tout &eacute;l&eacute;ment E dont l'attribut &quot;foo&quot;
contient une liste de valeurs s&eacute;par&eacute;es par des espaces, l'une
de ces valeurs &eacute;tant exactement &eacute;gale &agrave; &quot;bar&quot;</td>
<td class="described"><a href="#attribute-selectors">S&eacute;lecteurs d'attribut</a></td>
<td class="origin">2</td>
</tr>
<tr>
<td class="pattern">E[foo^=&quot;bar&quot;]</td>
<td class="meaning">tout &eacute;l&eacute;ment E dont la valeur de l'attribut
&quot;foo&quot; commence exactement par la cha&icirc;ne &quot;bar&quot;</td>
<td class="described"><a href="#attribute-selectors">S&eacute;lecteurs d'attribut</a></td>
<td class="origin">3</td>
</tr>
<tr>
<td class="pattern">E[foo$=&quot;bar&quot;]</td>
<td class="meaning">tout &eacute;l&eacute;ment E dont la valeur de l'attribut
&quot;foo&quot; finit exactement par la cha&icirc;ne &quot;bar&quot;</td>
<td class="described"><a href="#attribute-selectors">S&eacute;lecteurs d'attribut</a></td>
<td class="origin">3</td>
</tr>
<tr>
<td class="pattern">E[foo*=&quot;bar&quot;]</td>
<td class="meaning">tout &eacute;l&eacute;ment E dont la valeur de l'attribut
&quot;foo&quot; contient la sous-cha&icirc;ne &quot;bar&quot;</td>
<td class="described"><a href="#attribute-selectors">S&eacute;lecteurs d'attribut</a></td>
<td class="origin">3</td>
</tr>
<tr>
<td class="pattern">E[lang|="en"]</td>
<td class="meaning">tout &eacute;l&eacute;ment E dont l'attribut 'lang&quot;
est une liste de valeurs s&eacute;par&eacute;es par des tirets et commen&ccedil;ant
(&agrave; gauche) par &quot;en&quot;</td>
<td class="described"><a href="#attribute-selectors">S&eacute;lecteurs d'attribut</a></td>
<td class="origin">2</td>
</tr>
<tr>
<td class="pattern">E:root</td>
<td class="meaning">un &eacute;l&eacute;ment E, racine du document</td>
<td class="described"><a href="#structural-pseudos">Pseudo-classes structurelles</a></td>
<td class="origin">3</td>
</tr>
<tr>
<td class="pattern">E:nth-child(n)</td>
<td class="meaning">un &eacute;l&eacute;ment E qui est le n-i&egrave;me enfant
de son parent</td>
<td class="described"><a href="#structural-pseudos">Pseudo-classes structurelles</a></td>
<td class="origin">3</td>
</tr>
<tr>
<td class="pattern">E:nth-last-child(n)</td>
<td class="meaning">un &eacute;l&eacute;ment E qui est le n-i&egrave;me enfant
de son parent en comptant depuis le dernier enfant</td>
<td class="described"><a href="#structural-pseudos">Pseudo-classes structurelles</a></td>
<td class="origin">3</td>
</tr>
<tr>
<td class="pattern">E:nth-of-type(n)</td>
<td class="meaning">un &eacute;l&eacute;ment E qui est le n-i&egrave;me enfant
de son parent et de ce type</td>
<td class="described"><a href="#structural-pseudos">Pseudo-classes structurelles</a></td>
<td class="origin">3</td>
</tr>
<tr>
<td class="pattern">E:nth-last-of-type(n)</td>
<td class="meaning">un &eacute;l&eacute;ment E qui est le n-i&egrave;me enfant
de son parent et de ce type en comptant depuis le dernier enfant</td>
<td class="described"><a href="#structural-pseudos">Pseudo-classes structurelles</a></td>
<td class="origin">3</td>
</tr>
<tr>
<td class="pattern">E:first-child</td>
<td class="meaning">un &eacute;l&eacute;ment E, premier enfant de son parent</td>
<td class="described"><a href="#structural-pseudos">Pseudo-classes structurelles</a></td>
<td class="origin">2</td>
</tr>
<tr>
<td class="pattern">E:last-child</td>
<td class="meaning">un &eacute;l&eacute;ment E, dernier enfant de son parent</td>
<td class="described"><a href="#structural-pseudos">Pseudo-classes structurelles</a></td>
<td class="origin">3</td>
</tr>
<tr>
<td class="pattern">E:first-of-type</td>
<td class="meaning">un &eacute;l&eacute;ment E, premier enfant de son type</td>
<td class="described"><a href="#structural-pseudos">Pseudo-classes structurelles</a></td>
<td class="origin">3</td>
</tr>
<tr>
<td class="pattern">E:last-of-type</td>
<td class="meaning">un &eacute;l&eacute;ment E, dernier enfant de son type</td>
<td class="described"><a href="#structural-pseudos">Pseudo-classes structurelles</a></td>
<td class="origin">3</td>
</tr>
<tr>
<td class="pattern" height="19">E:only-child</td>
<td class="meaning" height="19">un &eacute;l&eacute;ment E, seul enfant de
son parent</td>
<td class="described" height="19"><a href="#structural-pseudos">Pseudo-classes
structurelles</a></td>
<td class="origin" height="19">3</td>
</tr>
<tr>
<td class="pattern">E:only-of-type</td>
<td class="meaning">un &eacute;l&eacute;ment E, seul enfant de son type</td>
<td class="described"><a href="#structural-pseudos">Pseudo-classes structurelles</a></td>
<td class="origin">3</td>
</tr>
<tr>
<td class="pattern">E:empty</td>
<td class="meaning">un &eacute;l&eacute;ment E qui n'a aucun enfant (y compris
noeuds textuels purs)</td>
<td class="described"><a href="#structural-pseudos">Pseudo-classes structurelles</a></td>
<td class="origin">3</td>
</tr>
<tr>
<td class="pattern">E:link <br>
E:visited</td>
<td class="meaning">un &eacute;l&eacute;ment E qui est la source d'un hyperlien
dont la cible n'a pas encore &eacute;t&eacute; visit&eacute;e (:link) ou
a d&eacute;j&agrave; &eacute;t&eacute; visit&eacute;e (:visited)</td>
<td class="described"><a href="#link">Les pseudo-classes de lien</a></td>
<td class="origin">1</td>
</tr>
<tr>
<td class="pattern">E:active <br>
E:hover <br>
E:focus</td>
<td class="meaning">un &eacute;l&eacute;ment E pendant certaines actions de
l'usager</td>
<td class="described"><a href="#useraction-pseudos">Les pseudo-classes d'action
Usager </a></td>
<td class="origin">1 and 2</td>
</tr>
<tr>
<td class="pattern">E:target</td>
<td class="meaning">un &eacute;l&eacute;ment E qui est la cible de l'URL d'origine
contenant lui-m&ecirc;me un fragment identifiant.</td>
<td class="described"><a href="#target-pseudo">La pseudo-classe :target</a></td>
<td class="origin">3</td>
</tr>
<tr>
<td class="pattern">E:lang(c)</td>
<td class="meaning">un &eacute;l&eacute;ment E dont le langage (humain) est
c (le langage du document sp&eacute;cifie comment le langage humain est
d&eacute;termin&eacute;)</td>
<td class="described"><a href="#lang-pseudo">La pseudo-classe :lang()&nbsp;</a></td>
<td class="origin">2</td>
</tr>
<tr>
<td class="pattern">E:enabled<br>
E:disabled&nbsp;</td>
<td class="meaning">un &eacute;l&eacute;ment d'interface utilisateur E qui
est actif ou inactif.</td>
<td class="described"><a href="#UIstates">Les pseudo-classes d'&eacute;tat
d'&eacute;l&eacute;ment d'interface</a></td>
<td class="origin">3</td>
</tr>
<tr>
<td class="pattern">E:checked<br>
E:indeterminate&nbsp;</td>
<td class="meaning">un &eacute;l&eacute;ment d'interface utilisateur E qui
est coch&eacute; ou dont l'&eacute;tat est ind&eacute;termin&eacute; (par
exemple un bouton-radio ou une case &agrave; cocher)</td>
<td class="described"><a href="#UIstates">Les pseudo-classes d'&eacute;tat
d'&eacute;l&eacute;ment d'interface</a></td>
<td class="origin">3</td>
</tr>
<tr>
<td class="pattern">E:contains("foo")</td>
<td class="meaning">un &eacute;l&eacute;ment E dont le contenu textuel concat&eacute;n&eacute;
contient la sous-cha&icirc;ne &quot;foo&quot;</td>
<td class="described"><a href="#content-selectors">La pseudo-classe de contenu</a></td>
<td class="origin">3</td>
</tr>
<tr>
<td class="pattern">E::first-line</td>
<td class="meaning">la premi&egrave;re ligne format&eacute;e d'un &eacute;l&eacute;ment
E</td>
<td class="described"><a href="#first-line">The :first-line pseudo-element</a></td>
<td class="origin">1</td>
</tr>
<tr>
<td class="pattern">E::first-letter</td>
<td class="meaning">le premier caract&egrave;re format&eacute; d'un &eacute;l&eacute;ment
E</td>
<td class="described"><a href="#first-letter">Le pseudo-&eacute;l&eacute;ment
::first-letter </a></td>
<td class="origin">1</td>
</tr>
<tr>
<td class="pattern">E::selection</td>
<td class="meaning">la partie d'un &eacute;l&eacute;ment E qui est actuellement
s&eacute;lectionn&eacute;e/mise en exergue par l'usager</td>
<td class="described"><a href="#UIfragments">Les pseudo-&eacute;l&eacute;ments
fragments d'&eacute;l&eacute;ments d'interface</a></td>
<td class="origin">3</td>
</tr>
<tr>
<td class="pattern">E::before</td>
<td class="meaning">le contenu g&eacute;n&eacute;r&eacute; avant un &eacute;l&eacute;ment
E</td>
<td class="described"><a href="#gen-content">Le pseudo-&eacute;l&eacute;ment
::before </a></td>
<td class="origin">2</td>
</tr>
<tr>
<td class="pattern">E::after</td>
<td class="meaning">le contenu g&eacute;n&eacute;r&eacute; apr&egrave;s un
&eacute;l&eacute;ment E</td>
<td class="described"><a href="#gen-content">Le pseudo-&eacute;l&eacute;ment
::after </a></td>
<td class="origin">2</td>
</tr>
<tr>
<td class="pattern">E.warning</td>
<td class="meaning"><i>Uniquement en HTML</i>. Identique &agrave; E[class~="warning"].</td>
<td class="described"><a href="#class-html">S&eacute;lecteurs de classe</a></td>
<td class="origin">1</td>
</tr>
<tr>
<td class="pattern">E#myid</td>
<td class="meaning">un &eacute;l&eacute;ment E dont l'ID est &eacute;gal &agrave;
"myid".</td>
<td class="described"><a href="#id-selectors">S&eacute;lecteurs d'ID</a></td>
<td class="origin">1</td>
</tr>
<tr>
<td class="pattern">E:not(s)</td>
<td class="meaning"> un &eacute;l&eacute;ment E qui n'est pas repr&eacute;sent&eacute;
par le s&eacute;lecteur simple s</td>
<td class="described"><a href="#negation">La pseudo-classe de n&eacute;gation</a></td>
<td class="origin">3</td>
</tr>
<tr>
<td class="pattern">E F</td>
<td class="meaning">un &eacute;l&eacute;ment F qui est le descendant d'un
&eacute;l&eacute;ment E</td>
<td class="described"><a href="#descendant-combinators">Combinateur de descendance</a>
</td>
<td class="origin">1</td>
</tr>
<tr>
<td class="pattern">E > F</td>
<td class="meaning">un &eacute;l&eacute;ment F qui est le fils d'un &eacute;l&eacute;ment
E</td>
<td class="described"><a href="#child-combinators">Combinateur filial</a></td>
<td class="origin">2</td>
</tr>
<tr>
<td class="pattern">E + F</td>
<td class="meaning">un &eacute;l&eacute;ment F imm&eacute;diatement pr&eacute;c&eacute;d&eacute;
par un &eacute;l&eacute;ment E</td>
<td class="described"><a href="#adjacent-d-combinators">Combinateur d'adjacence
directe</a></td>
<td class="origin">2</td>
</tr>
<tr>
<td class="pattern">E ~ F</td>
<td class="meaning">un &eacute;l&eacute;ment F pr&eacute;c&eacute;d&eacute;
par un &eacute;l&eacute;ment E</td>
<td class="described"><a href="#adjacent-i-combinators">Combinateur d'adjacence
indirecte</a></td>
<td class="origin">3</td>
</tr>
</table>
<p>Exemple : en CSS, la signification r&eacute;elle de chaque s&eacute;lecteur
est d&eacute;termin&eacute;e &agrave; partir de la table ci-dessus en faisant
pr&eacute;c&eacute;der le mot &quot;s&eacute;lectionne&quot; au contenu de chaque
cellule de la colonne &quot;Signification&quot;.
<h2><a name="casesens">3. Sensibilit&eacute; &agrave; la casse</a></h2>
<p>La sensibilit&eacute; &agrave; la casse des noms d'&eacute;l&eacute;ments d'un
langage de documents donn&eacute; dans les s&eacute;lecteurs W3C d&eacute;pend
du langage de documents en question. Par exemple, en HTML, les noms d'&eacute;l&eacute;ments
ne sont pas senbibles &agrave; la casse, alors qu'ils le sont en XML</p>
<p>La sensibilit&eacute; &agrave; la casse des noms d'attribus et des valeurs
d'attributs d&eacute;pend &eacute;galement du langage de documents.</p>
<h2><a name="selector-syntax">4. Syntaxe des s&eacute;lecteurs</a></h2>
<p>Un&nbsp;<dfn><a name="selector">s&eacute;lecteur</a></dfn> est une cha&icirc;ne
d'une ou plusieurs <a href="#sequence">s&eacute;quences de s&eacute;lecteurs
simples</a> s&eacute;par&eacute;s par des <a href="#combinators">combinateurs</a>.
</p>
<p>Une&nbsp;<dfn><a name="sequence">s&eacute;quence de s&eacute;lecteurs simples</a></dfn>
est une cha&icirc;ne de <a href="#simple-selectors-dfn">s&eacute;lecteurs simples</a>
qui ne sont pas s&eacute;par&eacute;s par des <a href="#combinators">combinateurs</a>.
Ele commence toujours par un <a href="#type-selectors">s&eacute;lecteur de type
d'&eacute;l&eacute;ment</a> ou un <a href="#universal-selector">s&eacute;lecteur
universel</a>. Aucun autre s&eacute;lecteur de type d'&eacute;l&eacute;ment
ou s&eacute;lecteur universel n'est autoris&eacute; dans la s&eacute;quence.</p>
<p>Un&nbsp;<dfn><a name="simple-selectors-dfn"></a><a href="#simple-selectors">s&eacute;lecteur
simple</a></dfn> est soit un <a href="#type-selectors">s&eacute;lecteur de type
d'&eacute;l&eacute;ment</a>, un <a href="#universal-selector">s&eacute;lecteur
universel</a>, un <a href="#attribute-selectors">s&eacute;lecteur d'attribut</a>,
un <a href="#id-selectors">s&eacute;lecteur d'ID</a>, un <a href="#content-selectors">s&eacute;lecteur
de contenu</a> ou une <a href="#pseudo-classes">pseudo-classe</a>. Un <a href="#pseudo-elements">pseudo-&eacute;l&eacute;ment</a>
peut suivre la derni&egrave;re s&eacute;quence de s&eacute;lecteurs simples.</p>
<p>Les <dfn>combinateurs</dfn> sont : l'espace, "<tt>></tt>", "<tt>+</tt>" et
"<tt>~</tt>". Un espace peut &ecirc;tre pr&eacute;sent entre un combinateur
et les s&eacute;lecteurs simples qui l'entourent. <a name="whitespace"></a>Seuls
les caract&egrave;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&egrave;res de type espace, comme "em-space" (8195) et "ideographic
space" (12288), ne peuvent composer un espace.
<h2><a name="grouping">5. Groupes de s&eacute;lecteurs</a></h2>
<p>Quand plusieurs s&eacute;lecteurs sont associ&eacute;s aux m&ecirc;mes d&eacute;clarations,
ils peuvent &ecirc;tre group&eacute;s en les s&eacute;parant par des virgules.</p>
<div class="example">Exemples CSS :
<p>Dans cette exemple, les trois r&egrave;gles CSS sont r&eacute;duites &agrave;
une seule :</p>
<pre>h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }</pre>
est &eacute;quivalent &agrave; :
<pre>h1, h2, h3 { font-family: sans-serif }</pre>
</div>
<p><b>Attention</b> : cette &eacute;quivalence est v&eacute;rifi&eacute;e dans
cet exemple car les trois s&eacute;lecteurs initiaux sont des s&eacute;lecteurs
valides. Si l'un ou plus de ces s&eacute;lecteurs est invalide, le groupe compos&eacute;
des trois s&eacute;lecteurs est lui-m&ecirc;me invalide, invalidant l'ensemble
de la r&egrave;gle ; il n'y a alors pas &eacute;quivalence.</p>
<h2><a name="simple-selectors">6. S&eacute;lecteurs</a> simples</h2>
<h3><a name="type-selectors">6.1 S&eacute;lecteur de type d'&eacute;l&eacute;ment</a></h3>
<p>Un&nbsp;<dfn>s&eacute;lecteur de type d'&eacute;l&eacute;ment </dfn> est le
nom d'un type d'&eacute;lement du langage de documents. Un s&eacute;lecteur
de type d'&eacute;lement repr&eacute;sente une occurence d'un &eacute;l&eacute;ment
du type donn&eacute; dans l'arbre du document.</p>
<div class="example">Exemple(s):
<p>Le s&eacute;lecteur suivant repr&eacute;sente un &eacute;l&eacute;ment <tt>h1</tt>
dans l'arbre du document :
<pre>h1</pre>
</div>
<div class="example">
</div>
<h4><a name="typenmsp">6.1.1 </a><a name="type-selectors">S&eacute;lecteur de
type d'&eacute;l&eacute;ment</a> et Espaces de noms</h4>
<p> Les s&eacute;lecteurs de type d'&eacute;l&eacute;ment peuvent contenir un
composant optionel d'espace de noms. Un pr&eacute;fixe d'espace de noms pr&eacute;alablement
d&eacute;clar&eacute; (via une r&egrave;gle-at <tt>@namespace</tt>) peut &ecirc;tre
pr&eacute;fix&eacute; &agrave; un nom d'&eacute;l&eacute;ment en les s&eacute;parant
par le s&eacute;parateur d'espace de noms "<tt>|</tt>". Le composant d'espace
de noms peut &ecirc;tre laiss&eacute; vide pour indiquer que le s&eacute;lecteur
ne repr&eacute;sente que des &eacute;l&eacute;ments sans espace de noms d&eacute;clar&eacute;.
De plus, une &eacute;toile peut &ecirc;tre utilis&eacute;e comme pr&eacute;fixe
d'espace de noms, indiquant alors que le s&eacute;lecteur repr&eacute;sente
des &eacute;lements dans quelque espace de noms que ce soit (y compris les &eacute;l&eacute;ments
sans espace de noms d&eacute;clar&eacute;). Les s&eacute;lecteurs de type d'&eacute;l&eacute;ment
qui n'ont pas de composant d'espace de noms (pas de s&eacute;parateur d'espace
de noms) repr&eacute;sentent les &eacute;l&eacute;ments sans consid&eacute;ration
d'espace de noms (&eacute;quivalent &agrave; "<tt>*|</tt>") sauf si un espace
de noms par d&eacute;faut &agrave; &eacute;t&eacute; d&eacute;clar&eacute;,
auquel cas le s&eacute;lecteur repr&eacute;sente les &eacute;l&eacute;ments
dans cet espace de noms par d&eacute;faut.</p>
<p>Une autre approche serait d'associer les s&eacute;lecteurs de type d'&eacute;l&eacute;ment
n'ayant pas de composant d'espace de noms qu'aux &eacute;l&eacute;ments n'ayant
pas d'espace de noms (sauf si un espace de noms par d&eacute;faut a &eacute;t&eacute;
d&eacute;clar&eacute;). Dans ce cas, le s&eacute;lecteur "<tt>h1</tt>"serait
&eacute;quivalent au s&eacute;lecteur "<tt>|h1</tt>" et non pas au s&eacute;lecteur
"<tt>*|h1</tt>". L'aspect n&eacute;gatif de cette approche est que les feuilles
de styles existantes (&eacute;crites dans usage d'espaces de noms) serait inop&eacute;rantes
dans tous les documents faisant usage des espaces de noms, c'est-&agrave;-dire
dans tous les documents XHTML.</p>
<p>Il doit &ecirc;tre not&eacute; que si un pr&eacute;fixe d'espace de noms utilis&eacute;
dans un s&eacute;lecteur n'a pas &eacute;t&eacute; pr&eacute;alablement d&eacute;clar&eacute;,
le s&eacute;lecteur doit alors &ecirc;tre consid&eacute;r&eacute; comme invalide
et l'ensemble de la r&egrave;gle est alors ignor&eacute;e en conformit&eacute;
avec les r&egrave;gles standard de gestion d'erreur. </p>
<p>Il doit &ecirc;tre de plus not&eacute; que dans un outil g&eacute;rant les
espaces de noms, les s&eacute;lecteurs de type d'&eacute;l&eacute;ment sont
compar&eacute;s seulement &agrave; la <a href="http://www.w3.org/TR/REC-xml-names/#NT-LocalPart">partie
locale</a> du <a href="http://www.w3.org/TR/REC-xml-names/#ns-qualnames">nom
qualifi&eacute;</a> d'un &eacute;l&eacute;ment. Voir <a href="#downlevel">ci-dessous</a>
pour les comparaisons effectu&eacute;es dans un outils ne g&eacute;rant pas
les espaces de noms. </p>
<p>En r&eacute;sum&eacute; :</p>
<dl>
<dt><tt>ns|E</tt></dt>
<dd>&eacute;l&eacute;ments E dans l'espace de nom ns </dd>
<dt><tt>*|E</tt></dt>
<dd>&eacute;l&eacute;ments E dans tout espace de noms, y compris ceux sans espace
de noms d&eacute;clar&eacute; </dd>
<dt><tt>|E</tt></dt>
<dd>&eacute;l&eacute;ments E sans espace de noms d&eacute;clar&eacute;</dd>
<dt><tt>E</tt></dt>
<dd>si aucun espace de noms par d&eacute;faut n'a &eacute;t&eacute; d&eacute;clar&eacute;,
ceci est &eacute;quivalent &agrave; *|E. Sinon, c'est &eacute;quivalent &agrave;
ns|E o&ugrave; ns est l'espace de noms par d&eacute;faut.</dd>
</dl>
<div class="example">
<p>Exemples CSS : </p>
<pre>@namespace foo url(http://www.foo.com);
foo|h1 { color: blue }
foo|* { color: yellow }
|h1 { color: red }
*|h1 { color: green }
h1 { color: green }</pre>
<p>La premi&egrave;re r&egrave;gle s&eacute;lectionnera uniquement les &eacute;l&eacute;ments
<tt>h1</tt> dans l'espace de noms "http://www.foo.com".</p>
<p>La seconde r&egrave;gle s&eacute;lectionnera tous les &eacute;l&eacute;ments
de l'espace de noms "http://www.foo.com".</p>
<p>La troisi&egrave;me r&egrave;gle s&eacute;lectionnera uniquement les &eacute;l&eacute;ments
<tt>h1</tt> elements sans d&eacute;claration d'espace de noms.</p>
<p>La quatri&egrave;me r&egrave;gle s&eacute;lectionnera les &eacute;l&eacute;ments
<tt>h1</tt> dans tout espace de noms (y compris ceux sans espace de noms d&eacute;clar&eacute;).</p>
<p>La derni&egrave;re r&egrave;gle est &eacute;quivalente &agrave; la quatri&egrave;me
car aucun espace de noms par d&eacute;faut n'a &eacute;t&eacute; d&eacute;fini.</p>
</div>
<h3><a name="universal-selector">6.2 S&eacute;lecteur universel</a></h3>
<p> Le&nbsp;<dfn>s&eacute;lecteur universel</dfn>, d&eacute;not&eacute;"<tt>*</tt>",
represente le nom qualifi&eacute; de tout type d'&eacute;l&eacute;ment. Il repr&eacute;sente
donc tout &eacute;l&eacute;ment de l'arbre du document dans tout espace de noms
(y compris les &eacute;l&eacute;ments sans espace de noms d&eacute;clar&eacute;)
si aucune espace de noms par d&eacute;faut n'a &eacute;t&eacute; d&eacute;clar&eacute;.
Si un espace de noms par d&eacute;faut a &eacute;t&eacute; d&eacute;clar&eacute;,
consultez ci-dessous <a href="#univnmsp">S&eacute;lecteur universel et Espaces
de noms</a>.</p>
<p>Si le s&eacute;lecteur unive E968 rsel n'est pas le seul composant d'une s&eacute;quence
de s&eacute;lecteurs simples, le <tt>*</tt> peut &ecirc;tre omis. Par exemple:
</p>
<div class="example">
<ul>
<li><tt>*[LANG=fr] </tt>et <tt>[LANG=fr]</tt> sont &eacute;quivalents,</li>
<li><tt>*.warning</tt> et <tt>.warning</tt> sont &eacute;quivalents,</li>
<li><tt>*#myid</tt> et <tt>#myid</tt> sont &eacute;quivalents.</li>
</ul>
</div>
<p><b>Attention </b>: il est recommand&eacute; de ne pas omettre le <code>*</code>,
representant le s&eacute;lecteur universel.</p>
<h4><a name="univnmsp">6.2.1 S&eacute;lecteur universel et Espace de noms</a></h4>
<p>Le s&eacute;lecteur universel peut contenir un composant optionel d'espace
de noms</p>
<dl>
<dt><tt>ns|*</tt></dt>
<dd>tous les &eacute;l&eacute;ments de l'espace de noms ns</dd>
<dt><tt>*|*</tt></dt>
<dd>tous les &eacute;l&eacute;ments</dd>
<dt><tt>|*</tt></dt>
<dd>tous les &eacute;l&eacute;ments sans espace de noms d&eacute;clar&eacute;</dd>
<dt><tt>*</tt></dt>
<dd>si aucun espace de noms par d&eacute;faut n'a &eacute;t&eacute; sp&eacute;cifi&eacute;,
ceci est &eacute;quivalent &agrave; *|*. Dans le cas contraire, c'est &eacute;quivalent
&agrave; ns|* o&ugrave; ns est l'espace de noms par d&eacute;faut.</dd>
</dl>
<h3><a name="attribute-selectors">6.3 S&eacute;lecteurs d'attribut</a></h3>
<p>Les s&eacute;lecteurs W3C permettent de repr&eacute;senter les attributs attach&eacute;s
&agrave; un &eacute;l&eacute;ment. </p>
<h4><a name="attribute-representation">6.3.1 </a>Repr&eacute;sentation
des attributs et des valeurs d'attributs</h4>
<p>Quatre diff&eacute;rents s&eacute;lecteurs d'attribut sont disponibles :</p>
<dl>
<dt>&nbsp; </dt>
<dt> <tt>[att]</tt></dt>
<dd> Repr&eacute;sente l'attribut<tt> att</tt>, quelque soit la valeur de l'attribut.</dd>
<dt> <tt>[att=val]</tt></dt>
<dd> Repr&eacute;sente l'attribut <tt>att</tt>, sa valeur &eacute;tant exactement
&eacute;gale &agrave; "val".</dd>
<dt> <tt>[att~=val]</tt></dt>
<dd> Repr&eacute;sente l'attribut <tt>att</tt>, sa valeur &eacute;tant une liste
de mots s&eacute;par&eacute;s par des espaces, l'un de ces mots &eacute;tant
exactement "val". En cas d'usage de ce s&eacute;lecteur, les mots dans la
valeur ne doivent pas &ecirc;tre s&eacute;par&eacute;s par des espaces (puisqu'ils
sont s&eacute;par&eacute;s par des espaces).</dd>
<dt> <tt>[att|=val]</tt></dt>
<dd> Repr&eacute;sente l'attribut <tt>att</tt>, sa valeur &eacute;tant une liste
de mots s&eacute;par&eacute;s par des tirets et commen&ccedil;ant par &quot;val&quot;.
La comparaison se fait toujours au d&eacute;but de la valeur de l'attribut.
Ceci est principalement destin&eacute; &agrave; la s&eacute;lection de sous-codes
linguistiques (p.ex. l'attribut <code>LANG</code> en HTML) conform&eacute;ment
&agrave; la RFC 1766 (<a href="http://www.w3.org/TR/REC-CSS2/refs.html#ref-RFC1766" class="noxref" rel="biblioentry">[RFC1766]</a>).</dd>
</dl>
<p>Les valeurs d'attributs doivent &ecirc;tre des identificateurs ou des cha&icirc;nes
de caract&egrave;res. La sensibilit&eacute; &agrave; la casse des noms d'attributs
et de leurs valeurs d&eacute;pend du langage de documents.</p>
<div class="example">Exemple(s):
<p>Par exemple, le s&eacute;lecteur suivant repr&eacute;sente un &eacute;l&eacute;ment
<tt>h1</tt> portant l'attribut <tt>title</tt>, quelque soit sa valeur:
<pre>h1[title]</pre>
Exemple(s):
<p>Dans l'exemple suivant, le s&eacute;lecteur repr&eacute;sente un &eacute;l&eacute;ment
<code>span</code> dont l'attribut <code>class</code> a exactement la veleur
&quot;exemple&quot;:
<pre>span[class=exemple]</pre>
Plusieurs s&eacute;lecteurs d'attribut peuvent &ecirc;tre utilis&eacute;s pour
repr&eacute;senter plusieurs attributs d'un &eacute;l&eacute;ment, ou plusieurs
fois le m&ecirc;me attribut.
<p>Exemple(s):
<p>Ici, le s&eacute;lecteur repr&eacute;sente un &eacute;l&eacute;ment <code>span</code>
dont l'attribut <code>hello</code> a exactement la valeur &quot;Cleveland&quot;
et dont l'attribut <code>goodbye</code> a exactement la valeur "Columbus":
<pre>span[hello="Cleveland"][goodbye="Columbus"]</pre>
Exemple(s):
<p>Les s&eacute;lecteurs suivants illustrent les diff&eacute;rences entre "="
et "~=". Le premier s&eacute;lecteur repr&eacute;sentera, par exemple, la
valeur "copyright copyleft copyeditor" pour l'attribut <tt>rel</tt>. Le second
s&eacute;lecteur repr&eacute;sentera uniquement un &eacute;l&eacute;ment <tt>a</tt>
dont l'attribut <tt>href</tt> a exactement la veleur "http://www.w3.org/".
<pre>a[rel~="copyright"]
a[href="http://www.w3.org/"]</pre>
Exemple(s):
<p>Le s&eacute;lecteur suivant repr&eacute;sente un &eacute;l&eacute;ment quelconque
dont l'attribut <tt>lang</tt> a la valeur "fr" (p.ex. dont la langue est le
Fran&ccedil;ais).
<pre>*[lang=fr]</pre>
Exemple(s):
<p>Le s&eacute;lecteur qui suit repr&eacute;sente un &eacute;l&eacute;ment quelconque
dont l'attribut <code>lang</code> a une valeur commen&ccedil;ant par &quot;en&quot;,
par exemple &quot;en&quot;, &quot;en-US&quot; ou "en-cockney":
<pre>*[lang|="en"]</pre>
Exemple(s):
<p>De m&ecirc;me, les s&eacute;lecteurs qui suivent repr&eacute;sentent un &eacute;l&eacute;ment
<tt>DIALOGUE</tt> ayant deux valeurs diff&eacute;rentes pour le m&ecirc;me
attribut <tt>character</tt>:
<pre>DIALOGUE[character=romeo]&nbsp;
DIALOGUE[character=juliet]</pre>
</div>
<h4><a name="attribute-substrings"></a>6.3.2 S&eacute;lecteurs de sous-cha&icirc;ne
dans la valeur d'un attribut</h4>
<p>Trois diff&eacute;rents s&eacute;lecteurs d'attribut sont disponibles pour
la repr&eacute;sentation d'une s&eacute;quence dans la valeur d'un attribut
:</p>
<dl>
<dt><tt>[att^=&quot;val&quot;]</tt></dt>
<dd>Repr&eacute;sente l'attribut <tt>att</tt>, sa valeur commen&ccedil;ant exactement
par le pr&eacute;fixe &quot;val&quot;</dd>
<dt><tt>[att$=ident]</tt></dt>
<dd>Repr&eacute;sente l'attribut <tt>att</tt>, sa valeur finissant exactement
par le pr&eacute;fixe &quot;ident&quot;</dd>
<dt><tt>[att*=&quot;val&quot;]</tt></dt>
<dd>Repr&eacute;sente l'attribut <tt>att</tt>, sa valeur contenant au moins
une fois la sous-cha&icirc;ne &quot;val&quot;</dd>
</dl>
<p>Les valeurs d'attributs doivent &ecirc;tre des identificateurs ou des cha&icirc;ne
de caract&egrave;res. La sensibilit&eacute; &agrave; la casse des noms d'attributs
et de leurs valeurs d&eacute;pend du langage de documents.</p>
<p>Exemple(s) :</p>
<p>Le s&eacute;lecteur suivant repr&eacute;sente un &eacute;l&eacute;ment HTML
<code>object</code>, ciblant une image.</p>
<pre>object[type^=&quot;image/&quot;]
</pre>
<p>Le s&eacute;lecteur suivant repr&eacute;sente un &eacute;l&eacute;ment XML
<code>foo1</code> portant l'attribut <code>bar</code>, la valeur de cet attribut
finissant par &quot;cpg&quot;.</p>
<pre>foo1[bar$=&quot;cpg&quot;]</pre>
<p>Le s&eacute;lecteur suivant repr&eacute;sente un paragraphe HTML dont la valeur
de l'attribut <code>title</code> contient la sous-cha&icirc;ne &quot;hello&quot;.</p>
<pre>p[title*=&quot;hello&quot;] </pre>
<h4><a name="attrnmsp">6.3.3 S&eacute;lecteurs d'attribut et Espace de noms</a></h4>
<p>Les s&eacute;lecteurs d'attribut peuvent contenir un composant optionel d'espace
de noms. Un pr&eacute;fixe correspondant &agrave; un espace de noms pr&eacute;alablement
d&eacute;clar&eacute; (via la r&egrave;gle-at <code>@namespace</code>) peut
pr&eacute;c&eacute;der le nom d'un attribut en les s&eacute;parant par le s&eacute;parateur
d'espace de noms "<tt>|</tt>". En conformit&eacute; avec la recommandation Namespaces
in XML, les espaces de noms par d&eacute;faut ne s'appliquent pas aux attributs,
et les s&eacute;lecteurs d'attributs sans composant d'espace de noms repr&eacute;sentent
donc seulement les attributs sans espace de noms d&eacute;clar&eacute; (&eacute;quivalent
&agrave; "<tt>|attr</tt>"). Une &eacute;toile peut &ecirc;tre utilis&eacute;e
comme composant d'espace de noms pour indiquer que le s&eacute;lecteur repr&eacute;sente
tous les attributs sans consid&eacute;ration d'espaces de noms.</p>
<p>Exemples CSS :</p>
<div class="example">
<pre>@namespace foo "http://www.foo.com";
[foo|att=val] { color: blue }
[*|att] { color: yellow }
[|att] { color: green }
[att] { color: green }</pre>
La premi&egrave;re r&egrave;gle s'appliquera uniquement aux &eacute;l&eacute;ments
portant l'attribut <tt>att</tt> dans l'espace de noms "http://www.foo.com" avec
la valeur "val".
<p>La second r&egrave;gle s'appliquera uniquement aux &eacute;l&eacute;ments
portant l'attribut <tt>att</tt> sans consid&eacute;ration d'espace de noms
(incluant ceux sans espace de noms d&eacute;clar&eacute;).
<p>Les deux derni&egrave;res r&egrave;gles sont &eacute;quivalentes et s'appliqueront
uniquement aux &eacute;l&eacute;ments portant l'attribut <tt>att</tt> sans
d&eacute;claration d'espace de noms.
</div>
<h4><a name="def-values">6.3.4 Valeurs d'attribut par d&eacute;faut dans les DTDs</a></h4>
<p>Les s&eacute;lecteurs d'attribut repr&eacute;sentent des valeurs d'attribut
dans l'arbre documentaire. Des valeurs d'attribut par d&eacute;faut peuvent
&ecirc;tre d&eacute;finies dans la DTD ou ailleurs. Les S&eacute;lecteurs W3C
doivent &ecirc;tre impl&eacute;ment&eacute;s de mani&egrave;re &agrave; fonctionner
m&ecirc;me si les valeurs par d&eacute;faut ne sont pas pr&eacute;sentes dans
l'arbre documentaire.</p>
<div class="example">Exemple(s):
<p>Par exemple, consid&eacute;rons un &eacute;l&eacute;ment <tt>EXAMPLE</tt>
avec un attribut <code>notation</code> ayant la valeur par d&eacute;faut "decimal".
Le fragment de DTD pourrait &ecirc;tre:</p>
<pre>&lt;!ATTLIST EXAMPLE notation (decimal,octal) "decimal"></pre>
Si les s&eacute;lecteurs suivants repr&eacute;sentent un &eacute;l&eacute;ment
<tt>EXAMPLE</tt> dont la valeur de l'attribut <code>notation</code> est explicitement
d&eacute;finie
<pre>EXAMPLE[notation=decimal]
EXAMPLE[notation=octal]</pre>
on pourra utiliser le s&eacute;lecteur qui suit pour repr&eacute;senter le cas
o&ugrave; l'attribut est d&eacute;fini par d&eacute;faut, et non explicitement:
<pre>EXAMPLE</pre>
</div>
<h3><a name="class-html">6.4 S&eacute;lecteurs de classe</a></h3>
<p> En HTML, les auteurs peuvent utiliser la notation point (<tt>.</tt>) comme
alternative &agrave; la notation <tt>~=</tt> notation dans le cas de l'attribut
<tt>class</tt>. En HTML, <tt>div.value</tt> et <tt>div[class~=value]</tt> ont
donc la m&ecirc;me signification. La valeur de l'attribut doit suivre imm&eacute;diatement
le "<tt>.</tt>". </p>
<div class="example">Exemple(s):
<p>On pourra repr&eacute;senter un &eacute;l&eacute;ment quelconque portant
<tt>class~="pastoral"</tt> de la mani&egrave;re suivante:
<pre>*.pastoral</pre>
ou tout simplement
<pre>.pastoral</pre>
Le s&eacute;lecteur suivant repr&eacute;sente un &eacute;l&eacute;ment <tt>h1</tt>
portant <tt>class~="pastoral"</tt>:
<pre>h1. 2258 pastoral</pre>
Exemple(s):
<p>Le s&eacute;lecteur suivant repr&eacute;sente un &eacute;l&eacute;ment <tt>p</tt>
dont l'attribut <tt>class</tt> contient une liste de valeurs s&eacute;par&eacute;es
par des espaces et contenant "pastoral" et "marine":
<pre>p.pastoral.marine</pre>
<p>Il est absolument identique &agrave; :</p>
<pre>p.marine.pastoral</pre>
<p>Ce s&eacute;lecteur repr&eacute;sente par exemple un &eacute;l&eacute;ment
<tt>p</tt> avec <tt>class="pastoral blue aqua marine"</tt> ou <tt>class="marine
blue pastoral aqua" </tt>mais pas avec <tt>class="pastoral blue"</tt>.</p>
</div>
<h3><a name="id-selectors">6.5 S&eacute;lecteurs d'ID</a></h3>
<p>Les langages de documents peuvent contenir des attributs qui sont d&eacute;clar&eacute;s
&ecirc;tre de type ID. Les attributs de type ID sont sp&eacute;ciaux en ce sens
que deux tels attributs ne peuvent pas avoir la m&ecirc;me valeur dans un document,
sans consid&eacute;ration du type des &eacute;l&eacute;ments qui les portent
; quelque soit le langage, un attribut <code>ID</code> peut &ecirc;tre utilis&eacute;