-
Notifications
You must be signed in to change notification settings - Fork 790
Expand file tree
/
Copy pathOverview.fr.html
More file actions
2460 lines (2324 loc) · 130 KB
/
Overview.fr.html
File metadata and controls
2460 lines (2324 loc) · 130 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!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="w3cLog
7DDE
o"></a>
<h1> Module CSS3 : Sé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ère version:</dt>
<dd> <a href="http://www.w3.org/TR/css3-selectors">http://www.w3.org/TR/css3-selectors</a></dd>
<dt> Versions précé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 Ç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 éditeur, anciennement de <span class=company><a
href="http://www.netscape.com/">Netscape/AOL</a></span>)</dd>
<dd> John Williams (ancien é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> ©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ésumé</h2>
<p>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 <em>sélecteurs</em>,
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. </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
& 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 & 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
& 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épendances aux autres Modules CSS3</h2>
<ul>
<li>Syntaxe Générale (Module 1)</li>
<li>Assignation de Valeur, Cascade et Héritage (Module 4)</li>
<li>Contenu Généré / Marqueurs (Module 14)</li>
<li>Interface Utilisateur (Module 17)</li>
</ul>
<div class="subtoc">
<h2><a name="contents">Table des matiè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 à CSS
2</a></li>
</ul>
<li class="tocline2"><a href="#selectors"&g
8DE2
t;2. Sélecteurs</a>
<li class="tocline2"><a href="#casesens">3. Sensibilité à la
casse</a>
<li class="tocline2"><a href="#selector-syntax">4. Syntaxe des sélecteurs</a>
<li class="tocline2"><a href="#grouping">5. Groupes de sélecteurs</a>
<li class="tocline2"><a href="#simple-selectors">6. Sélecteurs simples</a>
<ul class="toc">
<li class="tocline3"><a href="#type-selectors">6.1 Sélecteurs de
type d'élément</a>
<ul class="toc">
<li class="tocline4"><a href="#typenmsp">6.1.1 Sélecteurs de
type d'élément et Espaces de noms</a>
</ul>
<li class="tocline3"><a href="#universal-selector">6.2 Sélecteur
universel</a>
<ul>
<li><a href="#univnmsp">6.2.1 Sélecteur Universel et Espace
de noms</a></li>
</ul>
<li class="tocline3"><a href="#attribute-selectors">6.3 Sélecteurs
d'attribut</a>
<ul class="toc">
<li class="tocline4"><a href="#attribute-representation">6.3.1 Représentation
des attributs et de leurs valeurs</a>
<li><a href="#attribute-substrings">6.3.2 Sélecteurs de sous-chaîne
dans la valeur d'un attribut</a>
<li class="tocline4"><a href="#attrnmsp">6.3.3 Sélecteurs d'attribut
et Espaces de noms</a>
<li class="tocline4"><a href="#def-values">6.3.4 Valeur d'attribut
par défaut dans les DTDs</a>
</ul>
<li class="tocline3"><a href="#class-html">6.4 Sélecteurs de classe</a>
<li class="tocline3"><a href="#id-selectors">6.5 Sé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'état d'élé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égation</a>
</ul>
</ul>
<li><a href="#pseudo-elements">7. Pseudo-éléments</a>
<ul>
<li><a href="#first-line">7.1 Le pseudo-élément ::first-line</a>
</li>
<li><a href="#first-letter">7.2 </a><a href="#first-letter">Le pseudo-élément
::first-letter</a> </li>
<li><a href="#UIfragments">7.3 </a><a href="#UIfragments">Les pseudo-éléments
fragments d'éléments d'interface</a> </li>
<li><a href="#gen-content">7.4 Les pseudo-élé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écificité d'un sélecteur</a>
<li class="tocline2"><a href="#w3cselgrammar">10. La grammaire des sé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é et Critè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éférences</a>
</ul>
</div>
<h2><a name="context">1. Context</a>e</h2>
<p> Les membres du CSS & FP Working Group ont décidé durant
leur réunion de Clamart de la modularisation de la spécification
CSS. </p>
<p>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.</p>
<p>Cette spécification contient sa propre <a href="#Tests">suite de tests</a>,
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 <i>a minima</i> ou, au contraire, pas du tout.</p>
<h3><a name="changesFromCSS2"></a>1.1. Changements par rapport à CSS 2</h3>
<p>Les principales différences entre les Sélecteur CSS 2 et les
Sélecteurs W3C sont :</p>
<ul>
<li>la liste des définitions de base (sélecteur, groupe de sélecteurs,
sélecteur simple, etc.) a été clarifiée,</li>
<li>un composant optionel d'espace de noms est désormais autorisé
dans les sélecteurs de type, le sélecteur universel et les sélecteurs
d'attribut,</li>
<li>un nouveau combinateur,</li>
<li>de nouveaux sélecteurs simples comme les sélecteurs de sous-chaîne
dans une valeur d'attribut ou de nouvelles pseudo-classes,</li>
<li>de nouveaux pseudo-éléments,</li>
<li>une ré-écriture de la grammaire des sélecteurs,</li>
<li>des profils à ajouter aux spécifications intégrant
les Sélecteurs W3C et définissant le jeu de sélecteurs
reconnu et accepté par ces spécifications,</li>
<li>les Sélecteurs W3C sont désormais un Module CSS 3 et une spécification
indépendante. D'autres spécifications peuvent se référer
à ce document indépendamment des CSS,</li>
<li>la spécification contient désormais sa propre suite de tests.</li>
</ul>
<h2><a name="selectors"></a>2. Sélecteurs</h2>
<p>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.</p>
<p>Les sélecteurs W3C vont de la simple représentation du nom d'un
élément jusqu'à des représentations contextuelles
complexes.</p>
<p>La table qui suit résume la syntaxe des sélecteurs W3C :</p>
<table border width="100%" class="selectorsReview" >
<tr>
<th class="pattern" height="47">Séquence</th>
<th class="meaning" height="47">Signification</th>
<th class="described" height="47">Décrit en section</th>
<th class="origin" height="47">Défini originellement en CSS niveau</th>
</tr>
<tr>
<td class="pattern">*</td>
<td class="meaning">tout élément</td>
<td class="described"><a href="#universal-selector">Sélecteur universel</a></td>
<td class="origin">2</td>
</tr>
<tr>
<td class="pattern">E</td>
<td class="meaning">tout élément de type E</td>
<td class="described"><a href="#type-selectors">Sélecteur de type d'élément</a></td>
<td class="origin">1</td>
</tr>
<tr>
<td class="pattern">E[foo]</td>
<td class="meaning">tout élément E portant l'attribut "foo"</td>
<td class="described"><a href="#attribute-selectors">Sélecteurs d'attribut</a></td>
<td class="origin">2</td>
</tr>
<tr>
<td class="pattern">E[foo="bar"]</td>
<td class="meaning">tout élément E portant l'attribut"
foo" et dont la valeur de cet attribut est exactement "bar"</td>
<td class="described"><a href="#attribute-selectors">Sélecteurs d'attribut</a></td>
<td class="origin">2</td>
</tr>
<tr>
<td class="pattern">E[foo~="bar"]</td>
<td class="meaning">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"</td>
<td class="described"><a href="#attribute-selectors">Sélecteurs d'attribut</a></td>
<td class="origin">2</td>
</tr>
<tr>
<td class="pattern">E[foo^="bar"]</td>
<td class="meaning">tout élément E dont la valeur de l'attribut
"foo" commence exactement par la chaîne "bar"</td>
<td class="described"><a href="#attribute-selectors">Sélecteurs d'attribut</a></td>
<td class="origin">3</td>
</tr>
<tr>
<td class="pattern">E[foo$="bar"]</td>
<td class="meaning">tout élément E dont la valeur de l'attribut
"foo" finit exactement par la chaîne "bar"</td>
<td class="described"><a href="#attribute-selectors">Sélecteurs d'attribut</a></td>
<td class="origin">3</td>
</tr>
<tr>
<td class="pattern">E[foo*="bar"]</td>
<td class="meaning">tout élément E dont la valeur de l'attribut
"foo" contient la sous-chaîne "bar"</td>
<td class="described"><a href="#attribute-selectors">Sélecteurs d'attribut</a></td>
<td class="origin">3</td>
</tr>
<tr>
<td class="pattern">E[lang|="en"]</td>
<td class="meaning">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"</td>
<td class="described"><a href="#attribute-selectors">Sélecteurs d'attribut</a></td>
<td class="origin">2</td>
</tr>
<tr>
<td class="pattern">E:root</td>
<td class="meaning">un élé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 cl
10910
ass="pattern">E:nth-child(n)</td>
<td class="meaning">un élément E qui est le n-iè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 élément E qui est le n-iè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 élément E qui est le n-iè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 élément E qui est le n-iè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 élé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 élé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 élé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 élé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 élé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 élé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 élé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 é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)</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 élé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 élément E qui est la cible de l'URL d'origine
contenant lui-mê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 élément E dont le langage (humain) est
c (le langage du document spécifie comment le langage humain est
déterminé)</td>
<td class="described"><a href="#lang-pseudo">La pseudo-classe :lang() </a></td>
<td class="origin">2</td>
</tr>
<tr>
<td class="pattern">E:enabled<br>
E:disabled </td>
<td class="meaning">un élément d'interface utilisateur E qui
est actif ou inactif.</td>
<td class="described"><a href="#UIstates">Les pseudo-classes d'état
d'élément d'interface</a></td>
<td class="origin">3</td>
</tr>
<tr>
<td class="pattern">E:checked<br>
E:indeterminate </td>
<td class="meaning">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)</td>
<td class="described"><a href="#UIstates">Les pseudo-classes d'état
d'élément d'interface</a></td>
<td class="origin">3</td>
</tr>
<tr>
<td class="pattern">E:contains("foo")</td>
<td class="meaning">un élément E dont le contenu textuel concaténé
contient la sous-chaîne "foo"</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ère ligne formatée d'un élé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ère formaté d'un élément
E</td>
<td class="described"><a href="#first-letter">Le pseudo-élé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 élément E qui est actuellement
sélectionnée/mise en exergue par l'usager</td>
<td class="described"><a href="#UIfragments">Les pseudo-éléments
fragments d'éléments d'interface</a></td>
<td class="origin">3</td>
</tr>
<tr>
<td class="pattern">E::before</td>
<td class="meaning">le contenu généré avant un élément
E</td>
<td class="described"><a href="#gen-content">Le pseudo-élément
::before </a></td>
<td class="origin">2</td>
</tr>
<tr>
<td class="pattern">E::after</td>
<td class="meaning">le contenu généré après un
élément E</td>
<td class="described"><a href="#gen-content">Le pseudo-élé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 à E[class~="warning"].</td>
<td class="described"><a href="#class-html">Sélecteurs de classe</a></td>
<td class="origin">1</td>
</tr>
<tr>
<td class="pattern">E#myid</td>
<td class="meaning">un élément E dont l'ID est égal à
"myid".</td>
<td class="described"><a href="#id-selectors">Sélecteurs d'ID</a></td>
<td class="origin">1</td>
</tr>
<tr>
<td class="pattern">E:not(s)</td>
<td class="meaning"> un élément E qui n'est pas représenté
par le sélecteur simple s</td>
<td class="described"><a href="#negation">La pseudo-classe de négation</a></td>
<td class="origin">3</td>
</tr>
<tr>
<td class="pattern">E F</td>
<td class="meaning">un élément F qui est le descendant d'un
élé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 élément F qui est le fils d'un élé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 élément F immédiatement précédé
par un élé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 élément F précédé
par un élé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é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".
<h2><a name="casesens">3. Sensibilité à la casse</a></h2>
<p>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</p>
<p>La sensibilité à la casse des noms d'attribus et des valeurs
d'attributs dépend également du langage de documents.</p>
<h2><a name="selector-syntax">4. Syntaxe des sélecteurs</a></h2>
<p>Un <dfn><a name="selector">sélecteur</a></dfn> est une chaîne
d'une ou plusieurs <a href="#sequence">séquences de sélecteurs
simples</a> séparés par des <a href="#combinators">combinateurs</a>.
</p>
<p>Une <dfn><a name="sequence">séquence de sélecteurs simples</a></dfn>
est une chaîne de <a href="#simple-selectors-dfn">sélecteurs simples</a>
qui ne sont pas séparés par des <a href="#combinators">combinateurs</a>.
Ele commence toujours par un <a href="#type-selectors">sélecteur de type
d'élément</a> ou un <a href="#universal-selector">sélecteur
universel</a>. Aucun autre sélecteur de type d'élément
ou sélecteur universel n'est autorisé dans la séquence.</p>
<p>Un <dfn><a name="simple-selectors-dfn"></a><a href="#simple-selectors">sélecteur
simple</a></dfn> est soit un <a href="#type-selectors">sélecteur de type
d'élément</a>, un <a href="#universal-selector">sélecteur
universel</a>, un <a href="#attribute-selectors">sélecteur d'attribut</a>,
un <a href="#id-selectors">sélecteur d'ID</a>, un <a href="#content-selectors">sélecteur
de contenu</a> ou une <a href="#pseudo-classes">pseudo-classe</a>. Un <a href="#pseudo-elements">pseudo-élément</a>
peut suivre la dernière séquence de sélecteurs simples.</p>
<p>Les <dfn>combinateurs</dfn> sont : l'espace, "<tt>></tt>", "<tt>+</tt>" et
"<tt>~</tt>". Un espace peut être présent entre un combinateur
et les sélecteurs simples qui l'entourent. <a name="whitespace"></a>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.
<h2><a name="grouping">5. Groupes de sélecteurs</a></h2>
<p>Quand plusieurs sélecteurs sont associés aux mêmes déclarations,
ils peuvent être groupés en les séparant par des virgules.</p>
<div class="example">Exemples CSS :
<p>Dans cette exemple, les trois règles CSS sont réduites à
une seule :</p>
<pre>h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }</pre>
est équivalent à :
<pre>h1, h2, h3 { font-family: sans-serif }</pre>
</div>
<p><b>Attention</b> : 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.</p>
<h2><a name="simple-selectors">6. Sélecteurs</a> simples</h2>
<h3><a name="type-selectors">6.1 Sélecteur de type d'élément</a></h3>
<p>Un <dfn>sélecteur de type d'élément </dfn> 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.</p>
<div class="example">Exemple(s):
<p>Le sélecteur suivant représente un élé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électeur de
type d'élément</a> et Espaces de noms</h4>
<p> 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 <tt>@namespace</tt>) peut être
préfixé à un nom d'élément en les séparant
par le séparateur d'espace de noms "<tt>|</tt>". 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 à "<tt>*|</tt>") 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.</p>
<p>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 "<tt>h1</tt>"serait
équivalent au sélecteur "<tt>|h1</tt>" et non pas au sélecteur
"<tt>*|h1</tt>". 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.</p>
<p>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. </p>
<p>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 <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é</a> d'un élément. Voir <a href="#downlevel">ci-dessous</a>
pour les comparaisons effectuées dans un outils ne gérant pas
les espaces de noms. </p>
<p>En résumé :</p>
<dl>
<dt><tt>ns|E</tt></dt>
<dd>éléments E dans l'espace de nom ns </dd>
<dt><tt>*|E</tt></dt>
<dd>éléments E dans tout espace de noms, y compris ceux sans espace
de noms déclaré </dd>
<dt><tt>|E</tt></dt>
<dd>éléments E sans espace de noms déclaré</dd>
<dt><tt>E</tt></dt>
<dd>si aucun espace de noms par défaut n'a été déclaré,
ceci est équivalent à *|E. Sinon, c'est équivalent à
ns|E où ns est l'espace de noms par défaut.</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ère règle sélectionnera uniquement les éléments
<tt>h1</tt> dans l'espace de noms "http://www.foo.com".</p>
<p>La seconde règle sélectionnera tous les éléments
de l'espace de noms "http://www.foo.com".</p>
<p>La troisième règle sélectionnera uniquement les éléments
<tt>h1</tt> elements sans déclaration d'espace de noms.</p>
<p>La quatrième règle sélectionnera les éléments
<tt>h1</tt> dans tout espace de noms (y compris ceux sans espace de noms déclaré).</p>
<p>La dernière règle est équivalente à la quatrième
car aucun espace de noms par défaut n'a été défini.</p>
</div>
<h3><a name="universal-selector">6.2 Sélecteur universel</a></h3>
<p> Le <dfn>sélecteur universel</dfn>, d&eacu
685E
te;noté"<tt>*</tt>",
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 <a href="#univnmsp">Sélecteur universel et Espaces
de noms</a>.</p>
<p>Si le sélecteur universel n'est pas le seul composant d'une séquence
de sélecteurs simples, le <tt>*</tt> peut être omis. Par exemple:
</p>
<div class="example">
<ul>
<li><tt>*[LANG=fr] </tt>et <tt>[LANG=fr]</tt> sont équivalents,</li>
<li><tt>*.warning</tt> et <tt>.warning</tt> sont équivalents,</li>
<li><tt>*#myid</tt> et <tt>#myid</tt> sont équivalents.</li>
</ul>
</div>
<p><b>Attention </b>: il est recommandé de ne pas omettre le <code>*</code>,
representant le sélecteur universel.</p>
<h4><a name="univnmsp">6.2.1 Sélecteur universel et Espace de noms</a></h4>
<p>Le sélecteur universel peut contenir un composant optionel d'espace
de noms</p>
<dl>
<dt><tt>ns|*</tt></dt>
<dd>tous les éléments de l'espace de noms ns</dd>
<dt><tt>*|*</tt></dt>
<dd>tous les éléments</dd>
<dt><tt>|*</tt></dt>
<dd>tous les éléments sans espace de noms déclaré</dd>
<dt><tt>*</tt></dt>
<dd>si aucun espace de noms par défaut n'a été spécifié,
ceci est équivalent à *|*. Dans le cas contraire, c'est équivalent
à ns|* où ns est l'espace de noms par défaut.</dd>
</dl>
<h3><a name="attribute-selectors">6.3 Sélecteurs d'attribut</a></h3>
<p>Les sélecteurs W3C permettent de représenter les attributs attachés
à un élément. </p>
<h4><a name="attribute-representation">6.3.1 </a>Représentation
des attributs et des valeurs d'attributs</h4>
<p>Quatre différents sélecteurs d'attribut sont disponibles :</p>
<dl>
<dt> </dt>
<dt> <tt>[att]</tt></dt>
<dd> Représente l'attribut<tt> att</tt>, quelque soit la valeur de l'attribut.</dd>
<dt> <tt>[att=val]</tt></dt>
<dd> Représente l'attribut <tt>att</tt>, sa valeur étant exactement
égale à "val".</dd>
<dt> <tt>[att~=val]</tt></dt>
<dd> Représente l'attribut <tt>att</tt>, sa valeur étant une liste
de mots séparés par des espaces, l'un de ces mots étant
exactement "val". En cas d'usage de ce sélecteur, les mots dans la
valeur ne doivent pas être séparés par des espaces (puisqu'ils
sont séparés par des espaces).</dd>
<dt> <tt>[att|=val]</tt></dt>
<dd> Représente l'attribut <tt>att</tt>, sa valeur étant une liste
de mots séparés par des tirets et commençant par "val".
La comparaison se fait toujours au début de la valeur de l'attribut.
Ceci est principalement destiné à la sélection de sous-codes
linguistiques (p.ex. l'attribut <code>LANG</code> en HTML) conformément
à 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 ê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.</p>
<div class="example">Exemple(s):
<p>Par exemple, le sélecteur suivant représente un élé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électeur représente un élément
<code>span</code> dont l'attribut <code>class</code> a exactement la veleur
"exemple":
<pre>span[class=exemple]</pre>
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.
<p>Exemple(s):
<p>Ici, le sélecteur représente un élément <code>span</code>
dont l'attribut <code>hello</code> a exactement la valeur "Cleveland"
et dont l'attribut <code>goodbye</code> a exactement la valeur "Columbus":
<pre>span[hello="Cleveland"][goodbye="Columbus"]</pre>
Exemple(s):
<p>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 <tt>rel</tt>. Le second
sélecteur représentera uniquement un élé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électeur suivant représente un élément quelconque
dont l'attribut <tt>lang</tt> a la valeur "fr" (p.ex. dont la langue est le
Français).
<pre>*[lang=fr]</pre>
Exemple(s):
<p>Le sélecteur qui suit représente un élément quelconque
dont l'attribut <code>lang</code> a une valeur commençant par "en",
par exemple "en", "en-US" ou "en-cockney":
<pre>*[lang|="en"]</pre>
Exemple(s):
<p>De même, les sélecteurs qui suivent représentent un élément
<tt>DIALOGUE</tt> ayant deux valeurs différentes pour le même
attribut <tt>character</tt>:
<pre>DIALOGUE[character=romeo]
DIALOGUE[character=juliet]</pre>
</div>
<h4><a name="attribute-substrings"></a>6.3.2 Sélecteurs de sous-chaîne
dans la valeur d'un attribut</h4>
<p>Trois différents sélecteurs d'attribut sont disponibles pour
la représentation d'une séquence dans la valeur d'un attribut
:</p>
<dl>
<dt><tt>[att^="val"]</tt></dt>
<dd>Représente l'attribut <tt>att</tt>, sa valeur commençant exactement
par le préfixe "val"</dd>
<dt><tt>[att$=ident]</tt></dt>
<dd>Représente l'attribut <tt>att</tt>, sa valeur finissant exactement
par le préfixe "ident"</dd>
<dt><tt>[att*="val"]</tt></dt>
<dd>Représente l'attribut <tt>att</tt>, sa valeur contenant au moins
une fois la sous-chaîne "val"</dd>
</dl>
<p>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.</p>
<p>Exemple(s) :</p>
<p>Le sélecteur suivant représente un élément HTML
<code>object</code>, ciblant une image.</p>
<pre>object[type^="image/"]
</pre>
<p>Le sélecteur suivant représente un élément XML
<code>foo1</code> portant l'attribut <code>bar</code>, la valeur de cet attribut
finissant par "cpg".</p>
<pre>foo1[bar$="cpg"]</pre>
<p>Le sélecteur suivant représente un paragraphe HTML dont la valeur
de l'attribut <code>title</code> contient la sous-chaîne "hello".</p>
<pre>p[title*="hello"] </pre>
<h4><a name="attrnmsp">6.3.3 Sélecteurs d'attribut et Espace de noms</a></h4>
<p>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 <code>@namespace</code>) peut
précéder le nom d'un attribut en les séparant par le séparateur
d'espace de noms "<tt>|</tt>". 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
à "<tt>|attr</tt>"). 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.</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ère règle s'appliquera uniquement aux éléments
portant l'attribut <tt>att</tt> dans l'espace de noms "http://www.foo.com" avec
la valeur "val".
<p>La second règle s'appliquera uniquement aux éléments
portant l'attribut <tt>att</tt> sans considération d'espace de noms
(incluant ceux sans espace de noms déclaré).
<p>Les deux dernières règles sont équivalentes et s'appliqueront
uniquement aux éléments portant l'attribut <tt>att</tt> sans
déclaration d'espace de noms.
</div>
<h4><a name="def-values">6.3.4 Valeurs d'attribut par défaut dans les DTDs</a></h4>
<p>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.</p>
<div class="example">Exemple(s):
<p>Par exemple, considérons un élément <tt>EXAMPLE</tt>
avec un attribut <code>notation</code> ayant la valeur par défaut "decimal".
Le fragment de DTD pourrait être:</p>
<pre><!ATTLIST EXAMPLE notation (decimal,octal) "decimal"></pre>
Si les sélecteurs suivants représentent un élément
<tt>EXAMPLE</tt> dont la valeur de l'attribut <code>notation</code> est explicitement
définie
<pre>EXAMPLE[notation=decimal]
EXAMPLE[notation=octal]</pre>
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:
<pre>EXAMPLE</pre>
</div>
<h3><a name="class-html">6.4 Sélecteurs de classe</a></h3>
<p> En HTML, les auteurs peuvent utiliser la notation point (<tt>.</tt>) comme
alternative à 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ême signification. La valeur de l'attribut doit suivre immédiatement
le "<tt>.</tt>". </p>
<div class="example">Exemple(s):
<p>On pourra représenter un élément quelconque portant
<tt>class~="pastoral"</tt> de la manière suivante:
<pre>*.pastoral</pre>
ou tout simplement
<pre>.pastoral</pre>
Le sélecteur suivant représente un élément <tt>h1</tt>
portant <tt>class~="pastoral"</tt>:
<pre>h1.pastoral</pre>
Exemple(s):
<p>Le sélecteur suivant représente un élément <tt>p</tt>
dont l'attribut <tt>class</tt> contient une liste de valeurs séparées
par des espaces et contenant "pastoral" et "marine":
<pre>p.pastoral.marine</pre>
<p>Il est absolument identique à :</p>
<pre>p.marine.pastoral</pre>
<p>Ce sélecteur représente par exemple un élé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électeurs d'ID</a></h3>
<p>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 <code>ID</code> peut être utilisé