changeset
[css4-pseudo] proposal with ftf issues recorded
Mon, 27 Aug 2012 07:09:21 -0700
- author
- Alan Stearns <stearns@adobe.com>
- date
- Mon, 27 Aug 2012 07:09:21 -0700
- changeset 6569
- 590c03978e93
- parent 6568
- 02af27920077
- child 6578
- 0d07002aa2e9
[css4-pseudo] proposal with ftf issues recorded
1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 1.2 +++ b/css4-pseudo/Makefile Mon Aug 27 07:09:21 2012 -0700 1.3 @@ -0,0 +1,50 @@ 1.4 +# $Id: Makefile,v 1.5 2008/02/06 14:05:15 mike Exp $ 1.5 +# 1.6 +# http://dev.w3.org/buildtools/css3-module-postprocessor/Makefile 1.7 +# 1.8 +# This is a makefile for generating output using the CSS3 module 1.9 +# postprocessor. Details about that are here: 1.10 +# 1.11 +# http://www.w3.org/Style/Group/css3-src/bin/postprocess 1.12 +# 1.13 +# To use this makefile, you need to have the "make" and "curl" 1.14 +# programs installed. If you are running a Windows/MS-DOS system, 1.15 +# you can download the "make" and "curl" programs from here: 1.16 +# 1.17 +# http://gnuwin32.sourceforge.net/downlinks/make.php 1.18 +# http://curl.haxx.se/dlwiz/?type=bin&os=Win32&flav=-&ver=2000/XP 1.19 +# 1.20 +# You also need to install either a .curlrc (*NIX/*BSD) or _curlrc 1.21 +# (MS-DOS ) file in your HOME directory, with at minimum the 1.22 +# following contents: 1.23 +# 1.24 +# user = foo:bar 1.25 +# 1.26 +# ...where "foo" and "bar" are your W3C username and password. 1.27 + 1.28 +SOURCEFILE=Overview.src.html 1.29 +OUTPUTFILE=Overview.html 1.30 +PROCESSCGI=http://cgi.w3.org/member-bin/process.cgi 1.31 +CURL=curl 1.32 +CURLFLAGS= 1.33 + 1.34 +# if you want to set a publication date other than today's date, 1.35 +# invoke make like this: "make PUBDATE=2008-03-19" 1.36 +PUBMSG= 1.37 +PUBDATE= 1.38 +USER= 1.39 + 1.40 +W3C_CSS_DIR=~/work/W3C/cvs/dev.w3.org/csswg/css4-pseudo 1.41 + 1.42 +all: $(OUTPUTFILE) 1.43 + 1.44 +$(OUTPUTFILE): $(SOURCEFILE) 1.45 +ifeq (,$(PUBDATE)) 1.46 + $(CURL) $(CURLFLAGS) --user $(USER) -F file="@$<" -o "$@" -F group=CSS -F output=html -F method=file $(PROCESSCGI) 1.47 +else 1.48 + $(CURL) $(CURLFLAGS) --user $(USER) -F file="@$<" -o "$@" -F group=CSS -F output=html -F method=file $(PROCESSCGI) -F date=$(PUBDATE) 1.49 +endif 1.50 + 1.51 + 1.52 + 1.53 +
2.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 2.2 +++ b/css4-pseudo/Overview.html Mon Aug 27 07:09:21 2012 -0700 2.3 @@ -0,0 +1,1044 @@ 2.4 +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2.5 +"http://www.w3.org/TR/html4/strict.dtd"> 2.6 + 2.7 +<html lang=en> 2.8 + <head profile="http://www.w3.org/2006/03/hcard"><meta 2.9 + content="text/html; charset=UTF-8" http-equiv=Content-Type> 2.10 + 2.11 + <title>CSS Pseudo-elements Module Level 4</title> 2.12 + <script defer=defer src="css-pseudochildren_files/annotate.js" 2.13 + type="text/javascript"></script> 2.14 + <link href="http://dev.w3.org/csswg/shared/style/alternate-spec-style.css" 2.15 + id=st rel=stylesheet title="alternate spec style" type="text/css"> 2.16 + <link href="http://www.w3.org/StyleSheets/TR/w3c-unofficial.css" 2.17 + rel=stylesheet type="text/css"> 2.18 + 2.19 + <body class=example> 2.20 + <p><br> 2.21 + 2.22 + <div class=head id=div-head> 2.23 + <h1 id=css-pseudochildren-module>CSS Pseudo-elements Module Level 4</h1> 2.24 + 2.25 + <h2 class="no-num no-toc" id=longstatus-date>22 June 2012</h2> 2.26 + 2.27 + <dl> 2.28 + <dt>This version: 2.29 + 2.30 + <dd>TBD 2.31 + 2.32 + <dt>Latest version: 2.33 + 2.34 + <dd>27 August 2012 2.35 + 2.36 + <dt>Previous version: 2.37 + 2.38 + <dd>TBD 2.39 + 2.40 + <dt>Editors: 2.41 + 2.42 + <dd class=vcard><span class=fn>Daniel Glazman</span>, on behalf of <span 2.43 + class=org>Adobe Systems, Inc.</span> 2.44 + 2.45 + <dd class=vcard><span class=fn>Alan Stearns</span>, <span class=org>Adobe 2.46 + Systems, Inc.</span>, <span class=email>stearns@adobe.com</span> 2.47 + 2.48 + <dt>Issues List: 2.49 + 2.50 + <dd>TBD 2.51 + 2.52 + <dt>Discussion: 2.53 + 2.54 + <dd><a 2.55 + href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> 2.56 + with subject line "<code>[css4-pseudo] message topic</code>" 2.57 + </dl> 2.58 + 2.59 + <p class=copyright><a 2.60 + href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 2.61 + rel=license>Copyright</a> © 2012 <a href="http://www.w3.org/"><abbr 2.62 + title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a 2.63 + href="http://www.csail.mit.edu/"><abbr 2.64 + title="Massachusetts Institute of Technology">MIT</abbr></a>, <a 2.65 + href="http://www.ercim.eu/"><abbr 2.66 + title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, 2.67 + <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a 2.68 + href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, 2.69 + <a 2.70 + href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> 2.71 + and <a 2.72 + href="http://www.w3.org/Consortium/Legal/copyright-documents">document 2.73 + use</a> rules apply.</p> 2.74 + 2.75 + <hr title="Separator for header"> 2.76 + </div> 2.77 + 2.78 + <h2 class="no-num no-toc" id=abstract>Abstract</h2> 2.79 + 2.80 + <div> 2.81 + <p>This document extracts the notion of pseudo-elements from the Selectors 2.82 + 3 specification and proposes to extend it to be able to create and style 2.83 + an arbitrary number of pseudo-elements <em>before</em>, <em>after</em> an 2.84 + element.<br> 2.85 + </p> 2.86 + </div> 2.87 + 2.88 + <h2 class="no-num no-toc" id=status-of-this-document>Status of this 2.89 + document</h2> 2.90 + 2.91 + <p>This document is a submission by Adobe Systems Inc. to the CSS Working 2.92 + Group for discussion. 2.93 + 2.94 + <h2 class="no-num no-toc" id=table-of-contents>Table of contents</h2> 2.95 + <!--begin-toc--> 2.96 + 2.97 + <ul class=toc> 2.98 + <li><a href="#pseudo-elements"><span class=secno>1. 2.99 + </span>Pseudo-elements</a> 2.100 + <ul class=toc> 2.101 + <li><a href="#first-line"><span class=secno>1.1. </span>The ::first-line 2.102 + pseudo-element</a> 2.103 + <ul class=toc> 2.104 + <li><a href="#first-formatted-line"><span class=secno>1.1.1. 2.105 + </span>First formatted line definition in CSS</a> 2.106 + </ul> 2.107 + 2.108 + <li><a href="#first-letter"><span class=secno>1.2. </span>The 2.109 + ::first-letter pseudo-element</a> 2.110 + <ul class=toc> 2.111 + <li><a href="#application-in-css"><span class=secno>1.2.1. 2.112 + </span>Application in CSS</a> 2.113 + </ul> 2.114 + 2.115 + <li><a href="#gen-content"><span class=secno>1.3. </span>The ::before 2.116 + and ::after pseudo-elements</a> 2.117 + <ul class=toc> 2.118 + <li><a href="#ordinal-before-and-after"><span class=secno>1.3.1. 2.119 + </span>Multiple ::before and ::after pseudo-elements using 2.120 + ordinals</a> 2.121 + 2.122 + <li><a href="#the-nth-before-nth-after-nth-last-before"><span 2.123 + class=secno>1.3.2. </span>The ::nth-before(), ::nth-after(), 2.124 + ::nth-last-before() and ::nth-last-after() pseudo-elements </a> 2.125 + </ul> 2.126 + </ul> 2.127 + 2.128 + <li><a href="#additions-to-the-css-object-model"><span class=secno>2. 2.129 + </span>Additions to the CSS Object Model</a> 2.130 + <ul class=toc> 2.131 + <li><a href="#interface-csspseudoelement"><span class=secno>2.1. 2.132 + </span>Interface CSSPseudoElement</a> 2.133 + 2.134 + <li><a href="#interface-csspseudoelementlist"><span class=secno>2.2. 2.135 + </span>Interface CSSPseudoElementList</a> 2.136 + 2.137 + <li><a href="#addition-to-the-window"><span class=secno>2.3. 2.138 + </span>Addition to the window</a> 2.139 + </ul> 2.140 + 2.141 + <li class=no-num><a href="#ACKS">Acknowledgements</a> 2.142 + 2.143 + <li class=no-num><a href="#references"> References</a> 2.144 + <ul class=toc> 2.145 + <li class=no-num><a href="#normative-references"> Normative 2.146 + references</a> 2.147 + 2.148 + <li class=no-num><a href="#other-references"> Other references</a> 2.149 + </ul> 2.150 + 2.151 + <li class=no-num><a href="#index"> Index</a> 2.152 + </ul> 2.153 + <!--end-toc--> 2.154 + 2.155 + <h2 id=pseudo-elements><span class=secno>1. </span>Pseudo-elements</h2> 2.156 + 2.157 + <p>Pseudo-elements create abstractions about the document tree beyond those 2.158 + specified by the document language. For instance, document languages do 2.159 + not offer mechanisms to access the first letter or first line of an 2.160 + element's content. Pseudo-elements allow authors to refer to this 2.161 + otherwise inaccessible information. Pseudo-elements may also provide 2.162 + authors a way to refer to content that does not exist in the source 2.163 + document (e.g., the <code>::before</code> and <code>::after</code> 2.164 + pseudo-elements give access to generated content). <br> 2.165 + 2.166 + <p>Pseudo-elements can be placed anywhere relatively to the element 2.167 + creating them although the state of the art currently allows only the 2.168 + following : 2.169 + 2.170 + <ul> 2.171 + <li>inside the element and before the element's content 2.172 + 2.173 + <li>inside the element and after the element's content 2.174 + 2.175 + <li>inside the element's contents at any depth 2.176 + </ul> 2.177 + 2.178 + <p> 2.179 + 2.180 + <p>The notation for a pseudo-element is made of two colons 2.181 + (<code>::</code>) followed by the name of the pseudo-element, possibly 2.182 + immediately followed by a block of parenthesis containing comma-separated 2.183 + arguments.<br> 2.184 + 2.185 + <p>For compatibility with existing style sheets, user agents must also 2.186 + accept the previous one-colon notation for pseudo-elements introduced in 2.187 + CSS levels 1 <a href="#CSS1" rel=biblioentry>[CSS1]<!--{{CSS1}}--></a> and 2.188 + 2 <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{CSS21}}--></a> (namely 2.189 + <code>:first-line</code>, <code>:first-letter</code>, <code>:before</code> 2.190 + and <code>:after</code>). This compatibility is not allowed for the new 2.191 + pseudo-elements introduced in this specification. 2.192 + 2.193 + <h3 id=first-line><span class=secno>1.1. </span>The ::first-line 2.194 + pseudo-element</h3> 2.195 + 2.196 + <p>The <code>::first-line</code> pseudo-element describes the contents of 2.197 + the first formatted line of an element. 2.198 + 2.199 + <div class=example> 2.200 + <p>CSS example:</p> 2.201 + 2.202 + <pre>p::first-line { text-transform: uppercase }</pre> 2.203 + 2.204 + <p>The above rule means "change the letters of the first line of every 2.205 + <code>p</code> element to uppercase".</p> 2.206 + 2.207 + <p>The selector <code>p::first-line</code> does not match any real 2.208 + document element. It does match a pseudo-element that conforming user 2.209 + agents will insert at the beginning of every <code>p</code> element.</p> 2.210 + </div> 2.211 + 2.212 + <p>Note that the length of the first line depends on a number of factors, 2.213 + including the width of the page, the font size, etc. Thus, an ordinary 2.214 + HTML <a href="#HTML5" rel=biblioentry>[HTML5]<!--{{HTML5}}--></a> 2.215 + paragraph such as: 2.216 + 2.217 + <pre><P>This is a somewhat long HTML 2.218 paragraph that will be broken into several 2.219 lines. The first line will be identified 2.220 by a fictional tag sequence. The other lines 2.221 will be treated as ordinary lines in the 2.222 paragraph.</P> 2.223 </pre> 2.224 + 2.225 + <p>the lines of which happen to be broken as follows: 2.226 + 2.227 + <pre>THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT 2.228 will be broken into several lines. The first 2.229 line will be identified by a fictional tag 2.230 sequence. The other lines will be treated as 2.231 ordinary lines in the paragraph. 2.232 </pre> 2.233 + 2.234 + <p>This paragraph might be "rewritten" by user agents to include the 2.235 + <em>fictional tag sequence</em> for <code>::first-line</code>. This 2.236 + fictional tag sequence helps to show how properties are inherited. 2.237 + 2.238 + <pre><P><b><P::first-line></b> This is a somewhat long HTML 2.239 paragraph that <b></P::first-line></b> will be broken into several 2.240 lines. The first line will be identified 2.241 by a fictional tag sequence. The other lines 2.242 will be treated as ordinary lines in the 2.243 paragraph.</P> 2.244 </pre> 2.245 + 2.246 + <p>If a pseudo-element breaks up a real element, the desired effect can 2.247 + often be described by a fictional tag sequence that closes and then 2.248 + re-opens the element. Thus, if we mark up the previous paragraph with a 2.249 + <code>span</code> element: 2.250 + 2.251 + <pre><P><b><SPAN class="test"></b> This is a somewhat long HTML 2.252 paragraph that will be broken into several 2.253 lines.<b></SPAN></b> The first line will be identified 2.254 by a fictional tag sequence. The other lines 2.255 will be treated as ordinary lines in the 2.256 paragraph.</P> 2.257 </pre> 2.258 + 2.259 + <p>the user agent could simulate start and end tags for <code>span</code> 2.260 + when inserting the fictional tag sequence for <code>::first-line</code>. 2.261 + 2.262 + <pre><P><P::first-line><b><SPAN class="test"></b> This is a 2.263 somewhat long HTML 2.264 paragraph that will <b></SPAN></b></P::first-line><b><SPAN class="test"></b> be 2.265 broken into several 2.266 lines.<b></SPAN></b> The first line will be identified 2.267 by a fictional tag sequence. The other lines 2.268 will be treated as ordinary lines in the 2.269 paragraph.</P> 2.270 </pre> 2.271 + 2.272 + <h4 id=first-formatted-line><span class=secno>1.1.1. </span><dfn 2.273 + id=first-formatted-line0>First formatted line</dfn> definition in CSS</h4> 2.274 + 2.275 + <p>In CSS, the <code>::first-line</code> pseudo-element can only have an 2.276 + effect when attached to a block-like container such as a block box, 2.277 + inline-block, table-caption, or table-cell. 2.278 + 2.279 + <p>The first formatted line of an element may occur inside a block-level 2.280 + descendant in the same flow (i.e., a block-level descendant that is not 2.281 + out-of-flow due to floating or positioning). For example, the first line 2.282 + of the <code>DIV</code> in <code><DIV><P>This 2.283 + line...</P></DIV></code> is the first line of the 2.284 + <code>P</code> (assuming that both <code>P</code> and <code>DIV</code> are 2.285 + block-level). 2.286 + 2.287 + <p>The first line of a table-cell or inline-block cannot be the first 2.288 + formatted line of an ancestor element. Thus, in <code><DIV><P 2.289 + STYLE="display: inline-block">Hello<BR>Goodbye</P> 2.290 + etcetera</DIV></code> the first formatted line of the <code>DIV 2.291 + </code> is not the line "Hello". 2.292 + 2.293 + <p class=note><span class=note-prefix>Note </span> Note that the first 2.294 + line of the <code>p</code> in this fragment: 2.295 + <code><p><br>First...</code> doesn't contain any letters 2.296 + (assuming the default style for <code>br</code>). The word "First" is not 2.297 + on the first formatted line. 2.298 + 2.299 + <p>A User-Agent should act as if the fictional start tags of the 2.300 + <code>::first-line</code> pseudo-elements were nested just inside the 2.301 + innermost enclosing block-level element. (Since CSS1 and CSS2 were silent 2.302 + on this case, authors should not rely on this behavior.) For example, the 2.303 + fictional tag sequence for 2.304 + 2.305 + <pre><DIV> 2.306 <P>First paragraph</P> 2.307 <P>Second paragraph</P> 2.308 </DIV> 2.309 </pre> 2.310 + 2.311 + <p>is 2.312 + 2.313 + <pre><DIV> 2.314 <P><DIV::first-line><P::first-line>First paragraph</P::first-line></DIV::first-line></P> 2.315 <P><P::first-line>Second paragraph</P::first-line></P> 2.316 </DIV> 2.317 </pre> 2.318 + 2.319 + <p>The <code>::first-line</code> pseudo-element is similar to an 2.320 + inline-level element, but with certain restrictions. The following CSS 2.321 + properties apply to a <code>::first-line</code> pseudo-element: font 2.322 + properties, color property, background properties, ‘<code 2.323 + class=property>word-spacing</code>’, ‘<code 2.324 + class=property>letter-spacing</code>’, ‘<code 2.325 + class=property>text-decoration</code>’, ‘<code 2.326 + class=property>vertical-align</code>’, ‘<code 2.327 + class=property>text-transform</code>’, ‘<code 2.328 + class=property>line-height</code>’. User-Agents may apply other 2.329 + properties as well. 2.330 + 2.331 + <p>During CSS inheritance, the portion of a child element that occurs on 2.332 + the first line only inherits properties applicable to the 2.333 + <code>::first-line</code> pseudo-element from the 2.334 + <code>::first-line</code> pseudo-element. For all other properties 2.335 + inheritence is from the non-pseudo-element parent of the first line pseudo 2.336 + element. (The portion of a child element that does not occur on the first 2.337 + line always inherits from the parent of that child.) 2.338 + 2.339 + <h3 id=first-letter><span class=secno>1.2. </span>The ::first-letter 2.340 + pseudo-element</h3> 2.341 + 2.342 + <p>The <code>::first-letter</code> pseudo-element represents the first 2.343 + letter of an element, if it is not preceded by any other content (such as 2.344 + images or inline tables) on its line. The ::first-letter pseudo-element 2.345 + may be used for "initial caps" and "drop caps", which are common 2.346 + typographical effects. 2.347 + 2.348 + <p>Punctuation (i.e, characters defined in Unicode in the "open" (Ps), 2.349 + "close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po) punctuation 2.350 + classes), that precedes or follows the first letter should be included. <a 2.351 + href="#UNICODE" rel=biblioentry>[UNICODE]<!--{{!UNICODE}}--></a> 2.352 + 2.353 + <div class=figure> 2.354 + <p><img alt="Quotes that precede the first letter should be included." 2.355 + src="http://www.w3.org/TR/selectors/first-letter2.png"></p> 2.356 + </div> 2.357 + 2.358 + <p>The <code>::first-letter</code> also applies if the first letter is in 2.359 + fact a digit, e.g., the "6" in "67 million dollars is a lot of money." 2.360 + 2.361 + <p class=note><span class=note-prefix>Note </span> In some cases the 2.362 + <code>::first-letter</code> pseudo-element should include more than just 2.363 + the first non-punctuation character on a line. For example, combining 2.364 + characters must be kept with their base character. Additionally, some 2.365 + languages may have specific rules about how to treat certain letter 2.366 + combinations. The User-Agent definition of <code>::first-letter</code> 2.367 + should include at least the default grapheme cluster as defined by UAX29 2.368 + and may include more than that as appropriate. In Dutch, for example, if 2.369 + the letter combination "ij" appears at the beginning of an element, both 2.370 + letters should be considered within the <code>::first-letter</code> 2.371 + pseudo-element. <a href="#UAX29" 2.372 + rel=biblioentry>[UAX29]<!--{{UAX29}}--></a> 2.373 + 2.374 + <p>If the letters that would form the <code>::first-letter</code> are not 2.375 + in the same element, such as "‘<code class=css>T" in 2.376 + <code><p>'<em>T...</code>, the User-Agent may create a 2.377 + <code>::first-letter</code> pseudo-element from one of the elements, both 2.378 + elements, or simply not create a pseudo-element.</code> 2.379 + 2.380 + <p>Similarly, if the first letter(s) of the block are not at the start of 2.381 + the line (for example due to bidirectional reordering), then the 2.382 + User-Agent need not create the pseudo-element(s). 2.383 + 2.384 + <div class=example> 2.385 + <p>Example:</p> 2.386 + 2.387 + <p><a name=overlapping-example></a>The following CSS and HTML example 2.388 + illustrates how overlapping pseudo-elements may interact. The first 2.389 + letter of each P element will be green with a font size of ’24pt'. The 2.390 + rest of the first formatted line will be ‘<code 2.391 + class=property>blue</code>’ while the rest of the paragraph will be 2.392 + ‘<code class=property>red</code>’.</p> 2.393 + 2.394 + <pre>p { color: red; font-size: 12pt } 2.395 p::first-letter { color: green; font-size: 200% } 2.396 p::first-line { color: blue } 2.397 2.398 <P>Some text that ends up on two lines</P></pre> 2.399 + 2.400 + <p>Assuming that a line break will occur before the word "ends", the <span 2.401 + class=index-inst id=fictional-tag-sequence 2.402 + title="fictional tag sequence">fictional tag sequence</span> for this 2.403 + fragment might be:</p> 2.404 + 2.405 + <pre><P> 2.406 <P::first-line> 2.407 <P::first-letter> 2.408 S 2.409 </P::first-letter>ome text that 2.410 </P::first-line> 2.411 ends up on two lines 2.412 </P></pre> 2.413 + 2.414 + <p>Note that the <code>::first-letter</code> element is inside the 2.415 + <code>::first-line</code> element. Properties set on 2.416 + <code>::first-line</code> are inherited by <code>::first-letter</code>, 2.417 + but are overridden if the same property is set on 2.418 + <code>::first-letter</code>.</p> 2.419 + </div> 2.420 + 2.421 + <p>The first letter must occur on the <a href="#first-formatted-line">first 2.422 + formatted line.</a> For example, in this HTML fragment: 2.423 + <code><p><br>First...</code> the first line doesn't contain 2.424 + any letters and <code>::first-letter</code> doesn't match anything 2.425 + (assuming the default style for <code>br</code> in HTML 4). In particular, 2.426 + it does not match the "F" of "First." 2.427 + 2.428 + <h4 id=application-in-css><span class=secno>1.2.1. </span>Application in 2.429 + CSS</h4> 2.430 + 2.431 + <p>In CSS, the <code>::first-letter</code> pseudo-element applies to 2.432 + block-like containers such as block, list-item, table-cell, table-caption, 2.433 + and inline-block elements. <span class=note><strong>Note:</strong> A 2.434 + future version of this specification may allow this pseudo-element to 2.435 + apply to more display types.</span> 2.436 + 2.437 + <p>The <code>::first-letter</code> pseudo-element can be used with all such 2.438 + elements that contain text, or that have a descendant in the same flow 2.439 + that contains text. A User-Agent should act as if the fictional start tag 2.440 + of the ::first-letter pseudo-element is just before the first text of the 2.441 + element, even if that first text is in a descendant. 2.442 + 2.443 + <div class=example> 2.444 + <p>Example:</p> 2.445 + 2.446 + <p>The fictional tag sequence for this HTML fragment:</p> 2.447 + 2.448 + <pre><div> 2.449 <p>The first text.</pre> 2.450 + 2.451 + <p>is:</p> 2.452 + 2.453 + <pre><div> 2.454 <p><div::first-letter><p::first-letter>T</...></...>he first text.</pre> 2.455 + </div> 2.456 + 2.457 + <p>In CSS the first letter of a table-cell or inline-block cannot be the 2.458 + first letter of an ancestor element. Thus, in <code><DIV><P 2.459 + STYLE="display: inline-block">Hello<BR>Goodbye</P> 2.460 + etcetera</DIV></code> the first letter of the <code>DIV</code> is 2.461 + not the letter "H". In fact, the <code>DIV</code> doesn't have a first 2.462 + letter. 2.463 + 2.464 + <p>If an element is a list item (‘<code class=css>display: 2.465 + list-item</code>’), the <code>::first-letter</code> applies to the first 2.466 + letter in the principal box after the marker. User-Agents may ignore 2.467 + <code>::first-letter</code> on list items with ‘<code 2.468 + class=css>list-style-position: inside</code>’. If an element has 2.469 + <code>::before</code> or <code>::after</code> content, the 2.470 + <code>::first-letter</code> applies to the first letter of the element 2.471 + <em>including</em> that content. 2.472 + 2.473 + <div class=example> 2.474 + <p>Example:</p> 2.475 + 2.476 + <p>After the rule <code>p::before {content: "Note: "}</code>, the selector 2.477 + <code>p::first-letter</code> matches the "N" of "Note".</p> 2.478 + </div> 2.479 + 2.480 + <p>In CSS a ::first-line pseudo-element is similar to an inline-level 2.481 + element if its ‘<code class=property>float</code>’ property is 2.482 + ‘<code class=property>none</code>’; otherwise, it is similar to a 2.483 + floated element. The following properties that apply to 2.484 + <code>::first-letter</code> pseudo-elements: font properties, ‘<code 2.485 + class=property>text-decoration</code>’, ‘<code 2.486 + class=property>text-transform</code>’, ‘<code 2.487 + class=property>letter-spacing</code>’, ‘<code 2.488 + class=property>word-spacing</code>’ (when appropriate), ‘<code 2.489 + class=property>line-height</code>’, ‘<code 2.490 + class=property>float</code>’, ‘<code 2.491 + class=property>vertical-align</code>’ (only if ‘<code 2.492 + class=property>float</code>’ is ‘<code class=property>none</code>’), 2.493 + margin properties, padding properties, border properties, color property, 2.494 + background properties. User-Agents may apply other properties as well. To 2.495 + allow User-Agents to render a typographically correct drop cap or initial 2.496 + cap, the User-Agent may choose a line-height, width and height based on 2.497 + the shape of the letter, unlike for normal elements. 2.498 + 2.499 + <div class=example> 2.500 + <p>Example:</p> 2.501 + 2.502 + <p>This CSS and HTML example shows a possible rendering of an initial cap. 2.503 + Note that the ‘<code class=property>line-height</code>’ that is 2.504 + inherited by the <code>::first-letter</code> pseudo-element is 1.1, but 2.505 + the User-Agent in this example has computed the height of the first 2.506 + letter differently, so that it doesn't cause any unnecessary space 2.507 + between the first two lines. Also note that the fictional start tag of 2.508 + the first letter is inside the <span>span</span>, and thus the font 2.509 + weight of the first letter is normal, not bold as the <span>span</span>:</p> 2.510 + 2.511 + <pre>p { line-height: 1.1 } 2.512 p::first-letter { font-size: 3em; font-weight: normal } 2.513 span { font-weight: bold } 2.514 ... 2.515 <p><span>Het hemelsche</span> gerecht heeft zich ten lange lesten<br> 2.516 Erbarremt over my en mijn benaeuwde vesten<br> 2.517 En arme burgery, en op mijn volcx gebed<br> 2.518 En dagelix geschrey de bange stad ontzet. 2.519 </pre> 2.520 + 2.521 + <div class=figure> 2.522 + <p><img alt="Image illustrating the ::first-letter pseudo-element" 2.523 + src="http://www.w3.org/TR/selectors/initial-cap.png"></p> 2.524 + </div> 2.525 + </div> 2.526 + 2.527 + <div class=example> 2.528 + <p>The following CSS will make a drop cap initial letter span about two 2.529 + lines:</p> 2.530 + 2.531 + <pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2.532 <HTML> 2.533 <HEAD> 2.534 <TITLE>Drop cap initial letter</TITLE> 2.535 <STYLE type="text/css"> 2.536 P { font-size: 12pt; line-height: 1.2 } 2.537 P::first-letter { font-size: 200%; font-weight: bold; float: left } 2.538 SPAN { text-transform: uppercase } 2.539 </STYLE> 2.540 </HEAD> 2.541 <BODY> 2.542 <P><SPAN>The first</SPAN> few words of an article 2.543 in The Economist.</P> 2.544 </BODY> 2.545 </HTML> 2.546 </pre> 2.547 + 2.548 + <p>This example might be formatted as follows:</p> 2.549 + 2.550 + <div class=figure> 2.551 + <p><img 2.552 + alt="Image illustrating the combined effect of the ::first-letter and ::first-line pseudo-elements" 2.553 + src="http://www.w3.org/TR/selectors/first-letter.png"></p> 2.554 + </div> 2.555 + 2.556 + <p>The <span class=index-inst id=fictional-tag-sequence0 2.557 + title="fictional tag sequence">fictional tag sequence</span> is:</p> 2.558 + 2.559 + <pre><P> 2.560 <SPAN> 2.561 <P::first-letter> 2.562 T 2.563 </P::first-letter>he first 2.564 </SPAN> 2.565 few words of an article in the Economist. 2.566 </P> 2.567 </pre> 2.568 + 2.569 + <p>Note that the <code>::first-letter</code> pseudo-element tags abut the 2.570 + content (i.e., the initial character), while the ::first-line 2.571 + pseudo-element start tag is inserted right after the start tag of the 2.572 + block element.</p> 2.573 + </div> 2.574 + 2.575 + <p>In order to achieve traditional drop caps formatting, user agents may 2.576 + approximate font sizes, for example to align baselines. Also, the glyph 2.577 + outline may be taken into account when formatting. 2.578 + 2.579 + <h3 id=gen-content><span class=secno>1.3. </span>The ::before and ::after 2.580 + pseudo-elements</h3> 2.581 + 2.582 + <p>The <code>::before</code> and <code>::after</code> pseudo-elements can 2.583 + be used to describe generated content before or after an element's 2.584 + content. They are explained in CSS 2.1 <a href="#CSS21" 2.585 + rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. 2.586 + 2.587 + <p>When the <code>::first-letter</code> and <code>::first-line</code> 2.588 + pseudo-elements are applied to an element having content generated using 2.589 + <code>::before</code> or <code>::after</code> pseudo-elements, they apply 2.590 + to the first letter or line of the element including the generated 2.591 + content. 2.592 + 2.593 + <p> 2.594 + 2.595 + <p>A <a href="http://www.w3.org/TR/CSS2/syndata.html#rule-sets">CSS 2.596 + rule</a> using <code>::before</code> or <code>::after</code> creates a 2.597 + pseudo-element only if the <a 2.598 + href="http://www.w3.org/TR/CSS2/cascade.html#computed-value">computed 2.599 + values</a> of the ‘<code class=css><a 2.600 + href="http://www.w3.org/TR/CSS2/generate.html#content">content</a></code>’ 2.601 + property and the ‘<code class=css><a 2.602 + href="http://www.w3.org/TR/css3-regions/#the-flow-from-property"><span 2.603 + class=property>flow-from</span></a></code>’ property <a 2.604 + href="#CSS3-REGIONS" 2.605 + rel=biblioentry>[CSS3-REGIONS]<!--{{CSS3-REGIONS}}--></a> are not both 2.606 + ‘<code class=property>none</code>’. 2.607 + 2.608 + <div class=issue> 2.609 + <p>There are a11y issues with ::before and ::after pseudo-elements and 2.610 + generated content that were raised in the discussion of the following 2.611 + sections.</p> 2.612 + </div> 2.613 + 2.614 + <h4 id=ordinal-before-and-after><span class=secno>1.3.1. </span>Multiple 2.615 + ::before and ::after pseudo-elements using ordinals</h4> 2.616 + 2.617 + <p>More than one ::before or ::after pseudo-element can be created or 2.618 + accessed by adding a positive integer called the <strong>ordinal</strong> 2.619 + in parentheses. 2.620 + 2.621 + <div class=issue> 2.622 + <p>Using ordinals solves issues of insertion order, but does not provide a 2.623 + meaningful name for a particular ::before or ::after element. A named 2.624 + psuedo-element could provide better meaning, at the expense of ordering.</p> 2.625 + </div> 2.626 + 2.627 + <p>The ordinal 1 has a special meaning:<code> </code> 2.628 + 2.629 + <ul> 2.630 + <li><code>::before(1)</code> and <a 2.631 + href="http://www.w3.org/TR/CSS2/generate.html#before-after-content"><code>::before</code></a> 2.632 + are strictly equivalent 2.633 + 2.634 + <li><code>::after(1)</code> and <a 2.635 + href="http://www.w3.org/TR/CSS2/generate.html#before-after-content"><code>::after</code></a> 2.636 + are also strictly equivalent. 2.637 + </ul> 2.638 + 2.639 + <p><code>::before()</code> and <code>::after()</code> pseudo-elements are 2.640 + ordered by increasing ordinal from the nearest element's contents 2.641 + boundaries. For example: 2.642 + 2.643 + <div class=example> 2.644 + <p>Let's take the example of a div element creating two ::before 2.645 + pseudo-elements at ordinals 1 and 4, and three ::after pseudo-elements at 2.646 + ordinals 1, 5 and 8. The rules would look like this: 2.647 + 2.648 + <pre> 2.649 div::before(1) {} 2.650 div::before(4) {} 2.651 div::after(1) {} 2.652 div::after(5) {} 2.653 div::after(8) {} 2.654 </pre> 2.655 + The pseudo-elements and the contents of the element are then ordered in 2.656 + this way: 2.657 + <pre> 2.658 -- element's boundary -- 2.659 [ ordinal 4, before ] 2.660 [ ::before, ordinal 1, before ] 2.661 -- element's contents boundary -- 2.662 2.663 -- element's contents boundary -- 2.664 [ ::after, ordinal 1, after ] 2.665 [ ordinal 5, after ] 2.666 [ ordinal 8, after ] 2.667 -- element's boundary -- 2.668 </pre> 2.669 + </div> 2.670 + 2.671 + <div class=example> 2.672 + <p>One use of multiple <code>::before</code> and <code>::after</code> 2.673 + elements is to mix generated content with graphical effects. 2.674 + Pseudo-elements are used in quotes both for adding quotation marks in 2.675 + generated content OR for drawing a speech bubble arrow. With multiple 2.676 + <code>::before</code> and <code>::after</code> elements you can get both.</p> 2.677 + 2.678 + <p>This effect: <img src="images/quote-arrow.png"> can be achieved with 2.679 + this code:</p> 2.680 + 2.681 + <pre> 2.682 div::before { 2.683 content: "“"; 2.684 } 2.685 2.686 div::after { 2.687 content: "”"; 2.688 } 2.689 2.690 div::after(2) { 2.691 content: "."; 2.692 position: absolute; 2.693 bottom: -10px; 2.694 right: 20%; 2.695 border-left: 10px solid transparent; 2.696 border-right: 10px solid transparent; 2.697 border-top: 10px solid #111; 2.698 width: 0; 2.699 height: 0; 2.700 } 2.701 2.702 div{ 2.703 position: relative; 2.704 float: left; 2.705 background: #111; 2.706 padding: 1em; 2.707 border-radius: 1em; 2.708 color: white; 2.709 } 2.710 2.711 <div>I'm talking about CSS Pseudo-elements.</div> 2.712 </pre> 2.713 + 2.714 + <p>And if you have a single quote from multiple speakers, more arrows can 2.715 + be added by adding more <code>::after()</code> pseudo-elements: <img 2.716 + src="images/multiple-arrows.png"></p> 2.717 + 2.718 + <p>In general, there's no longer a limitation to two instances for 2.719 + whatever a <code>::before</code> or <code>::after</code> pseudo-element 2.720 + can be used (generated content, graphic effects, clearfix, etc.). 2.721 + </div> 2.722 + 2.723 + <div class=example> 2.724 + <p>Another use of multiple <code>::before</code> and <code>::after</code> 2.725 + pseudo-elements is to change the style of pieces of generated content. If 2.726 + a citation appended to a quote should be in a different font than the 2.727 + quotation mark, two ::after() pseudo-elements can be used.</p> 2.728 + <img src="images/multiple-styles.png"> 2.729 + <pre> 2.730 blockquote::before { 2.731 content: "“"; 2.732 } 2.733 2.734 blockquote::after { 2.735 content: "”"; 2.736 } 2.737 2.738 blockquote::after(2) { 2.739 content: " - " attr(data-author); 2.740 font: normal 0.8em sans-serif; 2.741 } 2.742 2.743 <blockquote data-author="Mark Twain">The funniest things are the forbidden.</blockquote> 2.744 </pre> 2.745 + </div> 2.746 + 2.747 + <div class=issue> 2.748 + <p>An issue has been raised on the previous example, questioning whether 2.749 + using attr(data-author) in this way is appropriate for use in an example.</p> 2.750 + </div> 2.751 + 2.752 + <div class=example> 2.753 + <p>A use for ordinals is to allow muliple stylesheets to add their own 2.754 + <code>::before</code> and <code>::after</code> pseudo-elements and 2.755 + coordinate insertion positions.</p> 2.756 + 2.757 + <p>If one stylesheet uses a single <code>::before(10) {}</code> rule, then 2.758 + another stylesheet gets the option to</p> 2.759 + 2.760 + <ul> 2.761 + <li>Add to or redefine that rule 2.762 + 2.763 + <li>Add an additional pseudo-element before that one with 2.764 + <code>::before(5) {}</code> 2.765 + 2.766 + <li>Add an additional pseudo-element after that one with 2.767 + <code>::before(15) {}</code> 2.768 + </ul> 2.769 + </div> 2.770 + 2.771 + <div class=example> 2.772 + <p>Pseudo-elements can be used to generate boxes in CSS for a <a 2.773 + href="http://dev.w3.org/csswg/css3-regions/#region-chain">region 2.774 + chain</a>. Allowing more than two such boxes per element could allow the 2.775 + main CSS Regions <a 2.776 + href="http://dev.w3.org/csswg/css3-regions/#named-flows-and-regions">example</a> 2.777 + to be <a 2.778 + href="http://dev.w3.org/csswg/css3-regions/#intro-example-code">written</a> 2.779 + without empty divs for the regions in the markup.</p> 2.780 + 2.781 + <p>Region chains with a fixed number of regions (usually with an 2.782 + auto-height region at the end of the chain) can be defined entirely in 2.783 + CSS using multiple pseudo-elements.</p> 2.784 + 2.785 + <pre> 2.786 <style> 2.787 #grid { 2.788 width: 80vw; 2.789 height: 60vw; 2.790 grid-template: "aaa.d" 2.791 "....d" 2.792 "bbb.d" 2.793 "....d" 2.794 "ccc.d"; 2.795 grid-rows: 52% 4% 20% 4% 20%; 2.796 grid-columns: 30% 5% 30% 5% 30%; 2.797 } 2.798 #grid::before(2) { grid-cell: a; } 2.799 #grid::before { grid-cell: b; } 2.800 #boxA { grid-cell: c; } 2.801 #grid::after { grid-cell: d; } 2.802 2.803 #body::after { 2.804 width: 80vw; 2.805 } 2.806 2.807 #grid::before { 2.808 column-count: 2; 2.809 } 2.810 2.811 article { 2.812 flow-into: article_flow; 2.813 } 2.814 2.815 #grid::before(2), #grid::before, #grid::after, #body::after { 2.816 flow-from: article_flow; 2.817 } 2.818 2.819 </style> 2.820 2.821 <article> 2.822 <h1>Introduction</h1> 2.823 <p>This is an example ...</p> 2.824 2.825 <h2>More Details</h2> 2.826 <p>This illustrates ...</p> 2.827 <p>Then, the example ...</p> 2.828 <p>Finally, this ...</p> 2.829 </article> 2.830 2.831 <div id="grid"> 2.832 <div id="boxA"></div> 2.833 </div> 2.834 </pre> 2.835 + </div> 2.836 + 2.837 + <div class=issue> 2.838 + <p>Several choices of syntax for declaring multiple ::before and ::after 2.839 + pseudo-elements have been considered.</p> 2.840 + 2.841 + <ul> 2.842 + <li>Brackets - <code>::before[2]</code> 2.843 + <ul></ul> 2.844 + 2.845 + <p>Benefits 2.846 + 2.847 + <li>Can reserve bracket syntax for ordinals 2.848 + 2.849 + <li>Could be appended to an otherwise-parenthesized pseudo 2.850 + <code>::hypothetical(args)[ordinal]</code> 2.851 + </ul> 2.852 + 2.853 + <ul></ul> 2.854 + 2.855 + <p>Drawbacks 2.856 + 2.857 + <ul> 2.858 + <li>Looks too much like attribute selectors 2.859 + </ul> 2.860 + 2.861 + <ul> 2.862 + <li>Add a generic ordinal syntax - ::pseudo(before, 2) 2.863 + <ul></ul> 2.864 + 2.865 + <p>Benefits 2.866 + 2.867 + <li>Easily extensible to addition pseudos 2.868 + 2.869 + <li>Parallel to ::nth-pseudo() syntax 2.870 + </ul> 2.871 + 2.872 + <ul></ul> 2.873 + 2.874 + <p>Drawbacks 2.875 + 2.876 + <ul> 2.877 + <li>Only used for ::before and ::after so far 2.878 + 2.879 + <li>More to type 2.880 + </ul> 2.881 + 2.882 + <ul> 2.883 + <li>Parentheses - <code>::before(2)</code> 2.884 + <ul></ul> 2.885 + 2.886 + <p>Benefits 2.887 + 2.888 + <li>No attribute selector confusion 2.889 + 2.890 + <li>Previous attempts have used this syntax 2.891 + </ul> 2.892 + 2.893 + <ul></ul> 2.894 + 2.895 + <p>Drawbacks 2.896 + 2.897 + <ul> 2.898 + <li>Perhaps harder to distinguish ordinal from index? 2.899 + </ul> 2.900 + </div> 2.901 + 2.902 + <div class=issue> 2.903 + <p>We arbitrarily chose the order here. Pseudo-elements could be ordered 2.904 + differently, for example as in:<br> 2.905 + </p> 2.906 + 2.907 + <pre> 2.908 -- element's boundary -- 2.909 [ ::before, ordinal 1, before ] 2.910 [ ordinal 4, before ] 2.911 -- element's contents boundary -- 2.912 2.913 -- element's contents boundary -- 2.914 [ ordinal 8, after ] 2.915 [ ordinal 5, after ] 2.916 [ ::after, ordinal 1, after ] 2.917 -- element's boundary -- 2.918 </pre> 2.919 + 2.920 + <p>or</p> 2.921 + 2.922 + <pre> 2.923 -- element's boundary -- 2.924 [ ::before, ordinal 1, before ] 2.925 [ ordinal 4, before ] 2.926 -- element's contents boundary -- 2.927 2.928 -- element's contents boundary -- 2.929 [ ::after, ordinal 1, after ] 2.930 [ ordinal 5, after ] 2.931 [ ordinal 8, after ] 2.932 -- element's boundary -- 2.933 </pre> 2.934 + 2.935 + <p>We expect to resolve this issue with the CSS Working Group.</p> 2.936 + </div> 2.937 + 2.938 + <h4 id=the-nth-before-nth-after-nth-last-before><span class=secno>1.3.2. 2.939 + </span>The ::nth-before(), ::nth-after(), ::nth-last-before() and 2.940 + ::nth-last-after() pseudo-elements</h4> 2.941 + 2.942 + <p>The new <code>::nth-before()</code>, <code>::nth-after()</code>, 2.943 + <code>::nth-last-before()</code> and <code>::nth-last-after()</code> 2.944 + pseudo-elements select ::before and ::after pseudo-elements based on 2.945 + indices, not ordinals. They all take a single mandatory argument: 2.946 + 2.947 + <ol> 2.948 + <li>a mandatory <strong>index</strong> in the form of <a 2.949 + href="http://www.w3.org/TR/css3-selectors/#nth-child-pseudo">an 2.950 + <code>an+b</code> syntax or the <code>odd</code> or <code>even</code> 2.951 + keywords</a> 2.952 + </ol> 2.953 + 2.954 + <div class=issue> 2.955 + <p>Extensions to selector syntax may allow pseudo-classes after a 2.956 + pseudo-element. In that case, the syntax in this section could change to 2.957 + something like <code>::before:nth()</code>, <code>::after:nth()</code>, 2.958 + <code>::before:nth-last()</code> and <code>::after:nth-last()</code>.</p> 2.959 + </div> 2.960 + 2.961 + <div class=issue> 2.962 + <p>Is ::nth-before(n) to access all ::before pseudo-elements enough of an 2.963 + override mechanism?</p> 2.964 + </div> 2.965 + 2.966 + <div class=example> 2.967 + <p>Let's reuse the example in Example 8 above and let's show the indices:</p> 2.968 + 2.969 + <pre> 2.970 -- element's boundary -- 2.971 [ ordinal 4, before, nth index 2, last-nth index 1 ] 2.972 [ ::before, ordinal 1, before, nth index 1, last-nth index 2 ] 2.973 -- element's contents boundary -- 2.974 2.975 -- element's contents boundary -- 2.976 [ ::after, ordinal 1, after, nth index 1, last-nth index 3 ] 2.977 [ ordinal 5, after, nth index 2, last-nth index 2 ] 2.978 [ ordinal 8, after, nth index 3, last-nth index 1 ] 2.979 -- element's boundary -- 2.980 </pre> 2.981 + </div> 2.982 + 2.983 + <p><code>::nth-*()</code> syntax cannot create a new pseudo-element and the 2.984 + ‘<code class=property>content</code>’ and ‘<code 2.985 + class=property>flow-from</code>’properties do not apply to them. 2.986 + 2.987 + <p>They are allowed as the second parameter of 2.988 + <code>ViewCSS.getComputedStyle()</code> if and only if the index parameter 2.989 + can select only one pseudo-element: for instance <code>12</code> or 2.990 + <code>0n+5</code>. 2.991 + 2.992 + <h2 id=additions-to-the-css-object-model><span class=secno>2. 2.993 + </span>Additions to the CSS Object Model</h2> 2.994 + 2.995 + <p>Pseudo-elements should be reachable by script, stylable from script, and 2.996 + available as event targets. 2.997 + 2.998 + <p class=note><span class=note-prefix>Note </span>We may extend this 2.999 + section in the future to allow creation of pseudo-elements from script. 2.1000 + 2.1001 + <h3 id=interface-csspseudoelement><span class=secno>2.1. </span>Interface 2.1002 + CSSPseudoElement</h3> 2.1003 + 2.1004 + <p>The <code>CSSPseudoElement</code> interface allows pseudo-elements to be 2.1005 + styleable from script and makes them event targets. 2.1006 + 2.1007 + <div class=issue> 2.1008 + <p>The approach in this draft is to start with a bare minimum for the 2.1009 + CSSPseudoElement interface and build up from there. Another more radical 2.1010 + approach could take everything that's common between a pseudo-element and 2.1011 + a node and create a new base class for both Node and CSSPseudoElement.</p> 2.1012 + </div> 2.1013 + 2.1014 + <pre 2.1015 + class=idl>interface CSSPseudoElement {<br> readonly attribute unsigned long <a 2.1016 + href="#dom-csspseudochild-ordinal">ordinal</a>;<br> // the ordinal of a column is its index<br> readonly attribute DOMString <a 2.1017 + href="#dom-csspseudochild-type">type</a>;<br> readonly attribute <a 2.1018 + href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration">CSSStyleDeclaration</a> <a 2.1019 + href="#dom-csspseudochild-style">style</a>;<br>};<br><br>CSSPseudoElement implements EventTarget;<br></pre> 2.1020 + 2.1021 + <p><a name=dom-csspseudochild-ordinal></a>The 2.1022 + <code><strong><em>ordinal</em></strong></code> attribute represents the 2.1023 + ordinal of the pseudo-element for the object's type. It is a strictly 2.1024 + positive integer. The value <code>1</code> for the <code>before</code> 2.1025 + (or <code>after</code>, <code>letter</code> and <code>line</code>) types 2.1026 + represents the <code>::before</code> (or <code>::after</code>, 2.1027 + <code>::first-letter</code> and <code>::first-line</code>) 2.1028 + pseudo-elements. 2.1029 + 2.1030 + <p><a name=dom-csspseudochild-type></a>The 2.1031 + <code><strong><em>type</em></strong></code> attribute is a string 2.1032 + representing the type of the pseudo-element. This can be one of the 2.1033 + following values: 2.1034 + 2.1035 + <dl> 2.1036 + <dt>‘before’ 2.1037 + 2.1038 + <dd>The pseudo-element was created before the element's contents 2.1039 + 2.1040 + <dt>‘after’ 2.1041 + 2.1042 + <dd>The pseudo-element was created after the element's contents 2.1043 + 2.1044 + <dt>‘letter’ 2.1045 + 2.1046 + <dd>The pseudo-element is the first letter of the element; the only valid 2.1047 + ordinal is 1. 2.1048 + 2.1049 + <dt>‘line’ 2.1050 + 2.1051 + <dd>The pseudo-element is the first line of the element; the only valid 2.1052 + ordinal is 1. 2.1053 + 2.1054 + <dt>‘column’ 2.1055 + 2.1056 + <dd>The pseudo-element is a column created by the element through the CSS 2.1057 + Multi-column Layout Module. In that case its 2.1058 + <code><strong><em>ordinal</em></strong></code> is the index of column in 2.1059 + the collection of columns created by the element. 2.1060 + </dl> 2.1061 + 2.1062 + <p><a name=dom-csspseudochild-style></a>The 2.1063 + <code><strong><em>style</em></strong></code> attribute is a 2.1064 + <code>CSSStyleDeclaration</code> <a href="#CSSOM" 2.1065 + rel=biblioentry>[CSSOM]<!--{{!CSSOM}}--></a> allowing to set directly 2.1066 + style information (inline styles) onto the pseudo-element. Inline styles 2.1067 + on a <code>CSSPseudoElement</code> have precedence over all style rules 2.1068 + styling that pseudo-element. 2.1069 + 2.1070 + <p>The <a 2.1071 + href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget"><code>EventTarget</code></a> 2.1072 + interface <a href="#DOM-LEVEL-2-EVENTS" 2.1073 + rel=biblioentry>[DOM-LEVEL-2-EVENTS]<!--{{!DOM-LEVEL-2-EVENTS}}--></a> 2.1074 + must be implemented by all instances of <code>CSSPseudoElement</code> in 2.1075 + an in implementation which supports the current specification. 2.1076 + 2.1077 + <h3 id=interface-csspseudoelementlist><span class=secno>2.2. 2.1078 + </span>Interface CSSPseudoElementList</h3> 2.1079 + 2.1080 + <p>The <code>CSSPseudoElementList</code> represents an ordered collection 2.1081 + of <code> CSSPseudoElement</code> instances. 2.1082 + 2.1083 + <pre 2.1084 + class=idl>interface CSSPseudoElementList {<br> readonly attribute unsigned long <a 2.1085 + href="#dom-csspseudochildlist-length">length</a>;<br> CSSPseudoElement <a 2.1086 + href="#dom-csspseudochildlist-item">item</a>(unsigned long index);<br> CSSPseudoElement <a 2.1087 + 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> 2.1088 + 2.1089 + <p><a name=dom-csspseudochildlist-length></a>The 2.1090 + <code><strong><em>length</em></strong></code> attribute represents the 2.1091 + number of <code>CSSPseudoElement</code> in the collection or zero if it is 2.1092 + empty. 2.1093 + 2.1094 + <p><a name=dom-csspseudochildlist-item></a>The method 2.1095 + <code><strong><em>item()</em></strong></code> is used to retrieve a 2.1096 + <code>CSSPseudo</code><code>Element</code> by index. It takes one 2.1097 + parameter being the requested index into the collection. Its return value 2.1098 + is the <code>CSSPseudo</code><code>Element</code> at the requested index 2.1099 + in the collection or null if that is not a valid index. 2.1100 + 2.1101 + <p><a name=dom-csspseudochildlist-getbyordinalandtype></a>The method 2.1102 + <code><strong><em>getByOrdinalAndType()</em></strong></code> is used to 2.1103 + retrieve a <code>CSSPseudo</code><code>Element</code> by its ordinal and 2.1104 + type. It takes two parameters: first, the requested ordinal; second a 2.1105 + type. Its return value is the <code>CSSPseudo</code><code>Element</code> 2.1106 + at the requested index in the collection or null if there is no 2.1107 + <code>CSSPseudo</code><code>Element</code> in the collection for that 2.1108 + index and type. 2.1109 + 2.1110 + <h3 id=addition-to-the-window><span class=secno>2.3. </span>Addition to the 2.1111 + window</h3> 2.1112 + 2.1113 + <p>A new method is added to the <code>Window</code> interface to retrieve 2.1114 + pseudo-elements created by a given element for a given type: 2.1115 + 2.1116 + <pre class=idl>partial interface Window {<br> CSSPseudoElementList <a 2.1117 + href="#dom-window-getpseudochildren">getPseudoElements</a>(Element elt,<br> DOMString type);<br>};</pre> 2.1118 + 2.1119 + <p><a name=dom-window-getpseudochildren></a>The method 2.1120 + <code>getPseudoElements()</code> is used to retrieve all 2.1121 + <code>CSSPseudoElement</code> instances created by the element 2.1122 + <code>elt</code> for the type <code>type</code>. Its return value is a 2.1123 + <code>CSSPseudoElementList</code>, potentially empty if no pseudo-element 2.1124 + exists for the given element and the given type. 2.1125 + 2.1126 + <h2 class=no-num id=ACKS>Acknowledgements</h2> 2.1127 + 2.1128 + <p>The editors would like to thank the following individuals for their 2.1129 + contributions, either during the conception of the specification or during 2.1130 + its development and specification review process: 2.1131 + 2.1132 + <blockquote> 2.1133 + <p>Tab Atkins, Razvan Caliman, Chris Coyier, Anders Grimsrud, Vincent 2.1134 + Hardy and the CSS Working Group members. 2.1135 + </blockquote> 2.1136 + 2.1137 + <h2 class=no-num id=references> References</h2> 2.1138 + 2.1139 + <h3 class=no-num id=normative-references> Normative references</h3> 2.1140 + <!--begin-normative--> 2.1141 + <!-- Sorted by label --> 2.1142 + 2.1143 + <dl class=bibliography> 2.1144 + <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> 2.1145 + <!----> 2.1146 + 2.1147 + <dt id=CSS21>[CSS21] 2.1148 + 2.1149 + <dd>Bert Bos; et al. <a 2.1150 + href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style 2.1151 + Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June 2.1152 + 2011. W3C Recommendation. URL: <a 2.1153 + href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a> 2.1154 + </dd> 2.1155 + <!----> 2.1156 + 2.1157 + <dt id=CSSOM>[CSSOM] 2.1158 + 2.1159 + <dd>Anne van Kesteren. <a 2.1160 + href="http://www.w3.org/TR/2011/WD-cssom-20110712/"><cite>CSSOM.</cite></a> 2.1161 + 12 July 2011. W3C Working Draft. (Work in progress.) URL: <a 2.1162 + href="http://www.w3.org/TR/2011/WD-cssom-20110712/">http://www.w3.org/TR/2011/WD-cssom-20110712/</a> 2.1163 + </dd> 2.1164 + <!----> 2.1165 + 2.1166 + <dt id=DOM-LEVEL-2-EVENTS>[DOM-LEVEL-2-EVENTS] 2.1167 + 2.1168 + <dd>Tom Pixley. <a 2.1169 + href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113"><cite>Document 2.1170 + Object Model (DOM) Level 2 Events Specification.</cite></a> 13 November 2.1171 + 2000. W3C Recommendation. URL: <a 2.1172 + 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> 2.1173 + </dd> 2.1174 + <!----> 2.1175 + 2.1176 + <dt id=UNICODE>[UNICODE] 2.1177 + 2.1178 + <dd>The Unicode Consortium. <a 2.1179 + href="http://www.unicode.org/standard/versions/enumeratedversions.html"><cite>The 2.1180 + Unicode Standard.</cite></a> 2003. Defined by: The Unicode Standard, 2.1181 + Version 4.0 (Boston, MA, Addison-Wesley, ISBN 0-321-18578-1), as updated 2.1182 + from time to time by the publication of new versions URL: <a 2.1183 + href="http://www.unicode.org/standard/versions/enumeratedversions.html">http://www.unicode.org/standard/versions/enumeratedversions.html</a> 2.1184 + </dd> 2.1185 + <!----> 2.1186 + </dl> 2.1187 + <!--end-normative--> 2.1188 + 2.1189 + <h3 class=no-num id=other-references> Other references</h3> 2.1190 + <!--begin-informative--> 2.1191 + <!-- Sorted by label --> 2.1192 + 2.1193 + <dl class=bibliography> 2.1194 + <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> 2.1195 + <!----> 2.1196 + 2.1197 + <dt id=CSS1>[CSS1] 2.1198 + 2.1199 + <dd>Håkon Wium Lie; Bert Bos. <a 2.1200 + href="http://www.w3.org/TR/2008/REC-CSS1-20080411"><cite>Cascading Style 2.1201 + Sheets (CSS1) Level 1 Specification.</cite></a> 11 April 2008. W3C 2.1202 + Recommendation. URL: <a 2.1203 + href="http://www.w3.org/TR/2008/REC-CSS1-20080411">http://www.w3.org/TR/2008/REC-CSS1-20080411</a> 2.1204 + </dd> 2.1205 + <!----> 2.1206 + 2.1207 + <dt id=CSS3-REGIONS>[CSS3-REGIONS] 2.1208 + 2.1209 + <dd>Vincent Hardy; Alex Mogilevsky; Alan Stearns. <a 2.1210 + href="http://www.w3.org/TR/2012/WD-css3-regions-20120823/"><cite>CSS 2.1211 + Regions Module Level 3.</cite></a> 23 August 2012. W3C Working Draft. 2.1212 + (Work in progress.) URL: <a 2.1213 + href="http://www.w3.org/TR/2012/WD-css3-regions-20120823/">http://www.w3.org/TR/2012/WD-css3-regions-20120823/</a> 2.1214 + </dd> 2.1215 + <!----> 2.1216 + 2.1217 + <dt id=HTML5>[HTML5] 2.1218 + 2.1219 + <dd>Ian Hickson. <a 2.1220 + href="http://www.w3.org/TR/2011/WD-html5-20110525/"><cite>HTML5.</cite></a> 2.1221 + 25 May 2011. W3C Working Draft. (Work in progress.) URL: <a 2.1222 + href="http://www.w3.org/TR/2011/WD-html5-20110525/">http://www.w3.org/TR/2011/WD-html5-20110525/</a> 2.1223 + </dd> 2.1224 + <!----> 2.1225 + 2.1226 + <dt id=UAX29>[UAX29] 2.1227 + 2.1228 + <dd>Mark Davis. <a 2.1229 + href="http://www.unicode.org/reports/tr29/"><cite>Unicode Text 2.1230 + Segmentation.</cite></a> 24 January 2012. Unicode Standard Annex #29. 2.1231 + URL: <a 2.1232 + href="http://www.unicode.org/reports/tr29/">http://www.unicode.org/reports/tr29/</a> 2.1233 + </dd> 2.1234 + <!----> 2.1235 + </dl> 2.1236 + <!--end-informative--> 2.1237 + 2.1238 + <h2 class=no-num id=index> Index</h2> 2.1239 + <!--begin-index--> 2.1240 + 2.1241 + <ul class=indexlist> 2.1242 + <li>fictional tag sequence, <a href="#fictional-tag-sequence" 2.1243 + title="fictional tag sequence">1.2.</a>, <a 2.1244 + href="#fictional-tag-sequence0" title="fictional tag sequence">1.2.1.</a> 2.1245 + 2.1246 + 2.1247 + <li>First formatted line, <a href="#first-formatted-line0" 2.1248 + title="First formatted line"><strong>1.1.1.</strong></a> 2.1249 + </ul> 2.1250 + <!--end-index--> 2.1251 + <!-- 2.1252 <h2 class="no-num" id="property-index"> 2.1253 Property index</h2> 2.1254 --> 2.1255 + <!--begin-properties--> 2.1256 + 2.1257 + <table class=proptable> 2.1258 + <thead> 2.1259 + <tr> 2.1260 + <th>Property 2.1261 + 2.1262 + <th>Values 2.1263 + 2.1264 + <th>Initial 2.1265 + 2.1266 + <th>Applies to 2.1267 + 2.1268 + <th>Inh. 2.1269 + 2.1270 + <th>Percentages 2.1271 + 2.1272 + <th>Media 2.1273 + 2.1274 + <tbody> 2.1275 + </table> 2.1276 + <!--end-properties--> 2.1277 +</html> 2.1278 +<!-- Keep this comment at the end of the file 2.1279 Local variables:mode: sgmlsgml-declaration:"~/SGML/HTML4.decl"sgml-default-doctype-name:"html"sgml-minimize-attributes:tsgml-nofill-elements:("pre" "style" "br")sgml-live-element-indicator:tsgml-omittag:nil 2.1280 sgml-shorttag:nilsgml-namecase-general:tsgml-general-insert-case:lowersgml-always-quote-attributes:tsgml-indent-step:nilsgml-indent-data:tsgml-parent-document:nilsgml-exposed-tags:nil 2.1281 sgml-local-catalogs:nilsgml-local-ecat-files:nilEnd:-->
3.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 3.2 +++ b/css4-pseudo/Overview.src.html Mon Aug 27 07:09:21 2012 -0700 3.3 @@ -0,0 +1,1 @@ 3.4 +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 3.5 <html lang="en"> 3.6 <head profile="http://www.w3.org/2006/03/hcard"> 3.7 <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> 3.8 <title>CSS Pseudo-elements Module Level 4</title> 3.9 <script defer="defer" src="css-pseudochildren_files/annotate.js" type="text/javascript"></script> 3.10 <link href="http://dev.w3.org/csswg/shared/style/alternate-spec-style.css" id="st" 3.11 rel="stylesheet" 3.12 title="alternate spec style" 3.13 type="text/css"> 3.14 <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/w3c-unofficial.css"> 3.15 </head> 3.16 <body class="example"><br> 3.17 <div class="head" id="div-head"> 3.18 3.19 <h1 id="css-pseudochildren-module">CSS Pseudo-elements Module Level 4</h1> 3.20 3.21 <h2 class="no-num no-toc" id="longstatus-date">22 3.22 June 2012</h2> 3.23 <dl> 3.24 <dt>This version: </dt> 3.25 <dd>TBD </dd> 3.26 <dt>Latest version: </dt> 3.27 <dd>27 August 2012 </dd> 3.28 <dt>Previous version: </dt> 3.29 <dd>TBD </dd> 3.30 <dt>Editors: </dt> 3.31 <dd class="vcard"><span class="fn">Daniel Glazman</span>, on behalf of <span 3.32 class="org">Adobe 3.33 Systems, Inc.</span></dd> 3.34 <dd class="vcard"><span class="fn">Alan Stearns</span>, 3.35 <span class="org">Adobe Systems, Inc.</span>, <span class= 3.36 "email">stearns@adobe.com</span></dd> 3.37 <dt>Issues List: </dt> 3.38 <dd>TBD </dd> 3.39 <dt>Discussion: </dt> 3.40 <dd><a href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> 3.41 with subject line "<code>[css4-pseudo] message topic</code>" </dd> 3.42 </dl> 3.43 <p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 3.44 rel="license">Copyright</a> 3.45 © 2012 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> 3.46 (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, 3.47 <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, 3.48 <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a 3.49 href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, 3.50 <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> 3.51 and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document 3.52 use</a> rules apply.</p> 3.53 <hr title="Separator for header"> </div> 3.54 3.55 <h2 class="no-num no-toc" id="abstract">Abstract</h2> 3.56 <div> 3.57 <p>This document extracts the notion 3.58 of pseudo-elements 3.59 from the Selectors 3 specification 3.60 and proposes to extend it 3.61 to be able to create and style 3.62 an arbitrary number of pseudo-elements 3.63 <em>before</em>, <em>after</em> an element.<br> 3.64 </p> 3.65 </div> 3.66 3.67 <h2 class="no-num no-toc" id="status-of-this-document">Status of this 3.68 document</h2> 3.69 <p>This document is a submission by Adobe Systems Inc. to the CSS Working 3.70 Group for discussion.</p> 3.71 3.72 <h2 class="no-num no-toc" id="table-of-contents">Table of contents</h2> 3.73 <!--begin-toc--><!--end-toc--> 3.74 3.75 <h2 id="pseudo-elements">Pseudo-elements</h2> 3.76 <p>Pseudo-elements create abstractions about the document tree beyond those 3.77 specified by the document language. For instance, document languages do 3.78 not offer mechanisms to access the first letter or first line of an 3.79 element's content. Pseudo-elements allow authors to refer to this 3.80 otherwise inaccessible information. Pseudo-elements may also provide 3.81 authors a way to refer to content that does not exist in the source 3.82 document (e.g., the <code>::before</code> and <code>::after</code> 3.83 pseudo-elements give access to generated content). <br> 3.84 </p> 3.85 <p>Pseudo-elements can be placed anywhere relatively to the element creating 3.86 them although the state of the art currently allows only the following :</p> 3.87 <ul> 3.88 <li>inside the element and before the element's content</li> 3.89 <li>inside the element and after the element's content</li> 3.90 <li>inside the element's contents at any depth</li> 3.91 </ul> 3.92 <p></p> 3.93 <p>The notation for a pseudo-element is made of two colons (<code>::</code>) 3.94 followed by the name of the pseudo-element, possibly immediately followed 3.95 by a block of parenthesis containing comma-separated arguments.<br> 3.96 </p> 3.97 <p>For compatibility with existing style sheets, user agents must also 3.98 accept the previous one-colon notation for pseudo-elements introduced in 3.99 CSS levels 1 [[CSS1]] and 2 [[CSS21]] 3.100 (namely <code>:first-line</code>, <code>:first-letter</code>, <code>:before</code> 3.101 and <code>:after</code>). This compatibility is not allowed for the new 3.102 pseudo-elements introduced in this specification. </p> 3.103 3.104 <h3 id="first-line">The ::first-line pseudo-element</h3> 3.105 <p>The <code>::first-line</code> pseudo-element describes the contents of 3.106 the first formatted line of an element. </p> 3.107 <div class="example"> 3.108 <p>CSS example:</p> 3.109 <pre>p::first-line { text-transform: uppercase }</pre> 3.110 <p>The above rule means "change the letters of the first line of every <code>p</code> 3.111 element to uppercase".</p> 3.112 <p>The selector <code>p::first-line</code> does not match any real 3.113 document element. It does match a pseudo-element that conforming user 3.114 agents will insert at the beginning of every <code>p</code> element.</p> 3.115 </div> 3.116 <p>Note that the length of the first line depends on a number of factors, 3.117 including the width of the page, the font size, etc. Thus, an ordinary 3.118 HTML [[HTML5]] paragraph such as: </p> 3.119 <pre><P>This is a somewhat long HTML 3.120 paragraph that will be broken into several 3.121 lines. The first line will be identified 3.122 by a fictional tag sequence. The other lines 3.123 will be treated as ordinary lines in the 3.124 paragraph.</P> 3.125 </pre> 3.126 <p>the lines of which happen to be broken as follows: </p> 3.127 <pre>THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT 3.128 will be broken into several lines. The first 3.129 line will be identified by a fictional tag 3.130 sequence. The other lines will be treated as 3.131 ordinary lines in the paragraph. 3.132 </pre> 3.133 <p>This paragraph might be "rewritten" by user agents to include the <em>fictional 3.134 tag sequence</em> for <code>::first-line</code>. This fictional tag 3.135 sequence helps to show how properties are inherited. </p> 3.136 <pre><P><b><P::first-line></b> This is a somewhat long HTML 3.137 paragraph that <b></P::first-line></b> will be broken into several 3.138 lines. The first line will be identified 3.139 by a fictional tag sequence. The other lines 3.140 will be treated as ordinary lines in the 3.141 paragraph.</P> 3.142 </pre> 3.143 <p>If a pseudo-element breaks up a real element, the desired effect can 3.144 often be described by a fictional tag sequence that closes and then 3.145 re-opens the element. Thus, if we mark up the previous paragraph with a <code>span</code> 3.146 element: </p> 3.147 <pre><P><b><SPAN class="test"></b> This is a somewhat long HTML 3.148 paragraph that will be broken into several 3.149 lines.<b></SPAN></b> The first line will be identified 3.150 by a fictional tag sequence. The other lines 3.151 will be treated as ordinary lines in the 3.152 paragraph.</P> 3.153 </pre> 3.154 <p>the user agent could simulate start and end tags for <code>span</code> 3.155 when inserting the fictional tag sequence for <code>::first-line</code>. 3.156 </p> 3.157 <pre><P><P::first-line><b><SPAN class="test"></b> This is a 3.158 somewhat long HTML 3.159 paragraph that will <b></SPAN></b></P::first-line><b><SPAN class="test"></b> be 3.160 broken into several 3.161 lines.<b></SPAN></b> The first line will be identified 3.162 by a fictional tag sequence. The other lines 3.163 will be treated as ordinary lines in the 3.164 paragraph.</P> 3.165 </pre> 3.166 3.167 <h4 id="first-formatted-line"><dfn id="first-formatted-line0">First formatted line</dfn> 3.168 definition in CSS</h4> 3.169 <p>In CSS, the <code>::first-line</code> pseudo-element can only have an 3.170 effect when attached to a block-like container such as a block box, 3.171 inline-block, table-caption, or table-cell. </p> 3.172 <p>The first formatted line of an element may occur inside a block-level 3.173 descendant in the same flow (i.e., a block-level descendant that is not 3.174 out-of-flow due to floating or positioning). For example, the first line 3.175 of the <code>DIV</code> in <code><DIV><P>This 3.176 line...</P></DIV></code> is the first line of the <code>P</code> 3.177 (assuming that both <code>P</code> and <code>DIV</code> are 3.178 block-level). </p> 3.179 <p>The first line of a table-cell or inline-block cannot be the first 3.180 formatted line of an ancestor element. Thus, in <code><DIV><P 3.181 STYLE="display: inline-block">Hello<BR>Goodbye</P> 3.182 etcetera</DIV></code> the first formatted line of the <code>DIV </code> 3.183 is not the line "Hello". </p> 3.184 <p class="note"><span class="note-prefix">Note </span> Note that the 3.185 first line of the <code>p</code> in this fragment: <code><p><br>First...</code> 3.186 doesn't contain any letters (assuming the default style for <code>br</code>). 3.187 The word "First" is not on the first formatted line. </p> 3.188 <p>A User-Agent should act as if the fictional start tags of the <code>::first-line</code> 3.189 pseudo-elements were nested just inside the innermost enclosing 3.190 block-level element. (Since CSS1 and CSS2 were silent on this case, 3.191 authors should not rely on this behavior.) For example, the fictional tag 3.192 sequence for </p> 3.193 <pre><DIV> 3.194 <P>First paragraph</P> 3.195 <P>Second paragraph</P> 3.196 </DIV> 3.197 </pre> 3.198 <p>is </p> 3.199 <pre><DIV> 3.200 <P><DIV::first-line><P::first-line>First paragraph</P::first-line></DIV::first-line></P> 3.201 <P><P::first-line>Second paragraph</P::first-line></P> 3.202 </DIV> 3.203 </pre> 3.204 <p>The <code>::first-line</code> pseudo-element is similar to an 3.205 inline-level element, but with certain restrictions. The following CSS 3.206 properties apply to a <code>::first-line</code> pseudo-element: font 3.207 properties, color property, background properties, ‘<code class="property">word-spacing</code>’, 3.208 ‘<code class="property">letter-spacing</code>’, ‘<code class="property">text-decoration</code>’, 3.209 ‘<code class="property">vertical-align</code>’, ‘<code class="property">text-transform</code>’, 3.210 ‘<code class="property">line-height</code>’. User-Agents may apply other 3.211 properties as well. </p> 3.212 <p>During CSS inheritance, the portion of a child element that occurs on the 3.213 first line only inherits properties applicable to the <code>::first-line</code> 3.214 pseudo-element from the <code>::first-line</code> pseudo-element. For all 3.215 other properties inheritence is from the non-pseudo-element parent of the 3.216 first line pseudo element. (The portion of a child element that does not 3.217 occur on the first line always inherits from the parent of that child.) </p> 3.218 3.219 <h3 id="first-letter">The ::first-letter pseudo-element</h3> 3.220 <p>The <code>::first-letter</code> pseudo-element represents the first 3.221 letter of an element, if it is not preceded by any other content (such as 3.222 images or inline tables) on its line. The ::first-letter pseudo-element 3.223 may be used for "initial caps" and "drop caps", which are common 3.224 typographical effects. </p> 3.225 <p>Punctuation (i.e, characters defined in Unicode in the "open" (Ps), 3.226 "close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po) punctuation 3.227 classes), that precedes or follows the first letter should be included. [[!UNICODE]] 3.228 </p> 3.229 <div class="figure"> 3.230 <p><img alt="Quotes that precede the first letter should be included." src="http://www.w3.org/TR/selectors/first-letter2.png"></p> 3.231 </div> 3.232 <p>The <code>::first-letter</code> also applies if the first letter is in 3.233 fact a digit, e.g., the "6" in "67 million dollars is a lot of money." </p> 3.234 <p class="note"><span class="note-prefix">Note </span> In some cases 3.235 the <code>::first-letter</code> pseudo-element should include more than 3.236 just the first non-punctuation character on a line. For example, combining 3.237 characters must be kept with their base character. Additionally, some 3.238 languages may have specific rules about how to treat certain letter 3.239 combinations. The User-Agent definition of <code>::first-letter</code> 3.240 should include at least the default grapheme cluster as defined by UAX29 3.241 and may include more than that as appropriate. In Dutch, for example, if 3.242 the letter combination "ij" appears at the beginning of an element, both 3.243 letters should be considered within the <code>::first-letter</code> 3.244 pseudo-element. [[UAX29]] </p> 3.245 <p>If the letters that would form the <code>::first-letter</code> are not 3.246 in the same element, such as "‘<code class="css">T" in <code><p>'<em>T...</code>, 3.247 the User-Agent may create a <code>::first-letter</code> pseudo-element 3.248 from one of the elements, both elements, or simply not create a 3.249 pseudo-element.</code> </p> 3.250 <p>Similarly, if the first letter(s) of the block are not at the start of 3.251 the line (for example due to bidirectional reordering), then the 3.252 User-Agent need not create the pseudo-element(s). </p> 3.253 <div class="example"> 3.254 <p>Example:</p> 3.255 <p><a name="overlapping-example"></a>The following CSS and HTML example 3.256 illustrates how overlapping pseudo-elements may interact. The first 3.257 letter of each P element will be green with a font size of ’24pt'. The 3.258 rest of the first formatted line will be ‘<code class="property">blue</code>’ 3.259 while the rest of the paragraph will be ‘<code class="property">red</code>’.</p> 3.260 <pre>p { color: red; font-size: 12pt } 3.261 p::first-letter { color: green; font-size: 200% } 3.262 p::first-line { color: blue } 3.263 3.264 <P>Some text that ends up on two lines</P></pre> 3.265 <p>Assuming that a line break will occur before the word "ends", the <span 3.266 class="index-inst" 3.267 id="fictional-tag-sequence" 3.268 title="fictional tag 3.269 sequence">fictional tag sequence</span> for this fragment might be:</p> 3.270 <pre><P> 3.271 <P::first-line> 3.272 <P::first-letter> 3.273 S 3.274 </P::first-letter>ome text that 3.275 </P::first-line> 3.276 ends up on two lines 3.277 </P></pre> 3.278 <p>Note that the <code>::first-letter</code> element is inside the <code>::first-line</code> 3.279 element. Properties set on <code>::first-line</code> are inherited by <code>::first-letter</code>, 3.280 but are overridden if the same property is set on <code>::first-letter</code>.</p> 3.281 </div> 3.282 <p>The first letter must occur on the <a href="#first-formatted-line">first 3.283 formatted line.</a> For example, in this HTML fragment: <code><p><br>First...</code> 3.284 the first line doesn't contain any letters and <code>::first-letter</code> 3.285 doesn't match anything (assuming the default style for <code>br</code> in 3.286 HTML 4). In particular, it does not match the "F" of "First." </p> 3.287 3.288 <h4 id="application-in-css">Application in CSS</h4> 3.289 <p>In CSS, the <code>::first-letter</code> pseudo-element applies to 3.290 block-like containers such as block, list-item, table-cell, table-caption, 3.291 and inline-block elements. <span class="note"><strong>Note:</strong> A 3.292 future version of this specification may allow this pseudo-element to 3.293 apply to more display types.</span> </p> 3.294 <p>The <code>::first-letter</code> pseudo-element can be used with all such 3.295 elements that contain text, or that have a descendant in the same flow 3.296 that contains text. A User-Agent should act as if the fictional start tag 3.297 of the ::first-letter pseudo-element is just before the first text of the 3.298 element, even if that first text is in a descendant. </p> 3.299 <div class="example"> 3.300 <p>Example:</p> 3.301 <p>The fictional tag sequence for this HTML fragment: </p> 3.302 <pre><div> 3.303 <p>The first text.</pre> 3.304 <p>is: </p> 3.305 <pre><div> 3.306 <p><div::first-letter><p::first-letter>T</...></...>he first text.</pre> 3.307 </div> 3.308 <p>In CSS the first letter of a table-cell or inline-block cannot be the 3.309 first letter of an ancestor element. Thus, in <code><DIV><P 3.310 STYLE="display: inline-block">Hello<BR>Goodbye</P> 3.311 etcetera</DIV></code> the first letter of the <code>DIV</code> is 3.312 not the letter "H". In fact, the <code>DIV</code> doesn't have a first 3.313 letter. </p> 3.314 <p>If an element is a list item (‘<code class="css">display: list-item</code>’), 3.315 the <code>::first-letter</code> applies to the first letter in the 3.316 principal box after the marker. User-Agents may ignore <code>::first-letter</code> 3.317 on list items with ‘<code class="css">list-style-position: inside</code>’. 3.318 If an element has <code>::before</code> or <code>::after</code> content, 3.319 the <code>::first-letter</code> applies to the first letter of the 3.320 element <em>including</em> that content. </p> 3.321 <div class="example"> 3.322 <p>Example:</p> 3.323 <p>After the rule <code>p::before {content: "Note: "}</code>, the 3.324 selector <code>p::first-letter</code> matches the "N" of "Note".</p> 3.325 </div> 3.326 <p>In CSS a ::first-line pseudo-element is similar to an inline-level 3.327 element if its ‘<code class="property">float</code>’ property is ‘<code class="property">none</code>’; 3.328 otherwise, it is similar to a floated element. The following properties 3.329 that apply to <code>::first-letter</code> pseudo-elements: font 3.330 properties, ‘<code class="property">text-decoration</code>’, ‘<code class="property">text-transform</code>’, 3.331 ‘<code class="property">letter-spacing</code>’, ‘<code class="property">word-spacing</code>’ 3.332 (when appropriate), ‘<code class="property">line-height</code>’, ‘<code class="property">float</code>’, 3.333 ‘<code class="property">vertical-align</code>’ (only if ‘<code class="property">float</code>’ 3.334 is ‘<code class="property">none</code>’), margin properties, padding 3.335 properties, border properties, color property, background properties. 3.336 User-Agents may apply other properties as well. To allow User-Agents to 3.337 render a typographically correct drop cap or initial cap, the User-Agent 3.338 may choose a line-height, width and height based on the shape of the 3.339 letter, unlike for normal elements. </p> 3.340 <div class="example"> 3.341 <p>Example:</p> 3.342 <p>This CSS and HTML example shows a possible rendering of an initial cap. 3.343 Note that the ‘<code class="property">line-height</code>’ that is 3.344 inherited by the <code>::first-letter</code> pseudo-element is 1.1, but 3.345 the User-Agent in this example has computed the height of the first 3.346 letter differently, so that it doesn't cause any unnecessary space 3.347 between the first two lines. Also note that the fictional start tag of 3.348 the first letter is inside the <span>span</span>, and thus the font 3.349 weight of the first letter is normal, not bold as the <span>span</span>: 3.350 </p> 3.351 <pre>p { line-height: 1.1 } 3.352 p::first-letter { font-size: 3em; font-weight: normal } 3.353 span { font-weight: bold } 3.354 ... 3.355 <p><span>Het hemelsche</span> gerecht heeft zich ten lange lesten<br> 3.356 Erbarremt over my en mijn benaeuwde vesten<br> 3.357 En arme burgery, en op mijn volcx gebed<br> 3.358 En dagelix geschrey de bange stad ontzet. 3.359 </pre> 3.360 <div class="figure"> 3.361 <p><img alt="Image illustrating the ::first-letter pseudo-element" src="http://www.w3.org/TR/selectors/initial-cap.png"> 3.362 </p> 3.363 </div> 3.364 </div> 3.365 <div class="example"> 3.366 <p>The following CSS will make a drop cap initial letter span about two 3.367 lines:</p> 3.368 <pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 3.369 <HTML> 3.370 <HEAD> 3.371 <TITLE>Drop cap initial letter</TITLE> 3.372 <STYLE type="text/css"> 3.373 P { font-size: 12pt; line-height: 1.2 } 3.374 P::first-letter { font-size: 200%; font-weight: bold; float: left } 3.375 SPAN { text-transform: uppercase } 3.376 </STYLE> 3.377 </HEAD> 3.378 <BODY> 3.379 <P><SPAN>The first</SPAN> few words of an article 3.380 in The Economist.</P> 3.381 </BODY> 3.382 </HTML> 3.383 </pre> 3.384 <p>This example might be formatted as follows:</p> 3.385 <div class="figure"> 3.386 <p><img alt="Image illustrating the combined effect of the ::first-letter 3.387 and ::first-line pseudo-elements" src="http://www.w3.org/TR/selectors/first-letter.png"></p> 3.388 </div> 3.389 <p>The <span class="index-inst" id="fictional-tag-sequence0" title="fictional 3.390 tag sequence">fictional tag sequence</span> is:</p> 3.391 <pre><P> 3.392 <SPAN> 3.393 <P::first-letter> 3.394 T 3.395 </P::first-letter>he first 3.396 </SPAN> 3.397 few words of an article in the Economist. 3.398 </P> 3.399 </pre> 3.400 <p>Note that the <code>::first-letter</code> pseudo-element tags abut the 3.401 content (i.e., the initial character), while the ::first-line 3.402 pseudo-element start tag is inserted right after the start tag of the 3.403 block element.</p> 3.404 </div> 3.405 <p>In order to achieve traditional drop caps formatting, user agents may 3.406 approximate font sizes, for example to align baselines. Also, the glyph 3.407 outline may be taken into account when formatting. </p> 3.408 3.409 <h3 id="gen-content">The ::before and ::after pseudo-elements</h3> 3.410 <p>The <code>::before</code> and <code>::after</code> pseudo-elements can 3.411 be used to describe generated content before or after an element's 3.412 content. They are explained in CSS 2.1 [[!CSS21]]. 3.413 </p> 3.414 <p>When the <code>::first-letter</code> and <code>::first-line</code> 3.415 pseudo-elements are applied to an element having content generated using <code>::before</code> 3.416 or <code>::after</code> pseudo-elements, they apply to the first letter or line of the 3.417 element including the generated content. </p> 3.418 <p></p> 3.419 3.420 <p>A <a href="http://www.w3.org/TR/CSS2/syndata.html#rule-sets">CSS rule</a> 3.421 using <code>::before</code> or <code>::after</code> creates a pseudo-element only if 3.422 the <a href="http://www.w3.org/TR/CSS2/cascade.html#computed-value">computed 3.423 values</a> of the '<a href="http://www.w3.org/TR/CSS2/generate.html#content">content</a>' 3.424 property and the '<a href="http://www.w3.org/TR/css3-regions/#the-flow-from-property"><span 3.425 class="property">flow-from</span></a>' 3.426 property [[CSS3-REGIONS]] are not both 'none'.</p> 3.427 3.428 <div class="issue"> 3.429 <p>There are a11y issues 3.430 with ::before and ::after pseudo-elements and generated content 3.431 that were raised in the discussion of the following sections.</p> 3.432 </div> 3.433 3.434 <h4 id="ordinal-before-and-after">Multiple ::before and ::after pseudo-elements using ordinals</span></h4> 3.435 3.436 <p>More than one ::before or ::after pseudo-element 3.437 can be created or accessed 3.438 by adding a positive integer 3.439 called the <strong>ordinal</strong> 3.440 in parentheses.</p> 3.441 3.442 <div class="issue"> 3.443 <p>Using ordinals solves issues of insertion order, 3.444 but does not provide a meaningful name 3.445 for a particular ::before or ::after element. 3.446 A named psuedo-element could provide better meaning, 3.447 at the expense of ordering.</p> 3.448 </div> 3.449 3.450 <p>The ordinal 1 has a special meaning:<code> </code></p> 3.451 <ul> 3.452 <li><code>::before(1)</code> and <a href="http://www.w3.org/TR/CSS2/generate.html#before-after-content"><code>::before</code></a> 3.453 are strictly equivalent</li> 3.454 <li><code>::after(1)</code> and <a href="http://www.w3.org/TR/CSS2/generate.html#before-after-content"><code>::after</code></a> 3.455 are also strictly equivalent.</li> 3.456 </ul> 3.457 3.458 <p><code>::before()</code> and <code>::after()</code> pseudo-elements 3.459 are ordered by increasing ordinal 3.460 from the nearest element's 3.461 contents boundaries. 3.462 For example:</p> 3.463 <div class="example"> 3.464 <p>Let's take the example of 3.465 a div element creating 3.466 two ::before pseudo-elements 3.467 at ordinals 1 and 4, 3.468 and three ::after pseudo-elements 3.469 at ordinals 1, 5 and 8. 3.470 The rules would look like this: 3.471 <pre> 3.472 div::before(1) {} 3.473 div::before(4) {} 3.474 div::after(1) {} 3.475 div::after(5) {} 3.476 div::after(8) {} 3.477 </pre> 3.478 The pseudo-elements 3.479 and the contents 3.480 of the element 3.481 are then ordered 3.482 in this way:</p> 3.483 <pre> 3.484 -- element's boundary -- 3.485 [ ordinal 4, before ] 3.486 [ ::before, ordinal 1, before ] 3.487 -- element's contents boundary -- 3.488 3.489 -- element's contents boundary -- 3.490 [ ::after, ordinal 1, after ] 3.491 [ ordinal 5, after ] 3.492 [ ordinal 8, after ] 3.493 -- element's boundary -- 3.494 </pre> 3.495 </div> 3.496 3.497 <div class="example"> 3.498 <p>One use of multiple <code>::before</code> and <code>::after</code> elements 3.499 is to mix generated content 3.500 with graphical effects. 3.501 Pseudo-elements are used 3.502 in quotes both 3.503 for adding quotation marks 3.504 in generated content 3.505 OR for drawing a 3.506 speech bubble arrow. 3.507 With multiple <code>::before</code> and <code>::after</code> elements 3.508 you can get both.</p> 3.509 3.510 <p>This effect: <img src="images/quote-arrow.png"> can be achieved with this code: </p> 3.511 3.512 <pre> 3.513 div::before { 3.514 content: "“"; 3.515 } 3.516 3.517 div::after { 3.518 content: "”"; 3.519 } 3.520 3.521 div::after(2) { 3.522 content: "."; 3.523 position: absolute; 3.524 bottom: -10px; 3.525 right: 20%; 3.526 border-left: 10px solid transparent; 3.527 border-right: 10px solid transparent; 3.528 border-top: 10px solid #111; 3.529 width: 0; 3.530 height: 0; 3.531 } 3.532 3.533 div{ 3.534 position: relative; 3.535 float: left; 3.536 background: #111; 3.537 padding: 1em; 3.538 border-radius: 1em; 3.539 color: white; 3.540 } 3.541 3.542 <div>I'm talking about CSS Pseudo-elements.</div> 3.543 </pre> 3.544 3.545 <p>And if you have a single quote 3.546 from multiple speakers, 3.547 more arrows can be added 3.548 by adding more <code>::after()</code> pseudo-elements: 3.549 <img src="images/multiple-arrows.png"></p> 3.550 3.551 <p>In general, 3.552 there's no longer a limitation 3.553 to two instances 3.554 for whatever 3.555 a <code>::before</code> or <code>::after</code> pseudo-element 3.556 can be used 3.557 (generated content, 3.558 graphic effects, 3.559 clearfix, etc.). 3.560 </div> 3.561 3.562 <div class="example"> 3.563 <p>Another use of multiple 3.564 <code>::before</code> and <code>::after</code> pseudo-elements 3.565 is to change the style 3.566 of pieces of generated content. 3.567 If a citation appended to a quote 3.568 should be in a different font 3.569 than the quotation mark, 3.570 two ::after()</code> pseudo-elements 3.571 can be used.</p> 3.572 <img src="images/multiple-styles.png"> 3.573 <pre> 3.574 blockquote::before { 3.575 content: "“"; 3.576 } 3.577 3.578 blockquote::after { 3.579 content: "”"; 3.580 } 3.581 3.582 blockquote::after(2) { 3.583 content: " - " attr(data-author); 3.584 font: normal 0.8em sans-serif; 3.585 } 3.586 3.587 <blockquote data-author="Mark Twain">The funniest things are the forbidden.</blockquote> 3.588 </pre> 3.589 </div> 3.590 3.591 <div class="issue"> 3.592 <p>An issue has been raised on the previous example, 3.593 questioning whether using attr(data-author) in this way 3.594 is appropriate for use in an example.</p> 3.595 </div> 3.596 3.597 <div class="example"> 3.598 <p>A use for ordinals 3.599 is to allow muliple stylesheets 3.600 to add their own <code>::before</code> and <code>::after</code> pseudo-elements 3.601 and coordinate insertion positions.</p> 3.602 <p>If one stylesheet uses 3.603 a single <code>::before(10) {}</code> rule, 3.604 then another stylesheet gets 3.605 the option to</p> 3.606 <ul> 3.607 <li>Add to or redefine that rule</li> 3.608 <li>Add an additional pseudo-element before that one with <code>::before(5) {}</code></li> 3.609 <li>Add an additional pseudo-element after that one with <code>::before(15) {}</code></li> 3.610 </ul> 3.611 </div> 3.612 3.613 <div class="example"> 3.614 <p>Pseudo-elements can be used 3.615 to generate boxes in CSS 3.616 for a <a href="http://dev.w3.org/csswg/css3-regions/#region-chain">region chain</a>. 3.617 Allowing more than two 3.618 such boxes per element could allow 3.619 the main CSS Regions <a href="http://dev.w3.org/csswg/css3-regions/#named-flows-and-regions">example</a> 3.620 to be <a href="http://dev.w3.org/csswg/css3-regions/#intro-example-code">written</a> 3.621 without empty divs 3.622 for the regions 3.623 in the markup.</p> 3.624 <p>Region chains 3.625 with a fixed number of regions 3.626 (usually with an auto-height region 3.627 at the end of the chain) 3.628 can be defined entirely in CSS 3.629 using multiple pseudo-elements.</p> 3.630 <pre> 3.631 <style> 3.632 #grid { 3.633 width: 80vw; 3.634 height: 60vw; 3.635 grid-template: "aaa.d" 3.636 "....d" 3.637 "bbb.d" 3.638 "....d" 3.639 "ccc.d"; 3.640 grid-rows: 52% 4% 20% 4% 20%; 3.641 grid-columns: 30% 5% 30% 5% 30%; 3.642 } 3.643 #grid::before(2) { grid-cell: a; } 3.644 #grid::before { grid-cell: b; } 3.645 #boxA { grid-cell: c; } 3.646 #grid::after { grid-cell: d; } 3.647 3.648 #body::after { 3.649 width: 80vw; 3.650 } 3.651 3.652 #grid::before { 3.653 column-count: 2; 3.654 } 3.655 3.656 article { 3.657 flow-into: article_flow; 3.658 } 3.659 3.660 #grid::before(2), #grid::before, #grid::after, #body::after { 3.661 flow-from: article_flow; 3.662 } 3.663 3.664 </style> 3.665 3.666 <article> 3.667 <h1>Introduction</h1> 3.668 <p>This is an example ...</p> 3.669 3.670 <h2>More Details</h2> 3.671 <p>This illustrates ...</p> 3.672 <p>Then, the example ...</p> 3.673 <p>Finally, this ...</p> 3.674 </article> 3.675 3.676 <div id="grid"> 3.677 <div id="boxA"></div> 3.678 </div> 3.679 </pre> 3.680 </div> 3.681 <div class="issue"> 3.682 <p>Several choices of syntax 3.683 for declaring multiple 3.684 ::before and ::after pseudo-elements 3.685 have been considered.</p> 3.686 <ul> 3.687 <li>Brackets - <code>::before[2]</code> 3.688 <ul>Benefits 3.689 <li>Can reserve bracket syntax for ordinals</li> 3.690 <li>Could be appended to 3.691 an otherwise-parenthesized pseudo 3.692 <code>::hypothetical(args)[ordinal]</code></li> 3.693 </ul> 3.694 <ul>Drawbacks 3.695 <li>Looks too much like attribute selectors</li> 3.696 </ul> 3.697 </li> 3.698 <li>Add a generic ordinal syntax - ::pseudo(before, 2) 3.699 <ul>Benefits 3.700 <li>Easily extensible to addition pseudos</li> 3.701 <li>Parallel to ::nth-pseudo() syntax</li> 3.702 </ul> 3.703 <ul>Drawbacks 3.704 <li>Only used for ::before and ::after so far</li> 3.705 <li>More to type</li> 3.706 </ul> 3.707 </li> 3.708 <li>Parentheses - <code>::before(2)</code> 3.709 <ul>Benefits 3.710 <li>No attribute selector confusion</li> 3.711 <li>Previous attempts have used this syntax</li> 3.712 </ul> 3.713 <ul>Drawbacks 3.714 <li>Perhaps harder to distinguish ordinal from index?</li> 3.715 </ul> 3.716 </li> 3.717 </ul> 3.718 </div> 3.719 <div class="issue"> 3.720 <p>We arbitrarily chose the order here. Pseudo-elements could be 3.721 ordered differently, for example as in:<br> 3.722 </p> 3.723 <pre> 3.724 -- element's boundary -- 3.725 [ ::before, ordinal 1, before ] 3.726 [ ordinal 4, before ] 3.727 -- element's contents boundary -- 3.728 3.729 -- element's contents boundary -- 3.730 [ ordinal 8, after ] 3.731 [ ordinal 5, after ] 3.732 [ ::after, ordinal 1, after ] 3.733 -- element's boundary -- 3.734 </pre> 3.735 <p>or</p> 3.736 <pre> 3.737 -- element's boundary -- 3.738 [ ::before, ordinal 1, before ] 3.739 [ ordinal 4, before ] 3.740 -- element's contents boundary -- 3.741 3.742 -- element's contents boundary -- 3.743 [ ::after, ordinal 1, after ] 3.744 [ ordinal 5, after ] 3.745 [ ordinal 8, after ] 3.746 -- element's boundary -- 3.747 </pre> <p>We expect to resolve this issue with the CSS Working Group.</p> 3.748 </div> 3.749 3.750 <h4>The ::nth-before(), ::nth-after(), ::nth-last-before() and ::nth-last-after() pseudo-elements</h3> 3.751 <p>The new <code>::nth-before()</code>, 3.752 <code>::nth-after()</code>, 3.753 <code>::nth-last-before()</code> 3.754 and <code>::nth-last-after()</code> 3.755 pseudo-elements select ::before and ::after pseudo-elements 3.756 based on indices, not ordinals. 3.757 They all take a single mandatory argument:</p> 3.758 <ol> 3.759 <li>a mandatory <strong>index</strong> in the form of <a href="http://www.w3.org/TR/css3-selectors/#nth-child-pseudo">an 3.760 <code>an+b</code> syntax or the <code>odd</code> or <code>even</code> 3.761 keywords</a></li> 3.762 </ol> 3.763 <div class="issue"> 3.764 <p>Extensions to selector syntax may allow pseudo-classes after a pseudo-element. 3.765 In that case, the syntax in this section could change to something like 3.766 <code>::before:nth()</code>, 3.767 <code>::after:nth()</code>, 3.768 <code>::before:nth-last()</code> 3.769 and <code>::after:nth-last()</code>.</p> 3.770 </div> 3.771 <div class="issue"> 3.772 <p>Is ::nth-before(n) to access all ::before pseudo-elements enough of an override mechanism?</p> 3.773 </div> 3.774 3.775 <div class="example"> 3.776 <p>Let's reuse the example in Example 8 above and let's show the indices:</p> 3.777 <pre> 3.778 -- element's boundary -- 3.779 [ ordinal 4, before, nth index 2, last-nth index 1 ] 3.780 [ ::before, ordinal 1, before, nth index 1, last-nth index 2 ] 3.781 -- element's contents boundary -- 3.782 3.783 -- element's contents boundary -- 3.784 [ ::after, ordinal 1, after, nth index 1, last-nth index 3 ] 3.785 [ ordinal 5, after, nth index 2, last-nth index 2 ] 3.786 [ ordinal 8, after, nth index 3, last-nth index 1 ] 3.787 -- element's boundary -- 3.788 </pre> 3.789 </div> 3.790 <p><code>::nth-*()</code> syntax cannot create a new pseudo-element 3.791 and the 'content' and 'flow-from'properties do not apply to them.</p> 3.792 <p>They are allowed as the second parameter of <code>ViewCSS.getComputedStyle()</code> 3.793 if and only if the index parameter can select only one pseudo-element: for 3.794 instance <code>12</code> or <code>0n+5</code>.</p> 3.795 3.796 <h2>Additions to the CSS Object Model</h2> 3.797 <p>Pseudo-elements should be 3.798 reachable by script, 3.799 stylable from script, 3.800 and available as event targets.</p> 3.801 <p class="note"><span class="note-prefix">Note </span>We may extend this 3.802 section in the future to allow creation of pseudo-elements from script.</p> 3.803 3.804 <h3>Interface CSSPseudoElement</h3> 3.805 <p>The <code>CSSPseudoElement</code> interface 3.806 allows pseudo-elements to be styleable from script 3.807 and makes them event targets.</p> 3.808 3.809 <div class="issue"> 3.810 <p>The approach in this draft 3.811 is to start with a bare minimum 3.812 for the CSSPseudoElement interface 3.813 and build up from there. 3.814 Another more radical approach 3.815 could take everything that's common 3.816 between a pseudo-element and a node 3.817 and create a new base class 3.818 for both Node and CSSPseudoElement.</p> 3.819 </div> 3.820 3.821 <pre class="idl">interface CSSPseudoElement {<br> readonly attribute unsigned long <a 3.822 href="#dom-csspseudochild-ordinal">ordinal</a>;<br> // the ordinal of a column is its index<br> readonly attribute DOMString <a 3.823 href="#dom-csspseudochild-type">type</a>;<br> readonly attribute <a 3.824 href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration">CSSStyleDeclaration</a> <a 3.825 href="#dom-csspseudochild-style">style</a>;<br>};<br><br>CSSPseudoElement implements EventTarget;<br></pre> 3.826 <p><a name="dom-csspseudochild-ordinal"></a>The <code><strong><em>ordinal</em></strong></code> 3.827 attribute represents the ordinal of the pseudo-element for the object's type. 3.828 It is a strictly positive integer. The value <code>1</code> for the <code>before</code> 3.829 (or <code>after</code>, <code>letter</code> and <code>line</code>) 3.830 types represents the <code>::before</code> (or <code>::after</code>, 3.831 <code>::first-letter</code> and <code>::first-line</code>) 3.832 pseudo-elements.</p> 3.833 <p><a name="dom-csspseudochild-type"></a>The <code><strong><em>type</em></strong></code> 3.834 attribute is a string representing the type of the pseudo-element. This can be one 3.835 of the following values:</p> 3.836 <dl> 3.837 <dt>‘before’</dt> 3.838 <dd>The pseudo-element was created before the element's contents</dd> 3.839 <dt>‘after’</dt> 3.840 <dd>The pseudo-element was created after the element's contents</dd> 3.841 <dt>‘letter’</dt> 3.842 <dd>The pseudo-element is the first letter of the element; the only valid 3.843 ordinal is 1.</dd> 3.844 <dt>‘line’</dt> 3.845 <dd>The pseudo-element is the first line of the element; the only valid 3.846 ordinal is 1.</dd> 3.847 <dt>‘column’</dt> 3.848 <dd>The pseudo-element is a column created by the element through the CSS 3.849 Multi-column Layout Module. In that case its <code><strong><em>ordinal</em></strong></code> 3.850 is the index of column in the collection of columns created by the 3.851 element.</dd> 3.852 </dl> 3.853 <p><a name="dom-csspseudochild-style"></a>The <code><strong><em>style</em></strong></code> 3.854 attribute is a <code>CSSStyleDeclaration</code> [[!CSSOM]] allowing 3.855 to set directly style information (inline styles) onto the pseudo-element. 3.856 Inline styles on a <code>CSSPseudoElement</code> have precedence over all 3.857 style rules styling that pseudo-element.</p> 3.858 <p>The <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget"><code>EventTarget</code></a> 3.859 interface [[!DOM-LEVEL-2-EVENTS]] must be 3.860 implemented by all instances of <code>CSSPseudoElement</code> in an in 3.861 implementation which supports the current specification.</p> 3.862 3.863 <h3>Interface CSSPseudoElementList</h3> 3.864 <p>The <code>CSSPseudoElementList</code> represents an ordered collection 3.865 of <code> CSSPseudoElement</code> instances.</p> 3.866 <pre class="idl">interface CSSPseudoElementList {<br> readonly attribute unsigned long <a 3.867 href="#dom-csspseudochildlist-length">length</a>;<br> CSSPseudoElement <a 3.868 href="#dom-csspseudochildlist-item">item</a>(unsigned long index);<br> CSSPseudoElement <a 3.869 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> 3.870 <p><a name="dom-csspseudochildlist-length"></a>The <code><strong><em>length</em></strong></code> 3.871 attribute represents the number of <code>CSSPseudoElement</code> in the 3.872 collection or zero if it is empty.</p> 3.873 <p><a name="dom-csspseudochildlist-item"></a>The method <code><strong><em>item()</em></strong></code> 3.874 is used to retrieve a <code>CSSPseudo</code><code>Element</code> by 3.875 index. It takes one parameter being the requested index into the 3.876 collection. Its return value is the <code>CSSPseudo</code><code>Element</code> 3.877 at the requested index in the collection or null if that is not a valid 3.878 index.</p> 3.879 <p><a name="dom-csspseudochildlist-getbyordinalandtype"></a>The method <code><strong><em>getByOrdinalAndType()</em></strong></code> 3.880 is used to retrieve a <code>CSSPseudo</code><code>Element</code> by its 3.881 ordinal and type. It takes two parameters: first, the requested 3.882 ordinal; second a type. Its return value is the <code>CSSPseudo</code><code>Element</code> 3.883 at the requested index in the collection or null if there is no <code>CSSPseudo</code><code>Element</code> 3.884 in the collection for that index and type.</p> 3.885 3.886 <h3>Addition to the window</h3> 3.887 <p>A new method is added to the <code>Window</code> interface to retrieve 3.888 pseudo-elements created by a given element for a given type:</p> 3.889 <pre class="idl">partial interface Window {<br> CSSPseudoElementList <a href="#dom-window-getpseudochildren">getPseudoElements</a>(Element elt,<br> DOMString type);<br>};</pre> 3.890 <p><a name="dom-window-getpseudochildren"></a>The method <code>getPseudoElements()</code> 3.891 is used to retrieve all <code>CSSPseudoElement</code> instances created 3.892 by the element <code>elt</code> for the type <code>type</code>. 3.893 Its return value is a <code>CSSPseudoElementList</code>, potentially 3.894 empty if no pseudo-element exists for the given element and the given 3.895 type.</p> 3.896 3.897 <h2 class="no-num" id="ACKS">Acknowledgements</h2> 3.898 <p>The editors would like to thank the following individuals for their 3.899 contributions, either during the conception of the specification or during 3.900 its development and specification review process: </p> 3.901 <blockquote>Tab Atkins, 3.902 Razvan Caliman, 3.903 Chris Coyier, 3.904 Anders Grimsrud, 3.905 Vincent Hardy 3.906 and the CSS Working Group members.</blockquote> 3.907 3.908 3.909 <h2 class=no-num id="references"> 3.910 References</h2> 3.911 3.912 <h3 class="no-num" id="normative-references"> 3.913 Normative references</h3> 3.914 <!--normative--> 3.915 3.916 <h3 class="no-num" id="other-references"> 3.917 Other references</h3> 3.918 <!--informative--> 3.919 3.920 <h2 class="no-num" id="index"> 3.921 Index</h2> 3.922 <!--index--> 3.923 3.924 <!-- 3.925 <h2 class="no-num" id="property-index"> 3.926 Property index</h2> 3.927 --> 3.928 <!-- properties --> 3.929 3.930 </body> 3.931 </html> 3.932 <!-- Keep this comment at the end of the file 3.933 Local variables:mode: sgmlsgml-declaration:"~/SGML/HTML4.decl"sgml-default-doctype-name:"html"sgml-minimize-attributes:tsgml-nofill-elements:("pre" "style" "br")sgml-live-element-indicator:tsgml-omittag:nil 3.934 sgml-shorttag:nilsgml-namecase-general:tsgml-general-insert-case:lowersgml-always-quote-attributes:tsgml-indent-step:nilsgml-indent-data:tsgml-parent-document:nilsgml-exposed-tags:nil 3.935 sgml-local-catalogs:nilsgml-local-ecat-files:nilEnd:--> 3.936 \ No newline at end of file
4.1 Binary file css4-pseudo/images/multiple-arrows.png has changed
5.1 Binary file css4-pseudo/images/multiple-styles.png has changed
6.1 Binary file css4-pseudo/images/quote-arrow.png has changed
