forked from w3c/csswg-drafts
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathOverview.html
More file actions
1295 lines (1030 loc) · 47.1 KB
/
Overview.html
File metadata and controls
1295 lines (1030 loc) · 47.1 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//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang=en>
<head
profile="http://dublincore.org/documents/2008/08/04/dc-html/ http://www.w3.org/2006/03/hcard">
<meta content="text/html; charset=UTF-8" http-equiv=Content-Type>
<title>CSS Pseudo-elements Module Level 4</title>
<link href="http://purl.org/dc/terms/" rel=schema.dcterms>
<link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
rel=dcterms.rights>
<meta content="CSS Pseudo-elements Module Level 4" name=dcterms.title>
<meta content=text name=dcterms.type>
<meta content=2012-11-26 name=dcterms.issued>
<meta content="Daniel Glazman" name=dcterms.creator>
<meta content="Alan Stearns" name=dcterms.creator>
<meta content=W3C name=dcterms.publisher>
<meta content="http://www.w3.org/TR/2012/ED-copyright-documents-20121126/"
name=dcterms.identifier>
<script defer=defer src="css-pseudochildren_files/annotate.js"
type="text/javascript"></script>
<link href="../shared/style/default.css" rel=stylesheet type="text/css">
<link href="http://dev.w3.org/csswg/shared/style/alternate-spec-style.css"
id=st rel=stylesheet title="alternate spec style" type="text/css">
<link href="http://www.w3.org/StyleSheets/TR/w3c-unofficial.css"
rel=stylesheet type="text/css">
<body class=example>
<p><br>
<div class=head id=div-head>
<h1 id=css-pseudochildren-module>CSS Pseudo-elements Module Level 4</h1>
<h2 class="no-num no-toc" id=longstatus-date>22 June 2012</h2>
<dl>
<dt>This version:
<dd>TBD
<dt>Latest version:
<dd>27 August 2012
<dt>Previous version:
<dd>TBD
<dt>Editors:
<dd class=vcard><span class=fn>Daniel Glazman</span>, on behalf of <span
class=org>Adobe Systems, Inc.</span>
<dd class=vcard><span class=fn>Alan Stearns</span>, <span class=org>Adobe
Systems, Inc.</span>, <span class=email>stearns@adobe.com</span>
<dt>Issues List:
<dd>TBD
<dt>Discussion:
<dd><a
href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a>
with subject line "<code>[css4-pseudo] message topic</code>"
</dl>
<p class=copyright><a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
rel=license>Copyright</a> © 2012 <a href="http://www.w3.org/"><abbr
title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
href="http://www.csail.mit.edu/"><abbr
title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
href="http://www.ercim.eu/"><abbr
title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
<a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
<a
href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
and <a
href="http://www.w3.org/Consortium/Legal/copyright-documents">document
use</a> rules apply.
<hr title="Separator for header">
</div>
<details class=obsolete open=open> <summary>Not Ready For
Implementation</summary>
<p> This spec is not yet ready for implementation. It exists in this
repository to record the ideas and promote discussion.
<p> Before attempting to implement this spec, please contact the CSSWG at
www-style@w3.org.
</details>
<h2 class="no-num no-toc" id=abstract>Abstract</h2>
<div>
<p>This document extracts the notion of pseudo-elements from the Selectors
3 specification and proposes to extend it to be able to create and style
an arbitrary number of pseudo-elements <em>before</em>, <em>after</em> an
element.<br>
</div>
<h2 class="no-num no-toc" id=status-of-this-document>Status of this
document</h2>
<p>This document is a submission by Adobe Systems Inc. to the CSS Working
Group for discussion.
<h2 class="no-num no-toc" id=table-of-contents>Table of contents</h2>
<!--begin-toc-->
<ul class=toc>
<li><a href="#pseudo-elements"><span class=secno>1.
</span>Pseudo-elements</a>
<ul class=toc>
<li><a href="#first-line"><span class=secno>1.1. </span>The ::first-line
pseudo-element</a>
<ul class=toc>
<li><a href="#first-formatted-line"><span class=secno>1.1.1.
</span>First formatted line definition in CSS</a>
</ul>
<li><a href="#first-letter"><span class=secno>1.2. </span>The
::first-letter pseudo-element</a>
<ul class=toc>
<li><a href="#application-in-css"><span class=secno>1.2.1.
</span>Application in CSS</a>
</ul>
<li><a href="#gen-content"><span class=secno>1.3. </span>The ::before
and ::after pseudo-elements</a>
<ul class=toc>
<li><a href="#ordinal-before-and-after"><span class=secno>1.3.1.
</span>Multiple ::before and ::after pseudo-elements using
ordinals</a>
<li><a href="#the-nth-before-nth-after-nth-last-before"><span
class=secno>1.3.2. </span>The ::nth-before(), ::nth-after(),
::nth-last-before() and ::nth-last-after() pseudo-elements </a>
</ul>
</ul>
<li><a href="#additions-to-the-css-object-model"><span class=secno>2.
</span>Additions to the CSS Object Model</a>
<ul class=toc>
<li><a href="#interface-csspseudoelement"><span class=secno>2.1.
</span>Interface CSSPseudoElement</a>
<li><a href="#interface-csspseudoelementlist"><span class=secno>2.2.
</span>Interface CSSPseudoElementList</a>
<li><a href="#addition-to-the-window"><span class=secno>2.3.
</span>Addition to the window</a>
</ul>
<li class=no-num><a href="#ACKS">Acknowledgements</a>
<li class=no-num><a href="#references"> References</a>
<ul class=toc>
<li class=no-num><a href="#normative-references"> Normative
references</a>
<li class=no-num><a href="#other-references"> Other references</a>
</ul>
<li class=no-num><a href="#index"> Index</a>
</ul>
<!--end-toc-->
<h2 id=pseudo-elements><span class=secno>1. </span>Pseudo-elements</h2>
<p>Pseudo-elements create abstractions about the document tree beyond those
specified by the document language. For instance, document languages do
not offer mechanisms to access the first letter or first line of an
element's content. Pseudo-elements allow authors to refer to this
otherwise inaccessible information. Pseudo-elements may also provide
authors a way to refer to content that does not exist in the source
document (e.g., the <code>::before</code> and <code>::after</code>
pseudo-elements give access to generated content). <br>
<p>Pseudo-elements can be placed anywhere relatively to the element
creating them although the state of the art currently allows only the
following :
<ul>
<li>inside the element and before the element's content
<li>inside the element and after the element's content
<li>inside the element's contents at any depth
</ul>
<p>
<p>The notation for a pseudo-element is made of two colons
(<code>::</code>) followed by the name of the pseudo-element, possibly
immediately followed by a block of parenthesis containing comma-separated
arguments.<br>
<p>For compatibility with existing style sheets, user agents must also
accept the previous one-colon notation for pseudo-elements introduced in
CSS levels 1 <a href="#CSS1" rel=biblioentry>[CSS1]<!--{{CSS1}}--></a> and
2 <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{CSS21}}--></a> (namely
<code>:first-line</code>, <code>:first-letter</code>, <code>:before</code>
and <code>:after</code>). This compatibility is not allowed for the new
pseudo-elements introduced in this specification.
<h3 id=first-line><span class=secno>1.1. </span>The ::first-line
pseudo-element</h3>
<p>The <code>::first-line</code> pseudo-element describes the contents of
the first formatted line of an element.
<div class=example>
<p>CSS example:
<pre>p::first-line { text-transform: uppercase }</pre>
<p>The above rule means "change the letters of the first line of every
<code>p</code> element to uppercase".
<p>The selector <code>p::first-line</code> does not match any real
document element. It does match a pseudo-element that conforming user
agents will insert at the beginning of every <code>p</code> element.
</div>
<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. Thus, an ordinary
HTML <a href="#HTML5" rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>
paragraph such as:
<pre><P>This is a somewhat long HTML paragraph that will be broken into several lines. The first line will be identifiedby a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.</P></pre>
<p>the lines of which happen to be broken as follows:
<pre>THIS IS A SOMEWHAT LONG HTML PARAGRAPH THATwill be broken into several lines. The firstline will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.</pre>
<p>This paragraph might be "rewritten" by user agents to include the
<em>fictional tag sequence</em> for <code>::first-line</code>. This
fictional tag sequence helps to show how properties are inherited.
<pre><P><b><P::first-line></b> This is a somewhat long HTML paragraph that <b></P::first-line></b> will be broken into severallines. The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.</P></pre>
<p>If a pseudo-element breaks up a real element, the desired effect can
often be described by a fictional tag sequence that closes and then
re-opens the element. Thus, if we mark up the previous paragraph with a
<code>span</code> element:
<pre><P><b><SPAN class="test"></b> This is a somewhat long HTMLparagraph that will be broken into severallines.<b></SPAN></b> The first line will be identifiedby a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.</P></pre>
<p>the user agent could simulate start and end tags for <code>span</code>
when inserting the fictional tag sequence for <code>::first-line</code>.
<pre><P><P::first-line><b><SPAN class="test"></b> This is asomewhat long HTMLparagraph that will <b></SPAN></b></P::first-line><b><SPAN class="test"></b> bebroken into severallines.<b></SPAN></b> The first line will be identifiedby a fictional tag sequence. The other lineswill be treated as ordinary lines in the paragraph.</P></pre>
<h4 id=first-formatted-line><span class=secno>1.1.1. </span><dfn
id=first-formatted-line0>First formatted line</dfn> definition in CSS</h4>
<p>In CSS, the <code>::first-line</code> pseudo-element can only have an
effect when attached to a block-like container such as a block box,
inline-block, table-caption, or table-cell.
<p>The first formatted line of an element may occur inside a block-level
descendant in the same flow (i.e., a block-level descendant that is not
out-of-flow due to floating or positioning). For example, the first line
of the <code>DIV</code> in <code><DIV><P>This
line...</P></DIV></code> is the first line of the
<code>P</code> (assuming that both <code>P</code> and <code>DIV</code> are
block-level).
<p>The first line of a table-cell or inline-block cannot be the first
formatted line of an ancestor element. Thus, in <code><DIV><P
STYLE="display: inline-block">Hello<BR>Goodbye</P>
etcetera</DIV></code> the first formatted line of the <code>DIV
</code> is not the line "Hello".
<p class=note><span class=note-prefix>Note </span> Note that the first
line of the <code>p</code> in this fragment:
<code><p><br>First...</code> doesn't contain any letters
(assuming the default style for <code>br</code>). The word "First" is not
on the first formatted line.
<p>A User-Agent should act as if the fictional start tags of the
<code>::first-line</code> pseudo-elements were nested just inside the
innermost enclosing block-level element. (Since CSS1 and CSS2 were silent
on this case, authors should not rely on this behavior.) For example, the
fictional tag sequence for
<pre><DIV> <P>First paragraph</P> <P>Second paragraph</P></DIV></pre>
<p>is
<pre><DIV> <P><DIV::first-line><P::first-line>First paragraph</P::first-line></DIV::first-line></P> <P><P::first-line>Second paragraph</P::first-line></P></DIV></pre>
<p>The <code>::first-line</code> pseudo-element is similar to an
inline-level element, but with certain restrictions. The following CSS
properties apply to a <code>::first-line</code> pseudo-element: font
properties, color property, background properties, ‘<code
class=property>word-spacing</code>’, ‘<code
class=property>letter-spacing</code>’, ‘<code
class=property>text-decoration</code>’, ‘<code
class=property>vertical-align</code>’, ‘<code
class=property>text-transform</code>’, ‘<code
class=property>line-height</code>’. User-Agents may apply other
properties as well.
<p>During CSS inheritance, the portion of a child element that occurs on
the first line only inherits properties applicable to the
<code>::first-line</code> pseudo-element from the
<code>::first-line</code> pseudo-element. For all other properties
inheritence is from the non-pseudo-element parent of the first line pseudo
element. (The portion of a child element that does not occur on the first
line always inherits from the parent of that child.)
<h3 id=first-letter><span class=secno>1.2. </span>The ::first-letter
pseudo-element</h3>
<p>The <code>::first-letter</code> pseudo-element represents the first
letter of an element, if it is not preceded by any other content (such as
images or inline tables) on its line. The ::first-letter pseudo-element
may be used for "initial caps" and "drop caps", which are common
typographical effects.
<p>Punctuation (i.e, characters defined in Unicode in the "open" (Ps),
"close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po) punctuation
classes), that precedes or follows the first letter should be included. <a
href="#UNICODE" rel=biblioentry>[UNICODE]<!--{{!UNICODE}}--></a>
<div class=figure>
<p><img alt="Quotes that precede the first letter should be included."
src="http://www.w3.org/TR/selectors/first-letter2.png">
</div>
<p>The <code>::first-letter</code> also applies if the first letter is in
fact a digit, e.g., the "6" in "67 million dollars is a lot of money."
<p class=note><span class=note-prefix>Note </span> In some cases the
<code>::first-letter</code> pseudo-element should include more than just
the first non-punctuation character on a line. For example, combining
characters must be kept with their base character. Additionally, some
languages may have specific rules about how to treat certain letter
combinations. The User-Agent definition of <code>::first-letter</code>
should include at least the default grapheme cluster as defined by UAX29
and may include more than that as appropriate. In Dutch, for example, if
the letter combination "ij" appears at the beginning of an element, both
letters should be considered within the <code>::first-letter</code>
pseudo-element. <a href="#UAX29"
rel=biblioentry>[UAX29]<!--{{UAX29}}--></a>
<p>If the letters that would form the <code>::first-letter</code> are not
in the same element, such as "‘<code class=css>T" in
<code><p>'<em>T...</code>, the User-Agent may create a
<code>::first-letter</code> pseudo-element from one of the elements, both
elements, or simply not create a pseudo-element.</code>
<p>Similarly, if the first letter(s) of the block are not at the start of
the line (for example due to bidirectional reordering), then the
User-Agent need not create the pseudo-element(s).
<div class=example>
<p>Example:
<p><a name=overlapping-example></a>The following CSS and HTML example
illustrates how overlapping pseudo-elements may interact. 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 ‘<code
class=property>blue</code>’ while the rest of the paragraph will be
‘<code class=property>red</code>’.
<pre>p { color: red; font-size: 12pt }p::first-letter { color: green; font-size: 200% }p::first-line { color: blue }<P>Some text that ends up on two lines</P></pre>
<p>Assuming that a line break will occur before the word "ends", the <span
class=index-inst id=fictional-tag-sequence
title="fictional tag sequence">fictional tag sequence</span> for this
fragment might be:
<pre><P><P::first-line><P::first-letter> S </P::first-letter>ome text that </P::first-line> ends up on two lines </P></pre>
<p>Note that the <code>::first-letter</code> element is inside the
<code>::first-line</code> element. Properties set on
<code>::first-line</code> are inherited by <code>::first-letter</code>,
but are overridden if the same property is set on
<code>::first-letter</code>.
</div>
<p>The first letter must occur on the <a href="#first-formatted-line">first
formatted line.</a> For example, in this HTML fragment:
<code><p><br>First...</code> the first line doesn't contain
any letters and <code>::first-letter</code> doesn't match anything
(assuming the default style for <code>br</code> in HTML 4). In particular,
it does not match the "F" of "First."
<h4 id=application-in-css><span class=secno>1.2.1. </span>Application in
CSS</h4>
<p>In CSS, the <code>::first-letter</code> pseudo-element applies to
block-like containers such as block, list-item, table-cell, table-caption,
and inline-block elements. <span class=note><strong>Note:</strong> A
future version of this specification may allow this pseudo-element to
apply to more display types.</span>
<p>The <code>::first-letter</code> pseudo-element can be used with all such
elements that contain text, or that have a descendant in the same flow
that contains text. A User-Agent should act as if the fictional start tag
of the ::first-letter pseudo-element is just before the first text of the
element, even if that first text is in a descendant.
<div class=example>
<p>Example:
<p>The fictional tag sequence for this HTML fragment:
<pre><div><p>The first text.</pre>
<p>is:
<pre><div><p><div::first-letter><p::first-letter>T</...></...>he first text.</pre>
</div>
<p>In CSS the first letter of a table-cell or inline-block cannot be the
first letter of an ancestor element. Thus, in <code><DIV><P
STYLE="display: inline-block">Hello<BR>Goodbye</P>
etcetera</DIV></code> the first letter of the <code>DIV</code> is
not the letter "H". In fact, the <code>DIV</code> doesn't have a first
letter.
<p>If an element is a list item (‘<code class=css>display:
list-item</code>’), the <code>::first-letter</code> applies to the first
letter in the principal box after the marker. User-Agents may ignore
<code>::first-letter</code> on list items with ‘<code
class=css>list-style-position: inside</code>’. If an element has
<code>::before</code> or <code>::after</code> content, the
<code>::first-letter</code> applies to the first letter of the element
<em>including</em> that content.
<div class=example>
<p>Example:
<p>After the rule <code>p::before {content: "Note: "}</code>, the selector
<code>p::first-letter</code> matches the "N" of "Note".
</div>
<p>In CSS a ::first-line pseudo-element is similar to an inline-level
element if its ‘<code class=property>float</code>’ property is
‘<code class=property>none</code>’; otherwise, it is similar to a
floated element. The following properties that apply to
<code>::first-letter</code> pseudo-elements: font properties, ‘<code
class=property>text-decoration</code>’, ‘<code
class=property>text-transform</code>’, ‘<code
class=property>letter-spacing</code>’, ‘<code
class=property>word-spacing</code>’ (when appropriate), ‘<code
class=property>line-height</code>’, ‘<code
class=property>float</code>’, ‘<code
class=property>vertical-align</code>’ (only if ‘<code
class=property>float</code>’ is ‘<code class=property>none</code>’),
margin properties, padding properties, border properties, color property,
background properties. User-Agents may apply other properties as well. To
allow User-Agents to render a typographically correct drop cap or initial
cap, the User-Agent may choose a line-height, width and height based on
the shape of the letter, unlike for normal elements.
<div class=example>
<p>Example:
<p>This CSS and HTML example shows a possible rendering of an initial cap.
Note that the ‘<code class=property>line-height</code>’ that is
inherited by the <code>::first-letter</code> pseudo-element is 1.1, but
the User-Agent in this example has computed the height of the first
letter differently, so that it doesn't cause any unnecessary space
between the first two lines. Also note that the fictional start tag of
the first letter is inside the <span>span</span>, and thus the font
weight of the first letter is normal, not bold as the <span>span</span>:
<pre>p { line-height: 1.1 }p::first-letter { font-size: 3em; font-weight: normal }span { font-weight: bold }...<p><span>Het hemelsche</span> gerecht heeft zich ten lange lesten<br>Erbarremt over my en mijn benaeuwde vesten<br>En arme burgery, en op mijn volcx gebed<br>En dagelix geschrey de bange stad ontzet.</pre>
<div class=figure>
<p><img alt="Image illustrating the ::first-letter pseudo-element"
src="http://www.w3.org/TR/selectors/initial-cap.png">
</div>
</div>
<div class=example>
<p>The following CSS will make a drop cap initial letter span about two
lines:
<pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><HTML> <HEAD> <TITLE>Drop cap initial letter</TITLE> <STYLE type="text/css"> P { font-size: 12pt; line-height: 1.2 } P::first-letter { font-size: 200%; font-weight: bold; float: left } SPAN { text-transform: uppercase } </STYLE> </HEAD> <BODY> <P><SPAN>The first</SPAN> few words of an article in The Economist.</P> </BODY></HTML></pre>
<p>This example might be formatted as follows:
<div class=figure>
<p><img
alt="Image illustrating the combined effect of the ::first-letter and ::first-line pseudo-elements"
src="http://www.w3.org/TR/selectors/first-letter.png">
</div>
<p>The <span class=index-inst id=fictional-tag-sequence0
title="fictional tag sequence">fictional tag sequence</span> is:
<pre><P><SPAN><P::first-letter>T</P::first-letter>he first</SPAN> few words of an article in the Economist.</P></pre>
<p>Note that the <code>::first-letter</code> 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
block element.
</div>
<p>In order to achieve traditional drop caps formatting, user agents may
approximate font sizes, for example to align baselines. Also, the glyph
outline may be taken into account when formatting.
<h3 id=gen-content><span class=secno>1.3. </span>The ::before and ::after
pseudo-elements</h3>
<p>The <code>::before</code> and <code>::after</code> pseudo-elements can
be used to describe generated content before or after an element's
content. They are explained in CSS 2.1 <a href="#CSS21"
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
<p>When the <code>::first-letter</code> and <code>::first-line</code>
pseudo-elements are applied to an element having content generated using
<code>::before</code> or <code>::after</code> pseudo-elements, they apply
to the first letter or line of the element including the generated
content.
<p>
<p>A <a href="http://www.w3.org/TR/CSS2/syndata.html#rule-sets">CSS
rule</a> using <code>::before</code> or <code>::after</code> creates a
pseudo-element only if the <a
href="http://www.w3.org/TR/CSS2/cascade.html#computed-value">computed
values</a> of the ‘<code class=css><a
href="http://www.w3.org/TR/CSS2/generate.html#content">content</a></code>’
property and the ‘<code class=css><a
href="http://www.w3.org/TR/css3-regions/#the-flow-from-property"><span
class=property>flow-from</span></a></code>’ property <a
href="#CSS3-REGIONS"
rel=biblioentry>[CSS3-REGIONS]<!--{{CSS3-REGIONS}}--></a> are not both
‘<code class=property>none</code>’.
<div class=issue>
<p>There are a11y issues with ::before and ::after pseudo-elements and
generated content that were raised in the discussion of the following
sections.
</div>
<h4 id=ordinal-before-and-after><span class=secno>1.3.1. </span>Multiple
::before and ::after pseudo-elements using ordinals</h4>
<p>More than one ::before or ::after pseudo-element can be created or
accessed by adding a positive integer called the <strong>ordinal</strong>
in parentheses.
<div class=issue>
<p>Using ordinals solves issues of insertion order, but does not provide a
meaningful name for a particular ::before or ::after element. A named
psuedo-element could provide better meaning, at the expense of ordering.
</div>
<p>The ordinal 1 has a special meaning:<code> </code>
<ul>
<li><code>::before(1)</code> and <a
href="http://www.w3.org/TR/CSS2/generate.html#before-after-content"><code>::before</code></a>
are strictly equivalent
<li><code>::after(1)</code> and <a
href="http://www.w3.org/TR/CSS2/generate.html#before-after-content"><code>::after</code></a>
are also strictly equivalent.
</ul>
<p><code>::before()</code> and <code>::after()</code> pseudo-elements are
ordered by increasing ordinal from the nearest element's contents
boundaries. For example:
<div class=example>
<p>Let's take the example of a div element creating two ::before
pseudo-elements at ordinals 1 and 4, and three ::after pseudo-elements at
ordinals 1, 5 and 8. The rules would look like this:
<pre>div::before(1) {}div::before(4) {}div::after(1) {}div::after(5) {}div::after(8) {} </pre>
The pseudo-elements and the contents of the element are then ordered in
this way:
<pre>-- element's boundary -- [ ordinal 4, before ] [ ::before, ordinal 1, before ] -- element's contents boundary -- -- element's contents boundary -- [ ::after, ordinal 1, after ] [ ordinal 5, after ] [ ordinal 8, after ]-- element's boundary -- </pre>
</div>
<div class=example>
<p>One use of multiple <code>::before</code> and <code>::after</code>
elements is to mix generated content with graphical effects.
Pseudo-elements are used in quotes both for adding quotation marks in
generated content OR for drawing a speech bubble arrow. With multiple
<code>::before</code> and <code>::after</code> elements you can get both.
<p>This effect: <img src="images/quote-arrow.png"> can be achieved with
this code:
<pre>div::before { content: "“";} div::after { content: "”";} div::after(2) { content: "."; position: absolute; bottom: -10px; right: 20%; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #111; width: 0; height: 0;}div{ position: relative; float: left; background: #111; padding: 1em; border-radius: 1em; color: white;} <div>I'm talking about CSS Pseudo-elements.</div></pre>
<p>And if you have a single quote from multiple speakers, more arrows can
be added by adding more <code>::after()</code> pseudo-elements: <img
src="images/multiple-arrows.png">
<p>In general, there's no longer a limitation to two instances for
whatever a <code>::before</code> or <code>::after</code> pseudo-element
can be used (generated content, graphic effects, clearfix, etc.).
</div>
<div class=example>
<p>Another use of multiple <code>::before</code> and <code>::after</code>
pseudo-elements is to change the style of pieces of generated content. If
a citation appended to a quote should be in a different font than the
quotation mark, two ::after() pseudo-elements can be used.</p>
<img src="images/multiple-styles.png">
<pre>blockquote::before { content: "“";} blockquote::after { content: "”";} blockquote::after(2) { content: " - " attr(data-author); font: normal 0.8em sans-serif;} <blockquote data-author="Mark Twain">The funniest things are the forbidden.</blockquote></pre>
</div>
<div class=issue>
<p>An issue has been raised on the previous example, questioning whether
using attr(data-author) in this way is appropriate for use in an example.
</div>
<div class=example>
<p>A use for ordinals is to allow muliple stylesheets to add their own
<code>::before</code> and <code>::after</code> pseudo-elements and
coordinate insertion positions.
<p>If one stylesheet uses a single <code>::before(10) {}</code> rule, then
another stylesheet gets the option to
<ul>
<li>Add to or redefine that rule
<li>Add an additional pseudo-element before that one with
<code>::before(5) {}</code>
<li>Add an additional pseudo-element after that one with
<code>::before(15) {}</code>
</ul>
</div>
<div class=example>
<p>Pseudo-elements can be used to generate boxes in CSS for a <a
href="http://dev.w3.org/csswg/css3-regions/#region-chain">region
chain</a>. Allowing more than two such boxes per element could allow the
main CSS Regions <a
href="http://dev.w3.org/csswg/css3-regions/#named-flows-and-regions">example</a>
to be <a
href="http://dev.w3.org/csswg/css3-regions/#intro-example-code">written</a>
without empty divs for the regions in the markup.
<p>Region chains with a fixed number of regions (usually with an
auto-height region at the end of the chain) can be defined entirely in
CSS using multiple pseudo-elements.
<pre><style> #grid { width: 80vw; height: 60vw; grid-template: "aaa.d" "....d" "bbb.d" "....d" "ccc.d"; grid-rows: 52% 4% 20% 4% 20%; grid-columns: 30% 5% 30% 5% 30%; } #grid::before(2) { grid-cell: a; } #grid::before { grid-cell: b; } #boxA { grid-cell: c; } #grid::after { grid-cell: d; } #body::after { width: 80vw; } #grid::before { column-count: 2; } article { flow-into: article_flow; } #grid::before(2), #grid::before, #grid::after, #body::after { flow-from: article_flow; } </style><article> <h1>Introduction</h1> <p>This is an example ...</p> <h2>More Details</h2> <p>This illustrates ...</p> <p>Then, the example ...</p> <p>Finally, this ...</p></article><div id="grid"> <div id="boxA"></div></div></pre>
</div>
<div class=issue>
<p>Several choices of syntax for declaring multiple ::before and ::after
pseudo-elements have been considered.
<ul>
<li>Brackets - <code>::before[2]</code>
<ul></ul>
<p>Benefits
<li>Can reserve bracket syntax for ordinals
<li>Could be appended to an otherwise-parenthesized pseudo
<code>::hypothetical(args)[ordinal]</code>
</ul>
<ul></ul>
<p>Drawbacks
<ul>
<li>Looks too much like attribute selectors
</ul>
<ul>
<li>Add a generic ordinal syntax - ::pseudo(before, 2)
<ul></ul>
<p>Benefits
<li>Easily extensible to addition pseudos
<li>Parallel to ::nth-pseudo() syntax
</ul>
<ul></ul>
<p>Drawbacks
<ul>
<li>Only used for ::before and ::after so far
<li>More to type
</ul>
<ul>
<li>Parentheses - <code>::before(2)</code>
<ul></ul>
<p>Benefits
<li>No attribute selector confusion
<li>Previous attempts have used this syntax
</ul>
<ul></ul>
<p>Drawbacks
<ul>
<li>Perhaps harder to distinguish ordinal from index?
</ul>
</div>
<div class=issue>
<p>We arbitrarily chose the order here. Pseudo-elements could be ordered
differently, for example as in:<br>
<pre>-- element's boundary -- [ ::before, ordinal 1, before ] [ ordinal 4, before ] -- element's contents boundary -- -- element's contents boundary -- [ ordinal 8, after ] [ ordinal 5, after ] [ ::after, ordinal 1, after ]-- element's boundary --</pre>
<p>or
<pre>-- element's boundary -- [ ::before, ordinal 1, before ] [ ordinal 4, before ] -- element's contents boundary -- -- element's contents boundary -- [ ::after, ordinal 1, after ] [ ordinal 5, after ] [ ordinal 8, after ]-- element's boundary --</pre>
<p>We expect to resolve this issue with the CSS Working Group.
</div>
<h4 id=the-nth-before-nth-after-nth-last-before><span class=secno>1.3.2.
</span>The ::nth-before(), ::nth-after(), ::nth-last-before() and
::nth-last-after() pseudo-elements</h4>
<p>The new <code>::nth-before()</code>, <code>::nth-after()</code>,
<code>::nth-last-before()</code> and <code>::nth-last-after()</code>
pseudo-elements select ::before and ::after pseudo-elements based on
indices, not ordinals. They all take a single mandatory argument:
<ol>
<li>a mandatory <strong>index</strong> in the form of <a
href="http://www.w3.org/TR/css3-selectors/#nth-child-pseudo">an
<code>an+b</code> syntax or the <code>odd</code> or <code>even</code>
keywords</a>
</ol>
<div class=issue>
<p>Extensions to selector syntax may allow pseudo-classes after a
pseudo-element. In that case, the syntax in this section could change to
something like <code>::before:nth()</code>, <code>::after:nth()</code>,
<code>::before:nth-last()</code> and <code>::after:nth-last()</code>.
</div>
<div class=issue>
<p>Is ::nth-before(n) to access all ::before pseudo-elements enough of an
override mechanism?
</div>
<div class=example>
<p>Let's reuse the example in Example 8 above and let's show the indices:
<pre>-- element's boundary -- [ ordinal 4, before, nth index 2, last-nth index 1 ] [ ::before, ordinal 1, before, nth index 1, last-nth index 2 ] -- element's contents boundary -- -- element's contents boundary -- [ ::after, ordinal 1, after, nth index 1, last-nth index 3 ] [ ordinal 5, after, nth index 2, last-nth index 2 ] [ ordinal 8, after, nth index 3, last-nth index 1 ]-- element's boundary -- </pre>
</div>
<p><code>::nth-*()</code> syntax cannot create a new pseudo-element and the
‘<code class=property>content</code>’ and ‘<code
class=property>flow-from</code>’properties do not apply to them.
<p>They are allowed as the second parameter of
<code>ViewCSS.getComputedStyle()</code> if and only if the index parameter
can select only one pseudo-element: for instance <code>12</code> or
<code>0n+5</code>.
<h2 id=additions-to-the-css-object-model><span class=secno>2.
</span>Additions to the CSS Object Model</h2>
<p>Pseudo-elements should be reachable by script, stylable from script, and
available as event targets.
<p class=note><span class=note-prefix>Note </span>We may extend this
section in the future to allow creation of pseudo-elements from script.
<h3 id=interface-csspseudoelement><span class=secno>2.1. </span>Interface
CSSPseudoElement</h3>
<p>The <code>CSSPseudoElement</code> interface allows pseudo-elements to be
styleable from script and makes them event targets.
<div class=issue>
<p>The approach in this draft is to start with a bare minimum for the
CSSPseudoElement interface and build up from there. Another more radical
approach could take everything that's common between a pseudo-element and
a node and create a new base class for both Node and CSSPseudoElement.
</div>
<pre
class=idl>interface CSSPseudoElement {<br> readonly attribute unsigned long <a
href="#dom-csspseudochild-ordinal">ordinal</a>;<br> // the ordinal of a column is its index<br> readonly attribute DOMString <a
href="#dom-csspseudochild-type">type</a>;<br> readonly attribute <a
href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration">CSSStyleDeclaration</a> <a
href="#dom-csspseudochild-style">style</a>;<br>};<br><br>CSSPseudoElement implements EventTarget;<br></pre>
<p><a name=dom-csspseudochild-ordinal></a>The
<code><strong><em>ordinal</em></strong></code> attribute represents the
ordinal of the pseudo-element for the object's type. It is a strictly
positive integer. The value <code>1</code> for the <code>before</code>
(or <code>after</code>, <code>letter</code> and <code>line</code>) types
represents the <code>::before</code> (or <code>::after</code>,
<code>::first-letter</code> and <code>::first-line</code>)
pseudo-elements.
<p><a name=dom-csspseudochild-type></a>The
<code><strong><em>type</em></strong></code> attribute is a string
representing the type of the pseudo-element. This can be one of the
following values:
<dl>
<dt>‘before’
<dd>The pseudo-element was created before the element's contents
<dt>‘after’
<dd>The pseudo-element was created after the element's contents
<dt>‘letter’
<dd>The pseudo-element is the first letter of the element; the only valid
ordinal is 1.
<dt>‘line’
<dd>The pseudo-element is the first line of the element; the only valid
ordinal is 1.
<dt>‘column’
<dd>The pseudo-element is a column created by the element through the CSS
Multi-column Layout Module. In that case its
<code><strong><em>ordinal</em></strong></code> is the index of column in
the collection of columns created by the element.
</dl>
<p><a name=dom-csspseudochild-style></a>The
<code><strong><em>style</em></strong></code> attribute is a
<code>CSSStyleDeclaration</code> <a href="#CSSOM"
rel=biblioentry>[CSSOM]<!--{{!CSSOM}}--></a> allowing to set directly
style information (inline styles) onto the pseudo-element. Inline styles
on a <code>CSSPseudoElement</code> have precedence over all style rules
styling that pseudo-element.
<p>The <a
href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget"><code>EventTarget</code></a>
interface <a href="#DOM-LEVEL-2-EVENTS"
rel=biblioentry>[DOM-LEVEL-2-EVENTS]<!--{{!DOM-LEVEL-2-EVENTS}}--></a>
must be implemented by all instances of <code>CSSPseudoElement</code> in
an in implementation which supports the current specification.
<h3 id=interface-csspseudoelementlist><span class=secno>2.2.
</span>Interface CSSPseudoElementList</h3>
<p>The <code>CSSPseudoElementList</code> represents an ordered collection
of <code> CSSPseudoElement</code> instances.
<pre
class=idl>interface CSSPseudoElementList {<br> readonly attribute unsigned long <a
href="#dom-csspseudochildlist-length">length</a>;<br> CSSPseudoElement <a
href="#dom-csspseudochildlist-item">item</a>(unsigned long index);<br> CSSPseudoElement <a
href="#dom-csspseudochildlist-getbyordinalandtype">getByOrdinalAndType</a>(unsigned long ordinal,<br> DOMString type);<br> // replies null if no pseudo-element does not exist for<br> // the requested ordinal and type<br>};</pre>
<p><a name=dom-csspseudochildlist-length></a>The
<code><strong><em>length</em></strong></code> attribute represents the
number of <code>CSSPseudoElement</code> in the collection or zero if it is
empty.
<p><a name=dom-csspseudochildlist-item></a>The method
<code><strong><em>item()</em></strong></code> is used to retrieve a
<code>CSSPseudo</code><code>Element</code> by index. It takes one
parameter being the requested index into the collection. Its return value
is the <code>CSSPseudo</code><code>Element</code> at the requested index
in the collection or null if that is not a valid index.
<p><a name=dom-csspseudochildlist-getbyordinalandtype></a>The method
<code><strong><em>getByOrdinalAndType()</em></strong></code> is used to
retrieve a <code>CSSPseudo</code><code>Element</code> by its ordinal and
type. It takes two parameters: first, the requested ordinal; second a
type. Its return value is the <code>CSSPseudo</code><code>Element</code>
at the requested index in the collection or null if there is no
<code>CSSPseudo</code><code>Element</code> in the collection for that
index and type.
<h3 id=addition-to-the-window><span class=secno>2.3. </span>Addition to the
window</h3>
<p>A new method is added to the <code>Window</code> interface to retrieve
pseudo-elements created by a given element for a given type:
<pre class=idl>partial interface Window {<br> CSSPseudoElementList <a
href="#dom-window-getpseudochildren">getPseudoElements</a>(Element elt,<br> DOMString type);<br>};</pre>
<p><a name=dom-window-getpseudochildren></a>The method
<code>getPseudoElements()</code> is used to retrieve all
<code>CSSPseudoElement</code> instances created by the element
<code>elt</code> for the type <code>type</code>. Its return value is a
<code>CSSPseudoElementList</code>, potentially empty if no pseudo-element
exists for the given element and the given type.
<h2 class=no-num id=ACKS>Acknowledgements</h2>
<p>The editors would like to thank the following individuals for their
contributions, either during the conception of the specification or during
its development and specification review process:
<blockquote>
<p>Tab Atkins, Razvan Caliman, Chris Coyier, Anders Grimsrud, Vincent
Hardy and the CSS Working Group members.
</blockquote>
<h2 class=no-num id=references> References</h2>
<h3 class=no-num id=normative-references> Normative references</h3>
<!--begin-normative-->
<!-- Sorted by label -->
<dl class=bibliography>
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
<!---->
<dt id=CSS21>[CSS21]
<dd>Bert Bos; et al. <a
href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
2011. W3C Recommendation. URL: <a
href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
</dd>
<!---->
<dt id=CSSOM>[CSSOM]
<dd>Anne van Kesteren. <a
href="http://www.w3.org/TR/2011/WD-cssom-20110712/"><cite>CSSOM.</cite></a>
12 July 2011. W3C Working Draft. (Work in progress.) URL: <a
href="http://www.w3.org/TR/2011/WD-cssom-20110712/">http://www.w3.org/TR/2011/WD-cssom-20110712/</a>
</dd>
<!---->
<dt id=DOM-LEVEL-2-EVENTS>[DOM-LEVEL-2-EVENTS]
<dd>Tom Pixley. <a
href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113"><cite>Document
Object Model (DOM) Level 2 Events Specification.</cite></a> 13 November
2000. W3C Recommendation. URL: <a
href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113">http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113</a>
</dd>
<!---->
<dt id=UNICODE>[UNICODE]
<dd>The Unicode Consortium. <a
href="http://www.unicode.org/standard/versions/enumeratedversions.html"><cite>The
Unicode Standard.</cite></a> 2003. Defined by: The Unicode Standard,
Version 4.0 (Boston, MA, Addison-Wesley, ISBN 0-321-18578-1), as updated
from time to time by the publication of new versions URL: <a
href="http://www.unicode.org/standard/versions/enumeratedversions.html">http://www.unicode.org/standard/versions/enumeratedversions.html</a>
</dd>
<!---->
</dl>
<!--end-normative-->
<h3 class=no-num id=other-references> Other references</h3>
<!--begin-informative-->
<!-- Sorted by label -->
<dl class=bibliography>
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
<!---->
<dt id=CSS1>[CSS1]
<dd>Håkon Wium Lie; Bert Bos. <a
href="http://www.w3.org/TR/2008/REC-CSS1-20080411"><cite>Cascading Style
Sheets (CSS1) Level 1 Specification.</cite></a> 11 April 2008. W3C
Recommendation. URL: <a
href="http://www.w3.org/TR/2008/REC-CSS1-20080411">http://www.w3.org/TR/2008/REC-CSS1-20080411</a>
</dd>
<!---->
<dt id=CSS3-REGIONS>[CSS3-REGIONS]
<dd>Vincent Hardy; Alex Mogilevsky; Alan Stearns. <a
href="http://www.w3.org/TR/2012/WD-css3-regions-20120823/"><cite>CSS
Regions Module Level 3.</cite></a> 23 August 2012. W3C Working Draft.
(Work in progress.) URL: <a
href="http://www.w3.org/TR/2012/WD-css3-regions-20120823/">http://www.w3.org/TR/2012/WD-css3-regions-20120823/</a>