csswg-drafts/css2/selector.src at ff3c388aba9bf47d6443931053203b62becb26d7 · w3c/csswg-drafts · GitHub

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.0 Transitional//EN'>
<html lang="en">
<!-- $Id: selector.src,v 1.42 1997-12-29 22:03:05 ijacobs Exp $ -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Selectors</title>
<link rel="next" href="cascade.html">
<link rel="previous" href="syndata.html">
<link href="style/default.css" rel="STYLESHEET" type="text/css">
</head>
<body>
<h1 align="center">Selectors</h1>

<h2>Pattern matching</h2>

<p>In CSS, pattern matching rules determine which style rules apply to
elements in the <a href="convent.html#doctree">document
tree</a>. These patterns, called <span class="index-def"
title="selectors"><em>selectors,</em></span> may range from simple
element names to rich contextual patterns. If all conditions in the
pattern are true for a certain element, the selector
<dfn>matches</dfn> the element.

<P>The <span class="index-def" title="pattern
subject"><dfn>subject</dfn></span> of the pattern is the rightmost
part of the pattern (generally an element name). The style information
in the declaration block following the pattern applies to the subject
of the pattern.

<P>The case-sensitivity of document language element names in
selectors depends on the document language. For example, in HTML,
element names are case-insensitive, but in XML they are
case-sensitive.
<!-- [Keep this in sync with XML spec. BB]-->

<P>The following table summarizes CSS2 selector syntax:</P>

<table border>
<TR><TH>Pattern<TH>Meaning<TH>Described in section</TR>
<TR><TD>*<TD>Matches any element.<TD><a href="#universal-selector">Universal
selector</a></TR>
<TR><TD>E<TD>Matches any E element.<TD><a href="#type-selectors">Type
selectors</a></TR>
<TR><TD>A B<TD>Matches any B element that is a descendant of
an A element.<TD><a href="#descendant-selectors">Descendent
selectors</a></TR>
<TR><TD>A &gt;&gt; B<TD>Matches any B element that is a child of
an element A.<TD><a href="#child-selectors">Child selectors</a></TR>
<TR><TD>A:first-child<TD>Matches element A when A is the first
child of some other element
<TD><a href="#first-child">The :first-child pseudo-class</a></TR>
<TR><TD>E + F<TD>Matches any F element immediately preceded by
an element E.<TD><a href="#adjacent-selectors">Adjacent selectors</a>
</TR>
<TR><TD>E[foo]<TD>Matches any E element with the
"foo" attribute set (whatever the value).
<TD><a href="#attribute-selectors">Attribute selectors</a>
</TR>
<TR><TD>E[foo="warning"]<TD>Matches any E element whose
"foo" attribute value is exactly equal to "warning".
<TD><a href="#attribute-selectors">Attribute selectors</a>
</TR>
<TR><TD>E[foo~="warning"]<TD>Matches any E element whose
"foo" attribute value is a list of space-separated
of values, one of which is exactly equal to "warning".
<TD><a href="#attribute-selectors">Attribute selectors</a>
</TR>
<TR><TD>DIV.warning<TD>HTML only. The same as DIV[class~="warning"].
<TD><a href="#class-html">The "class" attribute in HTML</a></TR>
<TR><TD>E#myid<TD>Matches any E element with the "id" attribute
equal to "myid".<TD><a href="#id-selectors">ID selectors</a></TR>
</table>

<h2><a name="universal-selector">Universal selector</a></h2>

<P>The <span class="index-def" title="universal selector">universal
selector</span> matches the name of any element type. <!--It only matches
a single node in the document tree.-->

<P>The universal selector is written as an asterisk (*).

<P>In <a href="#attribute-selectors">attribute selectors</a>
and <a href="#id-selectors">id selectors</a>, the absence of
an explicit element name implies the universal selector. However,
we recommend that authors always include the "*" for clarity. For
example:</P>

<ul>
<li>*[LANG=fr] and [LANG=fr] are equivalent.
<li>*#myid and #myid are equivalent.
</ul>

<h2><a name="type-selectors">Type selectors</a></h2>

<p>A <span class="index-def" title="type selector"><em>type
selector</em></span> matches the name of a document language element
type. A type selector matches every instance of the element type in
the document tree.

<div class="example">
<P>The following type selector matches all H1 elements in the
document tree:

<pre>
  H1 { font-family: Helvetica }
</pre>
</div>

<p>Type selectors may be <a href="#grouping">grouped</a>.

<h2><a name="descendant-selectors">Descendent selectors</a></h2>

<p>At times, authors may want selectors to match an element that is
the descendant of another element in the document tree (e.g., "Match
those EM elements that are contained by an H1 element").
<span class="index-def" title="descendant-selectors">descendant
selectors</span> express such a relationship in a pattern.

<p>A contextual selector matches when an element B is an arbitrary
descendant of some <a href="convent.html#doctree">ancestor</a> element
A. A descendant selector is made up of two or more selectors separated
by white space.

<div class="example"><p>
For example, consider the following rules:</p>

<pre>
  H1 { color: red }
  EM { color: red }
</pre>

<p>Although the intention of these rules is to add emphasis to text by
changing its color, the effect will be lost in a case such as:</p>

<pre>
   &lt;H1&gt;This headline is &lt;EM&gt;very&lt;/EM&gt; important&lt;/H1&gt;
</pre>

<p>We address this case by supplementing the previous rules with a
rule that sets the text color to blue whenever an EM occurs anywhere
within an H1:</p>

<pre>
  H1 { color: red }
  EM { color: red }
  H1 EM { color: blue }
</pre>

<p>The third rule will also match the EM in the following fragment:</p>

<pre>
  &lt;H1&gt;This
     &lt;SPAN class="myclass"&gt;headline is &lt;EM&gt;very&lt;/EM&gt;
     important&lt;/SPAN&gt;&lt;/H1&gt;
</pre>
</div>

<div class="example"><P>
The following selector:

<PRE>
   DIV * P
</PRE>

<P>matches a P element that is a grandchild or later descendant
of a DIV element.
</div>

<p>Descendent selectors may be <a href="#grouping">grouped</a>.

<P>A descendant selector may also contain <a
href="#attribute-selectors">attribute selectors</a>.

<div class="example"><p>
For example, the following matches any element with an "href" attribute
inside a P with class "myclass" inside any DIV. Note that the space
after "myclass" is essential: without it the selector would match a P
with both a class and an "href":

<pre>
DIV P.myclass *[href]
</pre>
</div>

<h2><a name="child-selectors">Child selectors</a></h2>

<p>A <span class="index-def" title="child selector"> <em>child
selector</em></span> matches when an element is the <a
href="convent.html#doctree">child</a> of some element. A child
selector is made up of two or more selectors separated by "&gt;&gt;".

<div class="example"><p>
The following rule sets the style of all P elements that
are children of BODY:</p>

<pre>
  BODY &gt;&gt; P { line-height: 1.3 }
</pre>
</div>

<p>Child selectors may be <a href="#grouping">grouped</a>.

<p>A child selector may also contain <a
href="#attribute-selectors">attribute selectors</a>.

<p>Descendent selectors and child selectors may be combined.

<div class="example"><P>
For instance:

<pre>
DIV OL &gt;&gt; LI P
</pre>

<P>matches a P element that is a descendant of an LI; the LI element
must be the child of an OL element; the OL element must be a
descendant of a DIV.
</div>

<h3><a name="first-child">:first-child</a> pseudo-class</h3>

<P>The <span class="index-def" title="first-child">first-child</span>
<a href="#pseudo-classes">pseudo-class</a> allows authors to match
any element that is the first child of some other element.

<div class="example"><P>
In the following example, the selector matches any P element
that is the first child of a DIV element. The rule
suppresses indentation for the first paragraph of a DIV:

<PRE>
  DIV &gt;&gt; P:first-child { text-indent: 0 }
</PRE>

<P>This selector would match the P inside the DIV of the
following fragment:</p>

<pre class="html-example">
  &lt;P&gt; The last P before the note.
  &lt;DIV class="note"&gt;
     &lt;P&gt; The first P inside the note.
  &lt;/DIV&gt;
</pre>

<p>but would not match the second P in the following
fragment:</p>

<pre class="html-example">
  &lt;P&gt; The last P before the note.
  &lt;DIV class="note"&gt;
     &lt;H2&gt;Note&lt;/H2&gt;
     &lt;P&gt; The first P inside the note.
  &lt;/DIV&gt;
</pre>
</div>

<div class="example">
<p>The following rule sets the font weight to "bold" for any EM
element that is some descendant of a P element that is a first
child:</p>

<pre>
  *:first-child EM { font-weight : bold }
</pre>
</div>

<div class="note"><P>
<em><strong>Note.</strong>
<a href="flowobj.html#anonymous">Anonymous text boxes</a>
are not counted as an element when calculating the first child.</em>

<div class="html-example"><P>
For example, the EM in:

<PRE>
    &lt;P&gt;abc &lt;EM&gt;default&lt;/EM&gt;
</PRE>

<P>is the first child of the P.
</div>
</div>

<h2><a name="adjacent-selectors">Adjacent selectors</a></h2>

<p>Often, special formatting rules apply when two types of elements
appear next to each other in a document. For example, when block-level
elements are laid out, the vertical space between them collapses. In
this case, the special formatting is handled by the rules for <a
href="./flowobj2.html#collapsing-margins">collapsing margins,</a> but
in other cases of adjacent selectors, authors may want to specify
their own special formatting rules.</p>

<p>Adjacent selectors have the following syntax: E1 + E2, where E2
is the subject of the selector. The selector matches if E1 and E2
share the same parent in the document tree and E1 immediately precedes
E2.

<div class="example"><p>
Thus, the following rule states that when a P element immediately
follows a MATH element, it should not be indented:</p>

<pre>
  MATH + P { text-indent: 0 }
</pre>

<p>The next example reduces the vertical space separating
an H1 and an H2 that immediately follows it:

<pre>
  H1 + H2 { margin-top: -5mm }
</pre>
</div>

<p>Adjacent selectors may be <a href="#grouping">grouped</a>.

<p>Adjacent selectors may also contain <a
href="#attribute-selectors">attribute selectors</a>.

<p>Adjacent selectors may be combined with other types of
selectors.

<div class="example"><p>
Thus, for example, the following rule is similar to the one in the
previous example, except that the special formatting only occurs when
H1 has <samp>class="opener"</samp>:</p>

<pre>
  H1.opener + H2 { margin-top: -5mm }
</pre>
</div>

<h2><a name="attribute-selectors">Attribute selectors</a></h2>

<p>CSS2 allows authors to specify rules that match according to
attributes defined in the document language.

<h3>Matching attributes and attribute values</h3>

<P>Attribute selectors may match in three ways:

<dl>
<dt><code>[att]</code>
<dd>Match when the element sets the "att" attribute, whatever
the value of the attribute.
<dt><code>[att=val]</code>
<dd>Match when the element's "att" attribute value is exactly "val".
<dt><code>[att~=val]</code>
<dd>Match when the element's "att" attribute value is a
space-separated list of "words", one of which is exactly "val".
If this selector is used, the words in the value must not contain
spaces (since they are separated by spaces).
</dl>

<p>The case-sensitivity of attribute values depends on the document
language. For example, in HTML, attribute values are case-insensitive,
but in XML they are case-sensitive.

<p>Attribute values must be quoted or escaped if they are not
<a href="syndata.html#identifier">identifiers.</a>

<div class="example"><p>
For example, the following attribute selector
matches all H1 elements that specify the "title" attribute,
whatever its value:</p>

<pre>
   H1[title] { color: blue; }
</pre>
</div>

<div class="example"><p>
In the following example, the selector matches all SPAN elements whose
"class" attribute has exactly the value "example":</p>

<pre>
   SPAN[class=example] { color: blue; }
</pre>
</div>

<P>Attribute selectors may refer to several attributes, in which
case the attribute parts must follow one another, in any order.

<div class="example"><p>
Here, the selector matches all SPAN elements whose
"hello" attribute has exactly the value "Cleveland" and whose
"goodbye" attribute has exactly the value "Columbus":</P>

<pre>
   SPAN[hello="Cleveland"][goodbye="Columbus"] { color: blue; }
</pre>
</div>

<div class="example"><p>
The following rules illustrate the differences between "=" and "~=":</p>
<pre>
   A[rel~="copyright"] {...} /* matches, e.g., &lt;A rel="copyright copyleft ..." */
   td[colspan="2"] {...}     /* matches only &lt;TD colspan="2"&gt; ... */
</pre>
</div>

<div class="example"><P>
The following rule hides all elements for which the value of the
"lang" attribute is "fr" (i.e., the language is French).

<PRE>
*[LANG=fr] { display : none }
</PRE>
</div>

<h3><a name="class-html">The "class" attribute in HTML</a></h3>

<p>For style sheets used with HTML, authors may use the dot (.)
notation as an alternative to the "~=" notation. Thus, in HTML,
"DIV.value" and "DIV[class~=value]" have the same meaning. The
attribute value must immediately follow the ".".

<div class="example"><p>
For example, we can assign style information to all elements with
<samp>class~="pastoral"</samp> as follows:</p>

<pre>
  *.pastoral { color: green }  /* all elements with class=pastoral */
</pre>

<p>or just to H1 elements with <samp>class="pastoral"</samp>:</p>

<pre>
  H1.pastoral { color: green }  /* H1 elements with class=pastoral */
</pre>

<p>Given these rules, the first H1 instance below would not have green
text, while the second would:</p>

<pre>
  &lt;H1&gt;Not green&lt;/H1&gt;
  &lt;H1 class="pastoral"&gt;Very green&lt;/H1&gt;
</pre>
</div>

<!--<p>The normal inheritance rules apply to classed elements; they
inherit values from their parent in the document structure.</p>-->

<p>To match a subset of "class" values, each value must be preceded
by a ".", in any order.</P>

<div class="example"><P>
For example, the following rule matches any P element whose "class" attribute
has been assigned a list of space-separated values that includes "pastoral"
and "marine":</p>

<pre>
   P.pastoral.marine { color: green }
</pre>

<p>This rule matches when <samp>class="pastoral blue aqua
marine"</samp> but does not match for <samp>class="pastoral
blue"</samp>.</p>

<p>Similarly, the following aural style sheet rules allow a script
to be read aloud in different voices for each role:</p>

<pre>
   P.role.romeo  { voice-family: romeo, male }
   P.role.juliet { voice-family: juliet, female }
</pre>
</div>

<div class="note"><p> <em><strong>Note.</stro
1241
ng> CSS gives so much
power to the "class" attribute, that authors could conceivably design
their own "document language" based on elements with almost no
associated presentation (such as DIV and SPAN in HTML) and assigning
style information through the "class" attribute.  Authors should avoid
this practice since the structural elements of a document language
have recognized and accepted meanings and author-defined classes may
not.</em>
</div>

<h2><a name="id-selectors">ID selectors</a></h2>

<p>The ID attribute of a document language allows authors to assign an
identifier to a specific element instance in the document tree. This
identifier must be unique in the document tree. CSS ID selectors match
an element instance based on its identifier.
</p>

<p>Each document language may only contain on ID attribute.  In HTML
4.0, the ID attribute is called "id", but in an XML application it may
be called something else. The name of the ID attribute is immaterial
for CSS.

<p>A CSS "id" selector contains a "#" immediately followed by the "id"
value.</p>

<div class="example"><p>
The following ID selector matches the H1 element whose "id"
attribute has the value "chapter1":

<PRE>
H1#chapter1 { text-align: center }
</PRE>
</div>

<div class="html-example"><p>
In the following example, the style rule matches
any element that has the "id" value "z98y".
The rule will thus match for the P element:</p>

<pre>
  &lt;HEAD&gt;
  &lt;TITLE&gt;Match P&lt;/TITLE&gt;
  &lt;STYLE type="text/css"&gt;
     *#z98y { letter-spacing: 0.3em }
  &lt;/STYLE&gt;
  &lt;/HEAD&gt;
  &lt;BODY&gt;
     &lt;P id=z98y&gt;Wide text&lt;/P&gt;
  &lt;/BODY&gt;
</pre>

<p>In the next example, however, the style rule will only match an H1
element that has an "id" value of "z98y". The rule will not match the
P element in this example:</p>

<pre>
  &lt;HEAD&gt;
  &lt;TITLE&gt;Match H1 only&lt;/TITLE&gt;
  &lt;STYLE type="text/css"&gt;
     H1#z98y { letter-spacing: 0.5em }
  &lt;/STYLE&gt;
  &lt;/HEAD&gt;
  &lt;BODY&gt;
     &lt;P id=z98y&gt;Wide text&lt;/P&gt;
  &lt;/BODY&gt;
</pre>
</div>

<P>ID selectors have a higher precedence than attribute selectors.
For example, in HTML, the selector <samp>#p123</samp> is more specific
than <samp>[ID=p123]</samp> in terms of the <a
href="cascade.html">cascade</a>.

<h2><a name="grouping">Grouping</a></h2>

<p>When several selectors share the same declarations, they may be
grouped into a comma-separated list.</p>

<div class="example">
<P>In this example, we condense three rules with identical declarations
into one. Thus,

<pre>
  H1 { font-family: Helvetica }
  H2 { font-family: Helvetica }
  H3 { font-family: Helvetica }
</pre>

<p>is equivalent to:</p>

<pre>
  H1, H2, H3 { font-family: Helvetica }
</pre>
</div>

<P>CSS offers other "shortcut" mechanisms as well, including <a
href="syndata.html#declaration">multiple declarations</a> and <a
href="about.html#shorthand">shorthand properties</a>.


<h2><a name="pseudo-elements">Pseudo-elements</a> and <a
name="pseudo-classes">pseudo-classes</a></h2>

<p>In CSS2, style is normally attached to an element based on its
position in the <a href="convent.html#doctree">document tree</a>. This
simple model is sufficient for many cases, but some common publishing
scenarios (such as changing the font size of the first letter of a
paragraph) may be independent of the <a
href="convent.html#doctree">document tree</a>. For instance, in <a
href="./refs.html#ref-HTML40" rel="biblioentry"
class="informref">[HTML40]</a>, no element refers to the first line of
a paragraph, and therefore no simple CSS selector may refer to it.</p>

<p>CSS introduces the concepts of <span class="index-def"
title="pseudo-elements"><em>pseudo-elements</em></span> and <span
class="index-def"
title="pseudo-classes"><em>pseudo-classes</em></span> to permit
formatting based on information that lies outside the document
tree. </p>

<ul>
<li>Pseudo-elements refer to sub-parts of an
element's content (e.g., the first letter or first line of a
paragraph, etc.).
<li>Pseudo-classes refer to elements that are grouped
dynamically (e.g., all links that have been visited, all left-hand
pages, etc.)
</ul>

<P>Pseudo-classes are allowed anywhere in selectors while
pseudo-elements may only appear as the last segment of a selector.
</p>

<p>Although pseudo-elements and pseudo-classes do not exist in the
document tree, their behavior is defined as if they did. Each
pseudo-element and pseudo-class may be modeled by a <span
class="index-def" title="fictional tag sequence"><em>fictional tag
sequence,</em></span> a fragment of document source that includes
imaginary elements from the document language. The fictional tag
sequence is only a model used to describe the rendering effects of
pseudo-elements and pseudo-classes and does not indicate how these
should be implemented.

<p>Pseudo-elements and pseudo-class names are case-insensitive.</p>

<!--
<P> Some common typographical effects are associated not with
structural elements but rather with typographical items as rendered.
In CSS2, two such typographical items can be addressed
through <span class="index-inst"
title="pseudo-elements">pseudo-elements</span>: the first line of an
element, and the first letter.
-->

<p><a href="convent.html#conformance">Conforming</a> user agents may
ignore all rules with :first-line or :first-letter in the selector,
or, alternatively, may only support a subset of the properties on
these pseudo-elements.</P>

<div class="note"><p>
<em><strong>Note.</strong>
In CSS2, only one pseudo-element can be specified per
selector. This may change in future versions of CSS.
</em></p>
</div>

<h3>The <span class="index-def"
title="pseudo-elements:::first-line|:first-line"><a
name="first-line-pseudo">:first-line</a></span> pseudo-element</h3>

<p>The :first-line pseudo-element is used to apply special styles to
the first formatted line of a paragraph. For instance:</p>

<pre class="example">
  P:first-line { font-style: small-caps }
</pre>

<p>The above rule means "change the font style of the first line of
every paragraph to small-caps". However, the selector "P:first-line"
does not match any real HTML element. It does match a pseudo-element
that conforming user agents will insert at the beginning of every
paragraph.</p>

<p>Note that the length of the first line depends on a number of
factors, including the width of the page, the font size, etc. Suppose
for this example that the paragraph is broken into the lines indicated
in the example. Thus, an ordinary HTML paragraph such as:</p>

<pre class="html-example">
  &lt;P&gt;This is a somewhat long HTML paragraph that will
  be broken into several lines. The first line will be
  identified by a fictional tag sequence. The other lines will
  be treated as ordinary lines in the paragraph.&lt;/P&gt;
</pre>

<p>might be "rewritten" by user agents to include the fictional tag
sequence for :first-line.</p>

<pre>
  &lt;P&gt;
  &lt;P:first-line&gt;This is a somewhat long HTML paragraph that will&lt;/P:first-line&gt;
  be broken into several lines. The first line will be
  identified by a fictional tag sequence. The other lines will
  be treated as ordinary lines in the paragraph.&lt;/P&gt;
</pre>

<p>If a pseudo-element breaks up a real element, the necessary extra
tags must be regenerated in the fictional tag sequence. Thus, if we
mark up the previous paragraph with a SPAN element:</p>

<pre>
  &lt;P&gt;&lt;SPAN class="test"&gt;This is a somewhat long HTML paragraph that will
  be broken into several lines.&lt;/SPAN&gt; The first line will be
  identified by a fictional tag sequence. The other lines will
  be treated as ordinary lines in the paragraph.&lt;/P&gt;
</pre>

<p>The user agent should generate the appropriate start and end tags for
SPAN when inserting the fictional tag sequence for :first-line.</p>

<pre>
  &lt;P&gt;&lt;P:first-line&gt;&lt;SPAN class="test"&gt;This is a somewhat long HTML paragraph that will&lt;/SPAN&gt;&lt;/P:first-line&gt;
  &lt;SPAN&gt;be broken into several lines.&lt;/SPAN&gt; The first line will be
  identified by a fictional tag sequence. The other lines will
  be treated as ordinary lines in the paragraph.&lt;/P&gt;
</pre>

<p> The <span class="index-inst" title="pseudo-elements:::first-line">:first-line</span> pseudo-element can only be attached to
a block-level element.</p>

<p>The <a name="first-line">:first-line</a> pseudo-element is similar
to an inline element, but with certain restrictions. Only the
following properties apply to a :first-line element: <a
href="fonts.html#font-properties">font properties,</a> <a
href="colors.html">color properties,</a> <a
href="colors.html#background-properties">background properties,</a>
<span class="propinst-word-spacing">'word-spacing',</span> <span
class="propinst-letter-spacing">'letter-spacing',</span> <span
class="propinst-text-decoration">'text-decoration',</span> <span
class="propinst-vertical-align">'vertical-align',</span> <span
class="propinst-text-transform">'text-transform',</span> <span
class="propinst-line-height">'line-height',</span> and <span
class="propinst-clear">'clear'.</span></p>

<h3>The <span class="index-def" title="pseudo-elements:::first-letter|:first-letter">:first-letter</span> pseudo-element</h3>

<p>[Define better alignment of drop caps?  BB]</p>

<p>The <a name="first-letter">:first-letter</a> pseudo-element may be
used for <span class="index-inst" title="initial caps">"initial
caps"</span> and <span class="index-inst" title="drop caps">"drop
caps"</span>, which are common typographical effects. This type of
initial letter is similar to an inline element if its <span
class="propinst-float">'float'</span> property is 'none', otherwise it
is similar to a floating element.</p>

<p>These are the properties that apply to :first-letter
pseudo-elements: <a href="fonts.html#font-properties">font
properties,</a> <a href="colors.html">color
properties,</a> <a href="colors.html#background-properties">background
properties,</a> <span
class="propinst-text-decoration">'text-decoration',</span> <span
class="propinst-vertical-align">'vertical-align'</span> (only if
'float' is 'none'), <span
class="propinst-text-transform">'text-transform',</span> <span
class="propinst-line-height">'line-height',</span> <a
href="flowobj2.html#margin-properties">margin properties,</a> <a
href="flowobj2.html#padding-properties">padding properties,</a> <a
href="flowobj2.html#border-properties">border properties,</a> <span
class="propinst-float">'float',</span> and <span
class="propinst-clear">'clear'.</span></p>

<div class="html-example"><p></p>
<p>The following CSS2 will make a dropcap initial letter span two lines:</p>

<pre>
&lt;HTML&gt;
 &lt;HEAD&gt;
  &lt;TITLE&gt;Dropcap initial letter&lt;/TITLE&gt;
  &lt;STYLE type="text/css"&gt;
   P              { font-size: 12pt; line-height: 12pt }
   P:first-letter { font-size: 200%; font-style: italic; font-weight: bold; float: left }
   SPAN           { text-transform: uppercase }
  &lt;/STYLE&gt;
 &lt;/HEAD&gt;
 &lt;BODY&gt;
  &lt;P&gt;&lt;SPAN&gt;The first&lt;/SPAN&gt; few words of an article in The Economist.&lt;/P&gt;
 &lt;/BODY&gt;
&lt;/HTML&gt;
</pre>

<p>This example might be formatted as follows:</p>

<img src="./images/first-letter.gif" alt="Image illustrating the combined effect of the :first-letter and :first-line pseudo-elements">

<p>The <span class="index-inst" title="fictional tag
sequence">fictional tag sequence</span> is:</p>

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

<p>Note that the :first-letter pseudo-element tags abut the content
(i.e., the initial character), while the :first-line pseudo-element
start tag is inserted right after the start tag of the element to
which it is attached.</p>
</div>

<!-- Define quotes!!! - IJ -->

<p>The UA defines what characters are inside the :first-letter
element. Quotes that precede the first letter should be included, as
in:</p>

<img src="./images/first-letter2.gif" alt="Quotes that precede the
first letter should be included.">

<p> When the paragraph starts with other punctuation (e.g.,
parenthesis and ellipsis points) or other characters that are normally
not considered letters (e.g., digits and mathematical symbols),
:first-letter pseudo-elements are usually ignored.</p>

<p>The :first-letter pseudo-element can only be attached to a
block-level element.</p>

<div class="note"><p>
<em><strong>Note.</strong>
Some languages may have specific rules about how to treat certain
letter combinations. In Dutch, for example, if the letter combination
"ij" appears at the beginning of a word, they should both be
considered within the :first-letter pseudo-element.
</em></p>
</div>

<h3>The <span class="index-def"
title="pseudo-elements:::before|:before">:before</span> and <span
class="index-def" title="pseudo-elements:::after|:after">:after</span>
pseudo-elements</h3>

<p>The ':before' and ':after' pseudo-elements can be used to insert
fixed text before or after an element. They are explained in the
section on <a href="generate.html">generated text.</a>

<h3>Overlapping pseudo-elements</h3>

<p>Several pseudo-element rules may have an impact on the same
content.</p>

<div class="example"><p>
In the following example, the first letter of each P element will be
green with a font size of '24pt'. The rest of the first formatted line
will be 'blue' while the rest of the paragraph will be 'red'.</p>

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

  &lt;P&gt;Some text that ends up on two lines&lt;/P&gt;
</pre>

<p>Assuming that a line break will occur before the word "ends", the
<span class="index-inst" title="fictional tag sequence">fictional tag
sequence</span> for this fragment might be:</p>

<pre>
  &lt;P&gt;
  &lt;P:first-line&gt;
  &lt;P:first-letter&gt;
  S
  &lt;/P:first-letter&gt;ome text that
  &lt;/P:first-line&gt;
  ends up on two lines
  &lt;/P&gt;
</pre>

<p>Note that the :first-letter element is inside the :first-line
element.  Properties set on :first-line are inherited by
:first-letter, but are overridden if the same property is set on
:first-letter.</p>
</div>

<p>When the :first-letter and :first-line pseudo-elements are combined
with :before and :after, they apply to the first letter or line of the
element including the inserted text.

<h3>Pseudo-elements with contextual selectors</h3>

<p>In a contextual selector, pseudo-elements are only allowed at the
end of the selector.</p>

<div class="example"><p>
The following example illustrates this with the
<span class="index-inst" title=":first-letter">:first-letter</span>
pseudo-element.</p>

<pre>
  BODY P:first-letter { color: purple }
</pre>
</div>

<p><em>Pseudo-classes</em>, however, may also be used in contextual
selectors.</p>

<div class="example"><p>
The following example sets the border color to blue of all images that
descend from A elements that have not yet been visited:</p>
<pre>
  A:link IMG { border: solid blue }
</pre>
</div>

<h3><a name="anchor-pseudo-classes">Anchor pseudo-classes</a>:
<span class="index-def" title="pseudo-classes:::link|:link">:link,</span>
<span class="index-def" title="pseudo-classes:::active|:active">:active,</span> and <span class="index-def" title="pseudo-classes:::visited|:visited">:visited</span>
</h3>

<!-- <span class="index-def" title="pseudo-classes, :hover|:hover">:hover</span>-->

<p>User agents commonly display unvisited links differently from
previously visited ones. CSS2 allows authors to specify the rendering
of a link in one of several states:

<ul>
<li> The :link pseudo-class applies for links that have
not yet been visited.

<!--
<li> The :hover pseudo-class applies when the user designates,
but does not activate, a link. User agents may require a minimal
time delay before considering that a user has designated a link.
-->

<li> The :active pseudo-class applies while the link is being
activated by the user.
<li> The :visited pseudo-class applies once the link has been
visited by the user. <strong>Note.</strong>
After a certain amount of time, user agents may choose to
return a visited link to the (unvisited) 'link' state.
</ul>

<P>The three states are mutually exclusive.

<pre>
  A:link { color: red }       /* unvisited links */
  A:active { color: lime }    /* active links    */
  A:visited { color: blue }   /* visited links   */
</pre>
<!--  A:hover { color: yellow }   /* user hovers     */ -->


<p>User agents are not required to reformat a currently displayed
document due to anchor pseudo-class transitions. For instance, a style
sheet may legally specify that the <span
class="propinst-font-size">'font-size'</span> of an :active link
should be larger that a :visited link, but the UA is not required to
dynamically reformat the document when the reader selects the
:visited link.</p>

<div class="example"><p>
In HTML, the following two CSS2 declarations are equivalent and
select the same elements:</p>

<pre>
  A:link { color: red }
  :link { color: red }
</pre>
</div>


<h3>Combining pseudo-elements with attribute selectors</h3>

<p>Pseudo-classes can be combined with <a
href="#attribute-selectors">attribute selectors</a>. In this case, the
class name must precede the pseudo-class name in the selector.</p>

<div class="example"><p>
If the following link:

<pre class="html-example">
  &lt;P&gt;
  &lt;A class="external" href="http://out.side/"&gt;external link&lt;/A&gt;
</pre>

<P>has been visited, this rule:

<pre>
  A.external:visited { color: blue }
</pre>

<P>will cause it to be blue.
</div>

<p>Pseudo-elements can also be combined with attribute selectors.

<div class="example"><P>
Thus, the following rule:

<pre>
  P.initial:first-letter { color: red }
</pre>

<P>would make the first letter of all P elements with
<samp>class="initial"</samp> such as the following, the color 'red',
as in:</p>

<pre class="html-example">
  &lt;P class="initial"&gt;First paragraph&lt;/P&gt;
</pre>
</div>

<p>Pseudo-elements must be specified at the end of a selector.</p>

</body>
</html>
<!-- Keep this comment at the end of the file
Local variables:
mode: sgml
sgml-declaration:"~/SGML/HTML4.decl"
sgml-default-doctype-name:"html"
sgml-minimize-attributes:t
sgml-nofill-elements:("pre" "style" "br")
sgml-live-element-indicator:t
End:
-->