dummy update

Fri, 17 Aug 2012 23:51:31 +0200

author
Hakon Wium Lie <howcome@opera.com>
date
Fri, 17 Aug 2012 23:51:31 +0200
changeset 6504
8ef9f6bff4c5
parent 6503
8f9ae7f2506b
parent 6501
ffaf92da46f9
child 6505
3790dd31e020

dummy update

     1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/css3-overflow/Makefile	Fri Aug 17 23:51:31 2012 +0200
     1.3 @@ -0,0 +1,39 @@
     1.4 +# Calling the post-processor with file-upload. Assumes the username
     1.5 +# and password are in ~/.curl-w3.org
     1.6 +#
     1.7 +# Possible other options:
     1.8 +# -F date=YYYY-MM-DD
     1.9 +# -F ids=on
    1.10 +
    1.11 +%.html: %.src.html
    1.12 +	@echo "Calling post-processor to generate $@..."
    1.13 +	@curl -F file=@$< -F group=CSS -F output=html -F method=file -s -K ~/.curl-w3.org http://cgi.w3.org/member-bin/process.cgi >$@
    1.14 +%.err: %.src.html
    1.15 +	@echo "Calling post-processor to check $<..."
    1.16 +	@curl -F file=@$< -F group=CSS -F output=err -F method=file -s -K ~/.curl-w3.org http://cgi.w3.org/member-bin/process.cgi >$@
    1.17 +
    1.18 +
    1.19 +
    1.20 +all: check Overview.html
    1.21 +	@echo Done.
    1.22 +
    1.23 +check: Overview.err
    1.24 +	@cat $<
    1.25 +	@grep -q '^No errors$$' $< # Force a non-zero exit code if errors
    1.26 +
    1.27 +
    1.28 +
    1.29 +# A handy shortcut:
    1.30 +
    1.31 +commit: update clean all
    1.32 +	cvs commit -m 'Generated. Do not edit!' Overview.html
    1.33 +
    1.34 +update:
    1.35 +	cvs update
    1.36 +
    1.37 +clean:
    1.38 +	rm Overview.html
    1.39 +
    1.40 +
    1.41 +
    1.42 +.PHONY: check commit update clean
     2.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     2.2 +++ b/css3-overflow/Overview.html	Fri Aug 17 23:51:31 2012 +0200
     2.3 @@ -0,0 +1,1378 @@
     2.4 +<!DOCTYPE html>
     2.5 +
     2.6 +<html lang=en>
     2.7 + <head><meta content="text/html; charset=utf-8" http-equiv=Content-Type>
     2.8 +
     2.9 +  <title>CSS Overflow Module Level 3</title>
    2.10 +  <link href="#contents" rel=contents>
    2.11 +  <link href="#index" rel=index>
    2.12 +  <link href="../default.css" rel=stylesheet type="text/css">
    2.13 +  <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
    2.14 +  type="text/css">
    2.15 +
    2.16 +  <style>
    2.17 +		table.source-demo-pair {
    2.18 +			width: 100%;
    2.19 +		}
    2.20 +
    2.21 +		.in-cards-demo {
    2.22 +			width: 13em;
    2.23 +			height: 8em;
    2.24 +
    2.25 +			padding: 4px;
    2.26 +			border: medium solid blue;
    2.27 +			margin: 6px;
    2.28 +
    2.29 +			font: medium/1.3 Times New Roman, Times, serif;
    2.30 +			white-space: nowrap;
    2.31 +		}
    2.32 +
    2.33 +		.bouncy-columns-demo {
    2.34 +			width: 6em;
    2.35 +			height: 10em;
    2.36 +			float: left;
    2.37 +			margin: 1em;
    2.38 +			font: medium/1.25 Times New Roman, Times, serif;
    2.39 +			white-space: nowrap;
    2.40 +		}
    2.41 +		.bouncy-columns-demo.one {
    2.42 +			background: aqua; color: black;
    2.43 +			transform: rotate(-3deg);
    2.44 +		}
    2.45 +		.bouncy-columns-demo.two {
    2.46 +			background: yellow; color: black;
    2.47 +			transform: rotate(3deg);
    2.48 +		}
    2.49 +
    2.50 +		.article-font-inherit-demo {
    2.51 +			font: 1em/1.25 Times New Roman, Times, serif;
    2.52 +			white-space: nowrap;
    2.53 +		}
    2.54 +		.article-font-inherit-demo.one {
    2.55 +			width: 12em;
    2.56 +			font-size: 1.5em;
    2.57 +			margin-bottom: 1em;
    2.58 +			height: 4em;
    2.59 +		}
    2.60 +		.article-font-inherit-demo.two {
    2.61 +			width: 11em;
    2.62 +			margin-left: 5em;
    2.63 +			margin-right: 2em;
    2.64 +		}
    2.65 +
    2.66 +		.dark-columns-demo {
    2.67 +			width: 6em;
    2.68 +			height: 10em;
    2.69 +			float: left;
    2.70 +			margin-right: 1em;
    2.71 +			font: medium/1.25 Times New Roman, Times, serif;
    2.72 +			white-space: nowrap;
    2.73 +		}
    2.74 +		.dark-columns-demo.one {
    2.75 +			background: aqua; color: black;
    2.76 +		}
    2.77 +		.dark-columns-demo.one :link {
    2.78 +			color: blue;
    2.79 +		}
    2.80 +		.dark-columns-demo.one :visited {
    2.81 +			color: purple;
    2.82 +		}
    2.83 +		.dark-columns-demo.two {
    2.84 +			background: navy; color: white;
    2.85 +		}
    2.86 +		.dark-columns-demo.two :link {
    2.87 +			color: aqua;
    2.88 +		}
    2.89 +		.dark-columns-demo.two :visited {
    2.90 +			color: fuchsia;
    2.91 +		}
    2.92 +
    2.93 +		.article-max-lines-demo {
    2.94 +			font: 1em/1.25 Times New Roman, Times, serif;
    2.95 +			white-space: nowrap;
    2.96 +		}
    2.97 +		.article-max-lines-demo.one::first-letter {
    2.98 +			font-size: 2em;
    2.99 +			line-height: 0.9;
   2.100 +		}
   2.101 +		.article-max-lines-demo.one {
   2.102 +			font-size: 1.5em;
   2.103 +			width: 16em;
   2.104 +		}
   2.105 +		.article-max-lines-demo.two {
   2.106 +			width: 11.5em;
   2.107 +			float: left; margin-right: 1em;
   2.108 +		}
   2.109 +		.article-max-lines-demo.three {
   2.110 +			width: 11.5em;
   2.111 +			float: left;
   2.112 +		}
   2.113 +	</style>
   2.114 +
   2.115 + <body>
   2.116 +  <div class=head> <!--begin-logo-->
   2.117 +   <p><a href="http://www.w3.org/"><img alt=W3C height=48
   2.118 +    src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
   2.119 +
   2.120 +   <h1>CSS Overflow Module Level 3</h1>
   2.121 +
   2.122 +   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 16 August 2012</h2>
   2.123 +
   2.124 +   <dl>
   2.125 +    <dt>This version:
   2.126 +
   2.127 +    <dd><a
   2.128 +     href="http://www.w3.org/TR/2012/ED-css3-overflow-20120816/">http://www.w3.org/TR/2012/ED-css3-overflow-20120816/</a>
   2.129 +     
   2.130 +
   2.131 +    <dt>Latest version:
   2.132 +
   2.133 +    <dd><a
   2.134 +     href="http://www.w3.org/TR/css3-overflow/">http://www.w3.org/TR/css3-overflow/</a>
   2.135 +     
   2.136 +
   2.137 +    <dt>Editor's draft:
   2.138 +
   2.139 +    <dd><a
   2.140 +     href="http://dev.w3.org/csswg/css3-overflow/">http://dev.w3.org/csswg/css3-overflow/</a>
   2.141 +     <!--
   2.142 +  <dt>Previous version:
   2.143 +    <dd><a href="http://www.w3.org/PreviousVersionURI">
   2.144 +    http://www.w3.org/PreviousVersionURI</a>
   2.145 +-->
   2.146 +     
   2.147 +
   2.148 +    <dt>Issue Tracking:
   2.149 +
   2.150 +    <dd>Maintained in document (only editor's draft is current)
   2.151 +
   2.152 +    <dt>Feedback:
   2.153 +
   2.154 +    <dd><a
   2.155 +     href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a>
   2.156 +     with subject line “<kbd>[css3-overflow] <var>… message topic
   2.157 +     …</var></kbd>”
   2.158 +
   2.159 +    <dt>Editors:
   2.160 +
   2.161 +    <dd class="h-card vcard"> <a class="p-name fn u-url url"
   2.162 +     href="http://dbaron.org/" rel=author>L. David Baron</a>, <a
   2.163 +     class="p-org org" href="http://www.mozilla.org/">Mozilla</a>
   2.164 +   </dl>
   2.165 +   <!--begin-copyright-->
   2.166 +   <p class=copyright><a
   2.167 +    href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
   2.168 +    rel=license>Copyright</a> © 2012 <a href="http://www.w3.org/"><abbr
   2.169 +    title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
   2.170 +    href="http://www.csail.mit.edu/"><abbr
   2.171 +    title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
   2.172 +    href="http://www.ercim.eu/"><abbr
   2.173 +    title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
   2.174 +    <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
   2.175 +    href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
   2.176 +    <a
   2.177 +    href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
   2.178 +    and <a
   2.179 +    href="http://www.w3.org/Consortium/Legal/copyright-documents">document
   2.180 +    use</a> rules apply.</p>
   2.181 +   <!--end-copyright-->
   2.182 +   <hr title="Separator for header">
   2.183 +  </div>
   2.184 +
   2.185 +  <h2 class="no-num no-toc" id=abstract>Abstract</h2>
   2.186 +
   2.187 +  <p> <a href="http://www.w3.org/TR/CSS/">CSS</a> is a language for
   2.188 +   describing the rendering of structured documents (such as HTML and XML) on
   2.189 +   screen, on paper, in speech, etc. This module contains the features of CSS
   2.190 +   relating to new mechanisms of overflow handling in visual media (e.g.,
   2.191 +   screen or paper). In interactive media, it describes features that allow
   2.192 +   the overflow from a fixed size container to be handled by pagination
   2.193 +   (displaying one page at a time). It also describes features, applying to
   2.194 +   all visual media, that allow the contents of an element to be spread
   2.195 +   across multiple fragments, allowing the contents to flow across multiple
   2.196 +   regions or to have different styles for different fragments.
   2.197 +
   2.198 +  <h2 class="no-num no-toc" id=status>Status of this document</h2>
   2.199 +  <!--begin-status-->
   2.200 +
   2.201 +  <p>This is a public copy of the editors' draft. It is provided for
   2.202 +   discussion only and may change at any moment. Its publication here does
   2.203 +   not imply endorsement of its contents by W3C. Don't cite this document
   2.204 +   other than as work in progress.
   2.205 +
   2.206 +  <p>The (<a
   2.207 +   href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
   2.208 +   mailing list <a
   2.209 +   href="mailto:www-style@w3.org?Subject=%5Bcss3-overflow%5D%20PUT%20SUBJECT%20HERE">
   2.210 +   www-style@w3.org</a> (see <a
   2.211 +   href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
   2.212 +   discussion of this specification. When sending e-mail, please put the text
   2.213 +   “css3-overflow” in the subject, preferably like this:
   2.214 +   “[<!---->css3-overflow<!---->] <em>…summary of comment…</em>”
   2.215 +
   2.216 +  <p>This document was produced by the <a href="/Style/CSS/members">CSS
   2.217 +   Working Group</a> (part of the <a href="/Style/">Style Activity</a>).
   2.218 +
   2.219 +  <p>This document was produced by a group operating under the <a
   2.220 +   href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent
   2.221 +   Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status"
   2.222 +   rel=disclosure>public list of any patent disclosures</a> made in
   2.223 +   connection with the deliverables of the group; that page also includes
   2.224 +   instructions for disclosing a patent. An individual who has actual
   2.225 +   knowledge of a patent which the individual believes contains <a
   2.226 +   href="/Consortium/Patent-Policy-20040205/#def-essential">Essential
   2.227 +   Claim(s)</a> must disclose the information in accordance with <a
   2.228 +   href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the
   2.229 +   W3C Patent Policy</a>.</p>
   2.230 +  <!--end-status-->
   2.231 +
   2.232 +  <p>The following features are at risk: …
   2.233 +
   2.234 +  <h2 class="no-num no-toc" id=contents> Table of contents</h2>
   2.235 +  <!--begin-toc-->
   2.236 +
   2.237 +  <ul class=toc>
   2.238 +   <li><a href="#intro"><span class=secno>1. </span> Introduction</a>
   2.239 +
   2.240 +   <li><a href="#scrolling-overflow"><span class=secno>2. </span>Scrolling
   2.241 +    and hidden overflow</a>
   2.242 +
   2.243 +   <li><a href="#paginated-overflow"><span class=secno>3. </span>Paginated
   2.244 +    overflow</a>
   2.245 +
   2.246 +   <li><a href="#fragment-overflow"><span class=secno>4. </span>Fragment
   2.247 +    overflow</a>
   2.248 +    <ul class=toc>
   2.249 +     <li><a href="#fragment-styling"><span class=secno>4.1. </span>Fragment
   2.250 +      styling</a>
   2.251 +      <ul class=toc>
   2.252 +       <li><a href="#fragment-pseudo-element"><span class=secno>4.1.1.
   2.253 +        </span>The ::nth-fragment() pseudo-element</a>
   2.254 +
   2.255 +       <li><a href="#style-of-fragments"><span class=secno>4.1.2.
   2.256 +        </span>Styling of fragments</a>
   2.257 +
   2.258 +       <li><a href="#style-in-fragments"><span class=secno>4.1.3.
   2.259 +        </span>Styling inside fragments</a>
   2.260 +      </ul>
   2.261 +
   2.262 +     <li><a href="#max-lines"><span class=secno>4.2. </span>The ‘<code
   2.263 +      class=property>max-lines</code>’ property</a>
   2.264 +    </ul>
   2.265 +
   2.266 +   <li><a href="#static-media"><span class=secno>5. </span>Overflow in static
   2.267 +    media</a>
   2.268 +
   2.269 +   <li><a href="#conformance"><span class=secno>6. </span> Conformance</a>
   2.270 +    <ul class=toc>
   2.271 +     <li><a href="#placement"><span class=secno>6.1. </span> Module
   2.272 +      interactions</a>
   2.273 +
   2.274 +     <li><a href="#values"><span class=secno>6.2. </span> Values</a>
   2.275 +
   2.276 +     <li><a href="#conventions"><span class=secno>6.3. </span> Document
   2.277 +      conventions</a>
   2.278 +
   2.279 +     <li><a href="#conformance-classes"><span class=secno>6.4. </span>
   2.280 +      Conformance classes</a>
   2.281 +
   2.282 +     <li><a href="#partial"><span class=secno>6.5. </span> Partial
   2.283 +      implementations</a>
   2.284 +
   2.285 +     <li><a href="#experimental"><span class=secno>6.6. </span> Experimental
   2.286 +      implementations</a>
   2.287 +
   2.288 +     <li><a href="#testing"><span class=secno>6.7. </span> Non-experimental
   2.289 +      implementations</a>
   2.290 +
   2.291 +     <li><a href="#cr-exit-criteria"><span class=secno>6.8. </span> CR exit
   2.292 +      criteria</a>
   2.293 +    </ul>
   2.294 +
   2.295 +   <li class=no-num><a href="#acknowledgments"> Acknowledgments</a>
   2.296 +
   2.297 +   <li class=no-num><a href="#references"> References</a>
   2.298 +    <ul class=toc>
   2.299 +     <li class=no-num><a href="#normative-references"> Normative
   2.300 +      references</a>
   2.301 +
   2.302 +     <li class=no-num><a href="#other-references"> Other references</a>
   2.303 +    </ul>
   2.304 +
   2.305 +   <li class=no-num><a href="#index"> Index</a>
   2.306 +
   2.307 +   <li class=no-num><a href="#property-index"> Property index</a>
   2.308 +  </ul>
   2.309 +  <!--end-toc-->
   2.310 +
   2.311 +  <h2 id=intro><span class=secno>1. </span> Introduction</h2>
   2.312 +
   2.313 +  <p> In CSS Level 1 <a href="#CSS1"
   2.314 +   rel=biblioentry>[CSS1]<!--{{CSS1}}--></a>, placing more content than would
   2.315 +   fit inside an element with a specified size was generally an authoring
   2.316 +   error. Doing so caused the content to extend outside the bounds of the
   2.317 +   element, which would likely cause that content to overlap with other
   2.318 +   elements.
   2.319 +
   2.320 +  <p> CSS Level 2 <a href="#CSS21"
   2.321 +   rel=biblioentry>[CSS21]<!--{{CSS21}}--></a> introduced the ‘<code
   2.322 +   class=property>overflow</code>’ property, which allows authors to have
   2.323 +   overflow be handled by scrolling, which means it is no longer an authoring
   2.324 +   error. It also allows authors to specify that overflow is handled by
   2.325 +   clipping, which makes sense when the author's intent is that the content
   2.326 +   not be shown.
   2.327 +
   2.328 +  <p> However, scrolling is not the only way to present large amounts of
   2.329 +   content, and may even not be the optimal way. After all, the codex
   2.330 +   replaced the scroll as the common format for large written works because
   2.331 +   of its advantages.
   2.332 +
   2.333 +  <p> This specification introduces a mechanism for Web pages to specify that
   2.334 +   an element of a page should handle overflow through pagination rather than
   2.335 +   through scrolling.
   2.336 +
   2.337 +  <p> This specification also extends the concept of overflow in another
   2.338 +   direction. Instead of requiring that authors specify a single area into
   2.339 +   which the content of an element must flow, this specification allows
   2.340 +   authors to specify multiple fragments, each with their own dimensions and
   2.341 +   styles, so that the content of the element can flow from one to the next,
   2.342 +   using as many as needed to place the content without overflowing.
   2.343 +
   2.344 +  <p> In both of these cases, implementations must break the content in the
   2.345 +   block-progression dimension. Implementations must do this is described in
   2.346 +   the CSS Fragmentation Module <a href="#CSS3-BREAK"
   2.347 +   rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a>.
   2.348 +
   2.349 +  <h2 id=scrolling-overflow><span class=secno>2. </span>Scrolling and hidden
   2.350 +   overflow</h2>
   2.351 +
   2.352 +  <p class=issue> Move material from <a href="#CSS21"
   2.353 +   rel=biblioentry>[CSS21]<!--{{CSS21}}--></a> and <a href="#CSS3BOX"
   2.354 +   rel=biblioentry>[CSS3BOX]<!--{{CSS3BOX}}--></a> here.
   2.355 +
   2.356 +  <h2 id=paginated-overflow><span class=secno>3. </span>Paginated overflow</h2>
   2.357 +
   2.358 +  <p class=issue>overflow:paginate or overflow:pages (or paged-x, paged-y,
   2.359 +   paged-x-controls, paged-y-controls as <a href="#CSS3GCPM"
   2.360 +   rel=biblioentry>[CSS3GCPM]<!--{{CSS3GCPM}}--></a> has?)
   2.361 +
   2.362 +  <p class=issue>Ability to display N pages at once rather than just one page
   2.363 +   at once?
   2.364 +
   2.365 +  <p class=issue> The current implementation of paginated overflow uses the
   2.366 +   ‘<code class=property>overflow</code>’/‘<code
   2.367 +   class=property>overflow-x</code>’/‘<code
   2.368 +   class=property>overflow-y</code>’ properties rather than the ‘<code
   2.369 +   class=property>overflow-style</code>’ property as proposed in the <a
   2.370 +   href="#CSS3GCPM" rel=biblioentry>[CSS3GCPM]<!--{{CSS3GCPM}}--></a> draft
   2.371 +   (which also matches the <a href="#CSS3-MARQUEE"
   2.372 +   rel=biblioentry>[CSS3-MARQUEE]<!--{{CSS3-MARQUEE}}--></a> proposal). We
   2.373 +   should probably switch away from ‘<code
   2.374 +   class=property>overflow-style</code>’, but that's not 100% clear.
   2.375 +
   2.376 +  <h2 id=fragment-overflow><span class=secno>4. </span>Fragment overflow</h2>
   2.377 +
   2.378 +  <p> This section introduces and defines the meaning of the new ‘<code
   2.379 +   class=css>fragments</code>’ value of the ‘<code
   2.380 +   class=property>overflow</code>’ property.
   2.381 +
   2.382 +  <p> When the computed value of ‘<code class=property>overflow</code>’
   2.383 +   for an element is ‘<code class=css>fragments</code>’, and
   2.384 +   implementations would otherwise have created a box for the element, then
   2.385 +   implementations must create a sequence of <dfn id=fragment-box>fragment
   2.386 +   box</dfn>es for that element. (It is possible for an element with ‘<code
   2.387 +   class=css>overflow: fragments</code>’ to generate only one <a
   2.388 +   href="#fragment-box"><i>fragment box</i></a>. However, if an element's
   2.389 +   computed ‘<code class=property>overflow</code>’ is not ‘<code
   2.390 +   class=css>fragments</code>’, then its box is not a <a
   2.391 +   href="#fragment-box"><i>fragment box</i></a>.) Every <a
   2.392 +   href="#fragment-box"><i>fragment box</i></a> is a fragmentation container,
   2.393 +   and any overflow that would cause that fragmentation container to fragment
   2.394 +   causes another <a href="#fragment-box"><i>fragment box</i></a> created as
   2.395 +   a next sibling of the previous one. <span class=issue>Or is it as though
   2.396 +   it's a next sibling of the element? Need to figure out exactly how this
   2.397 +   interacts with other box-level fixup.</span> Additionally, if the <a
   2.398 +   href="#fragment-box"><i>fragment box</i></a> is also a multi-column box
   2.399 +   (as defined in <a href="#CSS3COL"
   2.400 +   rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> <span class=issue>though
   2.401 +   it defines <i>multi-column element</i></span>) any content that would lead
   2.402 +   to the creation of <i>overflow columns</i> <a href="#CSS3COL"
   2.403 +   rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> instead is flown into an
   2.404 +   additional fragment box. However, fragment boxes may themselves be broken
   2.405 +   (due to fragmentation in a fragmentation context outside of them, such as
   2.406 +   pages, columns, or other fragment boxes); such breaking leads to fragments
   2.407 +   of the same fragment box rather than multiple fragment boxes. (This
   2.408 +   matters because fragment boxes may be styled by their index; such breaking
   2.409 +   leads to multiple fragments of a fragment box with a single index. This
   2.410 +   design choice is so that breaking a fragment box across pages does not
   2.411 +   break the association of indices to particular pieces of content.) <span
   2.412 +   class=issue>Should a forced break that breaks to an outer fragmentation
   2.413 +   context cause a new fragment of a single fragment box or a new fragment
   2.414 +   box?</span> <span class=issue>Should we find a term other than <a
   2.415 +   href="#fragment-box"><i>fragment box</i></a> here to make this a little
   2.416 +   less confusing?</span>
   2.417 +
   2.418 +  <p class=issue> What if we want to be able to style the pieces of an
   2.419 +   element split within another type of fragmentation context? These rules
   2.420 +   prevent ever using ‘<code class=css>::nth-fragment()</code>’ for that,
   2.421 +   despite that the name seems the most logical name for such a feature.
   2.422 +
   2.423 +  <div class=example>
   2.424 +   <table class=source-demo-pair>
   2.425 +    <tbody>
   2.426 +     <tr>
   2.427 +      <td>
   2.428 +       <pre>&lt;!DOCTYPE HTML&gt;
   2.429 +&lt;title&gt;Breaking content into
   2.430 +  equal-sized cards&lt;/title&gt;
   2.431 +&lt;style&gt;
   2.432 +  .in-cards {
   2.433 +    overflow: fragments;
   2.434 +
   2.435 +    width: 13em;
   2.436 +    height: 8em;
   2.437 +
   2.438 +    padding: 4px;
   2.439 +    border: medium solid blue;
   2.440 +    margin: 6px;
   2.441 +
   2.442 +    font: medium/1.3 Times New
   2.443 +      Roman, Times, serif;
   2.444 +  }
   2.445 +&lt;/style&gt;
   2.446 +&lt;div class="in-cards"&gt;
   2.447 +  In this example, the text in the div
   2.448 +  is broken into a series of cards.
   2.449 +  These cards all have the same style.
   2.450 +  The presence of enough content to
   2.451 +  overflow one of the cards causes
   2.452 +  another one to be created.  The second
   2.453 +  card is created just like it's the
   2.454 +  next sibling of the first.
   2.455 +&lt;/div&gt;</pre>
   2.456 +
   2.457 +      <td>
   2.458 +       <div class=in-cards-demo>In this example, the text in the<br>
   2.459 +        div is broken into a series of<br>
   2.460 +        cards. These cards all have the<br>
   2.461 +        same style. The presence of<br>
   2.462 +        enough content to overflow<br>
   2.463 +        one of the cards causes another</div>
   2.464 +
   2.465 +       <div class=in-cards-demo>one to be created. The second<br>
   2.466 +        card is created just like it's the<br>
   2.467 +        next sibling of the first.</div>
   2.468 +   </table>
   2.469 +  </div>
   2.470 +
   2.471 +  <p class=issue> We should specify that ‘<code class=css>overflow:
   2.472 +   fragments</code>’ does not apply to at least some table parts, and
   2.473 +   perhaps other elements as well. We need to determine exactly which ones.
   2.474 +
   2.475 +  <p class=issue> This specification needs to say which type of fragmentation
   2.476 +   context is created so that it's clear which values of the ‘<code
   2.477 +   class=property>break</code>’ property cause breaks within this context.
   2.478 +   We probably want ‘<code class=css>break: regions</code>’ to apply.
   2.479 +
   2.480 +  <p class=issue> This specification needs a processing model that will apply
   2.481 +   in cases where the layout containing the fragments has characteristics
   2.482 +   that use the intrinsic size of the fragments to change the amount of space
   2.483 +   available for them, such as <a href="#CSS3-GRID-LAYOUT"
   2.484 +   rel=biblioentry>[CSS3-GRID-LAYOUT]<!--{{CSS3-GRID-LAYOUT}}--></a>. There
   2.485 +   has already been some work on such a processing model in <a
   2.486 +   href="#CSS3-REGIONS"
   2.487 +   rel=biblioentry>[CSS3-REGIONS]<!--{{CSS3-REGIONS}}--></a>, and the work
   2.488 +   done on a model there, and the editors of that specification, should
   2.489 +   inform what happens in this specification.
   2.490 +
   2.491 +  <h3 id=fragment-styling><span class=secno>4.1. </span>Fragment styling</h3>
   2.492 +
   2.493 +  <h4 id=fragment-pseudo-element><span class=secno>4.1.1. </span>The
   2.494 +   ::nth-fragment() pseudo-element</h4>
   2.495 +
   2.496 +  <p> The ::nth-fragment() pseudo-element is a pseudo-element that describes
   2.497 +   some of the <a href="#fragment-box"><i>fragment box</i></a>es generated by
   2.498 +   an element. The argument to the pseudo-element takes the same syntax as
   2.499 +   the argument to the :nth-child() pseudo-class defined in <a href="#SELECT"
   2.500 +   rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>, and has the same meaning
   2.501 +   except that the number is relative to <a href="#fragment-box"><i>fragment
   2.502 +   box</i></a>es generated by the element instead of siblings of the element.
   2.503 +   
   2.504 +
   2.505 +  <p class=note> Selectors that allow addressing fragments by counting from
   2.506 +   the end rather than the start are intentionally not provided. Such
   2.507 +   selectors would interfere with determining the number of fragments.
   2.508 +
   2.509 +  <p class=issue> Depending on future discussions, this ‘<code
   2.510 +   class=css>::nth-fragment(<var>an+b</var>)</code>’ syntax may be replaced
   2.511 +   with the new ‘<code class=css>::fragment:nth(<var>an+b</var>)</code>’
   2.512 +   syntax.
   2.513 +
   2.514 +  <h4 id=style-of-fragments><span class=secno>4.1.2. </span>Styling of
   2.515 +   fragments</h4>
   2.516 +
   2.517 +  <p class=issue> Should this apply to fragment overflow only, or also to
   2.518 +   paginated overflow? (If it applies, then stricter property restrictions
   2.519 +   would be needed for paginated overflow.)
   2.520 +
   2.521 +  <p> In the absence of rules with ‘<code
   2.522 +   class=css>::nth-fragment()</code>’ pseudo-elements, the computed style
   2.523 +   for each <a href="#fragment-box"><i>fragment box</i></a> is the computed
   2.524 +   style for the element for which the <a href="#fragment-box"><i>fragment
   2.525 +   box</i></a> was created. However, the style for a <a
   2.526 +   href="#fragment-box"><i>fragment box</i></a> is also influenced by rules
   2.527 +   whose selector's <i>subject</i> <a href="#SELECT"
   2.528 +   rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a> has an ‘<code
   2.529 +   class=css>::nth-fragment()</code>’ pseudo-element, if the 1-based number
   2.530 +   of the <a href="#fragment-box"><i>fragment box</i></a> matches that
   2.531 +   ‘<code class=css>::nth-fragment()</code>’ pseudo-element and the
   2.532 +   selector (excluding the ‘<code class=css>::nth-fragment()</code>’
   2.533 +   pseudo-element) matches the element generating the fragments.
   2.534 +
   2.535 +  <p> When determining the style of the <a href="#fragment-box"><i>fragment
   2.536 +   box</i></a>, these rules that match the fragment pseudo-element cascade
   2.537 +   together with the rules that match the element, with the fragment
   2.538 +   pseudo-element adding the specificity of a pseudo-class to the specificity
   2.539 +   calculation. <span class=issue>Does this need to be specified in the
   2.540 +   cascading module as well?</span>
   2.541 +
   2.542 +  <div class=example>
   2.543 +   <table class=source-demo-pair>
   2.544 +    <tbody>
   2.545 +     <tr>
   2.546 +      <td>
   2.547 +       <pre>&lt;!DOCTYPE HTML&gt;
   2.548 +&lt;style&gt;
   2.549 +  .bouncy-columns {
   2.550 +    overflow: fragments;
   2.551 +    width: 6em;
   2.552 +    height: 10em;
   2.553 +    float: left;
   2.554 +    margin: 1em;
   2.555 +    font: medium/1.25 Times New
   2.556 +      Roman, Times, serif;
   2.557 +  }
   2.558 +  .bouncy-columns::nth-fragment(1) {
   2.559 +    background: aqua; color: black;
   2.560 +    transform: rotate(-3deg);
   2.561 +  }
   2.562 +  .bouncy-columns::nth-fragment(2) {
   2.563 +    background: yellow; color: black;
   2.564 +    transform: rotate(3deg);
   2.565 +  }
   2.566 +&lt;/style&gt;
   2.567 +&lt;div class="bouncy-columns"&gt;
   2.568 +  <i>...</i>
   2.569 +&lt;/div&gt;</pre>
   2.570 +
   2.571 +      <td>
   2.572 +       <div class="bouncy-columns-demo one">In this<br>
   2.573 +        example, the<br>
   2.574 +        text in the div<br>
   2.575 +        is broken into<br>
   2.576 +        a series of<br>
   2.577 +        columns. The<br>
   2.578 +        author<br>
   2.579 +        probably</div>
   2.580 +
   2.581 +       <div class="bouncy-columns-demo two">intended the<br>
   2.582 +        text to fill two<br>
   2.583 +        columns. But<br>
   2.584 +        if it happens to<br>
   2.585 +        fill three<br>
   2.586 +        columns, the<br>
   2.587 +        third column is<br>
   2.588 +        still created. It</div>
   2.589 +
   2.590 +       <div class=bouncy-columns-demo>just doesn't<br>
   2.591 +        have any<br>
   2.592 +        fragment-specific<br>
   2.593 +        styling because<br>
   2.594 +        the author<br>
   2.595 +        didn't give it<br>
   2.596 +        any.</div>
   2.597 +   </table>
   2.598 +  </div>
   2.599 +
   2.600 +  <p> Styling an ‘<code class=css>::nth-fragment()</code>’ pseudo-element
   2.601 +   with the ‘<code class=property>overflow</code>’ property does take
   2.602 +   effect; if a <a href="#fragment-box"><i>fragment box</i></a> has a
   2.603 +   computed value of ‘<code class=property>overflow</code>’ other than
   2.604 +   ‘<code class=css>fragments</code>’ then that fragment box is the last
   2.605 +   fragment. However, overriding ‘<code class=css>overflow</code>’ on the
   2.606 +   first fragment does not cause the <a href="#fragment-box"><i>fragment
   2.607 +   box</i></a> not to exist; whether there are fragment boxes at all is
   2.608 +   determined by the computed value of overflow for the element.
   2.609 +
   2.610 +  <p> Styling an ‘<code class=css>::nth-fragment()</code>’ pseudo-element
   2.611 +   with the ‘<code class=property>content</code>’ property has no effect;
   2.612 +   the computed value of ‘<code class=property>content</code>’ for the
   2.613 +   fragment box remains the same as the computed value of content for the
   2.614 +   element.
   2.615 +
   2.616 +  <p> Specifying ‘<code class=css>display: none</code>’ for a <a
   2.617 +   href="#fragment-box"><i>fragment box</i></a> causes the fragment box with
   2.618 +   that index not to be generated. However, in terms of the indices used for
   2.619 +   matching ‘<code class=css>::nth-fragment()</code>’ pseudo-elements of
   2.620 +   later fragment boxes, it still counts as though it was generated. However,
   2.621 +   since it is not generated, it does not contain any content.
   2.622 +
   2.623 +  <p class=issue> Would it make more sense to forbid ‘<code
   2.624 +   class=css>display:none</code>’? Or perhaps to forbid ‘<code
   2.625 +   class=property>display</code>’, ‘<code
   2.626 +   class=property>position</code>’, ‘<code
   2.627 +   class=property>float</code>’, and similar (in addition to ‘<code
   2.628 +   class=property>overflow</code>’)?
   2.629 +
   2.630 +  <p> To match the model for other pseudo-elements where the pseudo-elements
   2.631 +   live inside their corresponding element, declarations in ‘<code
   2.632 +   class=css>::nth-fragment()</code>’ pseudo-elements override declarations
   2.633 +   in rules without the pseudo-element. The relative priority within such
   2.634 +   declarations is determined by normal cascading order (see <a href="#CSS21"
   2.635 +   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>).
   2.636 +
   2.637 +  <p> Styles specified on ‘<code class=css>::nth-fragment()</code>’
   2.638 +   pseudo-elements do affect inheritance to content within the <a
   2.639 +   href="#fragment-box"><i>fragment box</i></a>. In other words, the content
   2.640 +   within the <a href="#fragment-box"><i>fragment box</i></a> must inherit
   2.641 +   from the fragment box's style (i.e., the pseudo-element style) rather than
   2.642 +   directly from the element. This means that elements split between fragment
   2.643 +   boxes may have different styles for different parts of the element.
   2.644 +
   2.645 +  <p class=issue> This inheritance rule allows specifying styles indirectly
   2.646 +   (by using explicit ‘<code class=css>inherit</code>’ or using default
   2.647 +   inheritance on properties that don't apply to ‘<code
   2.648 +   class=css>:first-letter</code>’) that can't be specified directly (based
   2.649 +   on the rules in the next section). This is a problem. The restrictions
   2.650 +   that apply to styling inside fragments should also apply to inheritance
   2.651 +   from fragments.
   2.652 +
   2.653 +  <div class=example>
   2.654 +   <table class=source-demo-pair>
   2.655 +    <tbody>
   2.656 +     <tr>
   2.657 +      <td>
   2.658 +       <pre>&lt;!DOCTYPE HTML&gt;
   2.659 +&lt;style&gt;
   2.660 +  .article {
   2.661 +    overflow: fragments;
   2.662 +  }
   2.663 +  .article::nth-fragment(1) {
   2.664 +    font-size: 1.5em;
   2.665 +    margin-bottom: 1em;
   2.666 +    height: 4em;
   2.667 +  }
   2.668 +  .article::nth-fragment(2) {
   2.669 +    margin-left: 5em;
   2.670 +    margin-right: 2em;
   2.671 +  }
   2.672 +&lt;/style&gt;
   2.673 +&lt;div class="article"&gt;
   2.674 +  The &lt;code&gt;font-size&lt;/code&gt; property<i>...</i>
   2.675 +&lt;/div&gt;</pre>
   2.676 +
   2.677 +      <td>
   2.678 +       <div class="article-font-inherit-demo one">The <code>font-size</code>
   2.679 +        property<br>
   2.680 +        specified on the fragment<br>
   2.681 +        is inherited into the</div>
   2.682 +
   2.683 +       <div class="article-font-inherit-demo two">descendants of the
   2.684 +        fragment.<br>
   2.685 +        This means that inherited<br>
   2.686 +        properties can be used<br>
   2.687 +        reliably on a fragment, as in<br>
   2.688 +        this example.</div>
   2.689 +   </table>
   2.690 +  </div>
   2.691 +
   2.692 +  <h4 id=style-in-fragments><span class=secno>4.1.3. </span>Styling inside
   2.693 +   fragments</h4>
   2.694 +
   2.695 +  <p class=issue> Should this apply to fragment overflow only, or also to
   2.696 +   paginated overflow, or even to pagination across pages?
   2.697 +
   2.698 +  <p> The ‘<code class=css>::nth-fragment()</code>’ pseudo-element can
   2.699 +   also be used to style content inside of a <a
   2.700 +   href="#fragment-box"><i>fragment box</i></a>. Unlike the ‘<code
   2.701 +   class=css>::first-line</code>’ and ‘<code
   2.702 +   class=css>::first-letter</code>’ pseudo-elements, the ‘<code
   2.703 +   class=css>::nth-fragment()</code>’ pseudo-element can be applied to
   2.704 +   parts of the selector other than the subject: in particular, it can match
   2.705 +   ancestors of the subject. However, the only CSS properties applied by
   2.706 +   rules with such selectors are those that apply to the ‘<code
   2.707 +   class=css>::first-letter</code>’ pseudo-element.
   2.708 +
   2.709 +  <p> To be more precise, when a rule's selector has ‘<code
   2.710 +   class=css>::nth-fragment()</code>’ pseudo-elements attached to parts of
   2.711 +   the selector other than the subject, the declarations in that rule apply
   2.712 +   to a fragment (or pseudo-element thereof) when:
   2.713 +
   2.714 +  <ol>
   2.715 +   <li> the declarations are for properties that apply to the ‘<code
   2.716 +    class=css>::first-letter</code>’ pseudo-element,
   2.717 +
   2.718 +   <li> the declarations would apply to that fragment (or pseudo-element
   2.719 +    thereof) had those ‘<code class=css>::nth-fragment()</code>’
   2.720 +    pseudo-elements been removed, with a particular association between each
   2.721 +    sequence of simple selectors and the element it matched, and
   2.722 +
   2.723 +   <li> for each removed ‘<code class=css>::nth-fragment()</code>’
   2.724 +    pseudo-element, the fragment lives within a <a
   2.725 +    href="#fragment-box"><i>fragment box</i></a> of the element associated in
   2.726 +    that association with the selector that the pseudo-element was attached
   2.727 +    to, and whose index matches the pseudo-element.
   2.728 +  </ol>
   2.729 +
   2.730 +  <div class=example>
   2.731 +   <table class=source-demo-pair>
   2.732 +    <tbody>
   2.733 +     <tr>
   2.734 +      <td>
   2.735 +       <pre>&lt;!DOCTYPE HTML&gt;
   2.736 +&lt;style&gt;
   2.737 +  .dark-columns {
   2.738 +    overflow: fragments;
   2.739 +    width: 6em;
   2.740 +    height: 10em;
   2.741 +    float: left;
   2.742 +    margin-right: 1em;
   2.743 +    font: medium/1.25 Times New
   2.744 +      Roman, Times, serif;
   2.745 +  }
   2.746 +  .dark-columns::nth-fragment(1) {
   2.747 +    background: aqua; color: black;
   2.748 +  }
   2.749 +  .dark-columns::nth-fragment(1) :link {
   2.750 +    color: blue;
   2.751 +  }
   2.752 +  .dark-columns::nth-fragment(1) :visited {
   2.753 +    color: purple;
   2.754 +  }
   2.755 +  .dark-columns::nth-fragment(2) {
   2.756 +    background: navy; color: white;
   2.757 +  }
   2.758 +  .dark-columns::nth-fragment(2) :link {
   2.759 +    color: aqua;
   2.760 +  }
   2.761 +  .dark-columns::nth-fragment(2) :visited {
   2.762 +    color: fuchsia;
   2.763 +  }
   2.764 +&lt;/style&gt;
   2.765 +&lt;div class="dark-columns"&gt;
   2.766 +  <i>...</i>
   2.767 +&lt;/div&gt;</pre>
   2.768 +
   2.769 +      <td>
   2.770 +       <div class="dark-columns-demo one">In this<br>
   2.771 +        <a href="http://en.wiktionary.org/wiki/example">example</a>, the<br>
   2.772 +        text flows<br>
   2.773 +        from one<br>
   2.774 +        light-colored<br>
   2.775 +        fragment into<br>
   2.776 +        another<br>
   2.777 +        dark-colored</div>
   2.778 +
   2.779 +       <div class="dark-columns-demo two">fragment. We<br>
   2.780 +        therefore want<br>
   2.781 +        different styles<br>
   2.782 +        for <a
   2.783 +        href="http://www.w3.org/Provider/Style/IntoContext.html">hyperlinks</a><br>
   2.784 +        in the different<br>
   2.785 +        fragments.</div>
   2.786 +   </table>
   2.787 +  </div>
   2.788 +
   2.789 +  <h3 id=max-lines><span class=secno>4.2. </span>The ‘<a
   2.790 +   href="#max-lines0"><code class=property>max-lines</code></a>’ property</h3>
   2.791 +
   2.792 +  <p> Authors may wish to style the opening lines of an element with
   2.793 +   different styles by putting those opening lines in a separate fragment.
   2.794 +   However, since it may be difficult to predict the exact height occupied by
   2.795 +   those lines in order to restrict the first fragment to that height, this
   2.796 +   specification introduces a ‘<a href="#max-lines0"><code
   2.797 +   class=property>max-lines</code></a>’ property that forces a fragment to
   2.798 +   break after a specified number of lines. This forces a break after the
   2.799 +   given number of lines contained within the element or its descendants, as
   2.800 +   long as those lines are in the same block formatting context.
   2.801 +
   2.802 +  <table class=propdef>
   2.803 +   <tbody>
   2.804 +    <tr>
   2.805 +     <th>Name:
   2.806 +
   2.807 +     <td><dfn id=max-lines0>max-lines</dfn>
   2.808 +
   2.809 +    <tr>
   2.810 +     <th><a href="#values">Value</a>:
   2.811 +
   2.812 +     <td>none | &lt;integer&gt;
   2.813 +
   2.814 +    <tr>
   2.815 +     <th>Initial:
   2.816 +
   2.817 +     <td>none
   2.818 +
   2.819 +    <tr>
   2.820 +     <th>Applies to:
   2.821 +
   2.822 +     <td>fragment boxes
   2.823 +
   2.824 +    <tr>
   2.825 +     <th>Inherited:
   2.826 +
   2.827 +     <td>no
   2.828 +
   2.829 +    <tr>
   2.830 +     <th>Animatable:
   2.831 +
   2.832 +     <td>as <a
   2.833 +      href="http://www.w3.org/TR/css3-transitions/#animatable-types">integer</a>
   2.834 +      
   2.835 +
   2.836 +    <tr>
   2.837 +     <th>Percentages:
   2.838 +
   2.839 +     <td>N/A
   2.840 +
   2.841 +    <tr>
   2.842 +     <th>Media:
   2.843 +
   2.844 +     <td>visual
   2.845 +
   2.846 +    <tr>
   2.847 +     <th>Computed value:
   2.848 +
   2.849 +     <td>specified value
   2.850 +
   2.851 +    <tr>
   2.852 +     <th>Canonical order:
   2.853 +
   2.854 +     <td><abbr title="follows order of property value definition">per
   2.855 +      grammar</abbr>
   2.856 +  </table>
   2.857 +
   2.858 +  <dl>
   2.859 +   <dt>none
   2.860 +
   2.861 +   <dd>
   2.862 +    <p> Breaks occur only as specified elsewhere.</p>
   2.863 +
   2.864 +   <dt>&lt;integer&gt;
   2.865 +
   2.866 +   <dd>
   2.867 +    <p> In addition to any breaks specified elsewhere, a break is forced
   2.868 +     before any line that would exceed the given number of lines being placed
   2.869 +     inside the element (excluding lines that are in a different block
   2.870 +     formatting context from the block formatting context to which an
   2.871 +     unstyled child of the element would belong).</p>
   2.872 +
   2.873 +    <p class=issue> If there are multiple boundaries between this line and
   2.874 +     the previous, where exactly (in terms of element boundaries) is the
   2.875 +     break forced?</p>
   2.876 +
   2.877 +    <p> Only positive integers are accepted. Zero or negative integers are a
   2.878 +     parse error.</p>
   2.879 +  </dl>
   2.880 +
   2.881 +  <p class=issue>Should this apply to fragment overflow only, or also to
   2.882 +   pagination?
   2.883 +
   2.884 +  <div class=example>
   2.885 +   <table class=source-demo-pair>
   2.886 +    <tbody>
   2.887 +     <tr>
   2.888 +      <td>
   2.889 +       <pre>&lt;!DOCTYPE HTML&gt;
   2.890 +&lt;style&gt;
   2.891 +  .article {
   2.892 +    overflow: fragments;
   2.893 +  }
   2.894 +  .article::first-letter {
   2.895 +    font-size: 2em;
   2.896 +    line-height: 0.9;
   2.897 +  }
   2.898 +  .article::nth-fragment(1) {
   2.899 +    font-size: 1.5em;
   2.900 +    max-lines: 3;
   2.901 +  }
   2.902 +  .article::nth-fragment(2) {
   2.903 +    column-count: 2;
   2.904 +  }
   2.905 +&lt;/style&gt;
   2.906 +&lt;div class="article"&gt;
   2.907 +  <i>...</i>
   2.908 +&lt;/div&gt;</pre>
   2.909 +
   2.910 +      <td>
   2.911 +       <div class="article-max-lines-demo one">The max-lines property
   2.912 +        allows<br>
   2.913 +        authors to use a larger font for the first<br>
   2.914 +        few lines of an article. Without the</div>
   2.915 +
   2.916 +       <div class="article-max-lines-demo two">max-lines property,
   2.917 +        authors<br>
   2.918 +        might have to use the<br>
   2.919 +        ‘<code class=property>height</code>’ property instead, but<br>
   2.920 +        that would leave a slight gap<br>
   2.921 +        if the author miscalculated<br>
   2.922 +        how much height a given<br>
   2.923 +        number of lines would<br>
   2.924 +        occupy (which might be</div>
   2.925 +
   2.926 +       <div class="article-max-lines-demo three">particularly hard if the
   2.927 +        author<br>
   2.928 +        didn't know what text would<br>
   2.929 +        be filling the space, exactly<br>
   2.930 +        what font would be used, or<br>
   2.931 +        exactly which platform's font<br>
   2.932 +        rendering would be used to<br>
   2.933 +        display the font).</div>
   2.934 +   </table>
   2.935 +  </div>
   2.936 +
   2.937 +  <h2 id=static-media><span class=secno>5. </span>Overflow in static media</h2>
   2.938 +
   2.939 +  <p class=issue> This specification should define useful behavior for all
   2.940 +   values of ‘<code class=property>overflow</code>’ in static media (such
   2.941 +   as print). Current implementation behavior is quite poor and produces
   2.942 +   unexpected results when authors have not considered what will happen when
   2.943 +   the content they produce for interactive media is printed.
   2.944 +
   2.945 +  <h2 id=conformance><span class=secno>6. </span> Conformance</h2>
   2.946 +
   2.947 +  <h3 id=placement><span class=secno>6.1. </span> Module interactions</h3>
   2.948 +
   2.949 +  <p>This module extends the ‘<code class=property>overflow</code>’
   2.950 +   feature defined in <a href="#CSS21"
   2.951 +   rel=biblioentry>[CSS21]<!--{{CSS21}}--></a> section 11.1.1. It defines
   2.952 +   additional overflow handling mechanisms that implementations must
   2.953 +   implement as described in this module in order to conform to this module.
   2.954 +
   2.955 +  <p>No properties in this module apply to the <code>::first-line</code> or
   2.956 +   <code>::first-letter</code> pseudo-elements.
   2.957 +
   2.958 +  <h3 id=values><span class=secno>6.2. </span> Values</h3>
   2.959 +
   2.960 +  <p>This specification follows the <a
   2.961 +   href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
   2.962 +   definition conventions</a> from <a href="#CSS21"
   2.963 +   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in
   2.964 +   this specification are defined in CSS Level 2 Revision 1 <a
   2.965 +   href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS
   2.966 +   modules may expand the definitions of these value types: for example <a
   2.967 +   href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>,
   2.968 +   when combined with this module, expands the definition of the
   2.969 +   &lt;color&gt; value type as used in this specification.
   2.970 +
   2.971 +  <p>In addition to the property-specific values listed in their definitions,
   2.972 +   all properties defined in this specification also accept the <a
   2.973 +   href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
   2.974 +   keyword as their property value. For readability it has not been repeated
   2.975 +   explicitly.
   2.976 +
   2.977 +  <h3 id=conventions><span class=secno>6.3. </span> Document conventions</h3>
   2.978 +
   2.979 +  <p>Conformance requirements are expressed with a combination of descriptive
   2.980 +   assertions and RFC 2119 terminology. The key words “MUST”, “MUST
   2.981 +   NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
   2.982 +   “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
   2.983 +   normative parts of this document are to be interpreted as described in RFC
   2.984 +   2119. However, for readability, these words do not appear in all uppercase
   2.985 +   letters in this specification.
   2.986 +
   2.987 +  <p>All of the text of this specification is normative except sections
   2.988 +   explicitly marked as non-normative, examples, and notes. <a
   2.989 +   href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
   2.990 +
   2.991 +  <p>Examples in this specification are introduced with the words “for
   2.992 +   example” or are set apart from the normative text with
   2.993 +   <code>class="example"</code>, like this:
   2.994 +
   2.995 +  <div class=example>
   2.996 +   <p>This is an example of an informative example.</p>
   2.997 +  </div>
   2.998 +
   2.999 +  <p>Informative notes begin with the word “Note” and are set apart from
  2.1000 +   the normative text with <code>class="note"</code>, like this:
  2.1001 +
  2.1002 +  <p class=note>Note, this is an informative note.
  2.1003 +
  2.1004 +  <h3 id=conformance-classes><span class=secno>6.4. </span> Conformance
  2.1005 +   classes</h3>
  2.1006 +
  2.1007 +  <p>Conformance to CSS Overflow Module Level 3 is defined for three
  2.1008 +   conformance classes:
  2.1009 +
  2.1010 +  <dl>
  2.1011 +   <dt><dfn id=style-sheet title="style sheet!!as conformance class">style
  2.1012 +    sheet</dfn>
  2.1013 +
  2.1014 +   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
  2.1015 +    style sheet</a>.
  2.1016 +
  2.1017 +   <dt><dfn id=renderer>renderer</dfn>
  2.1018 +
  2.1019 +   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
  2.1020 +    that interprets the semantics of a style sheet and renders documents that
  2.1021 +    use them.
  2.1022 +
  2.1023 +   <dt><dfn id=authoring-tool>authoring tool</dfn>
  2.1024 +
  2.1025 +   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
  2.1026 +    that writes a style sheet.
  2.1027 +  </dl>
  2.1028 +
  2.1029 +  <p>A style sheet is conformant to CSS Overflow Module Level 3 if all of its
  2.1030 +   statements that use syntax defined in this module are valid according to
  2.1031 +   the generic CSS grammar and the individual grammars of each feature
  2.1032 +   defined in this module.
  2.1033 +
  2.1034 +  <p>A renderer is conformant to CSS Overflow Module Level 3 if, in addition
  2.1035 +   to interpreting the style sheet as defined by the appropriate
  2.1036 +   specifications, it supports all the features defined by CSS Overflow
  2.1037 +   Module Level 3 by parsing them correctly and rendering the document
  2.1038 +   accordingly. However, the inability of a UA to correctly render a document
  2.1039 +   due to limitations of the device does not make the UA non-conformant. (For
  2.1040 +   example, a UA is not required to render color on a monochrome monitor.)
  2.1041 +
  2.1042 +  <p>An authoring tool is conformant to CSS Overflow Module Level 3 if it
  2.1043 +   writes style sheets that are syntactically correct according to the
  2.1044 +   generic CSS grammar and the individual grammars of each feature in this
  2.1045 +   module, and meet all other conformance requirements of style sheets as
  2.1046 +   described in this module.
  2.1047 +
  2.1048 +  <h3 id=partial><span class=secno>6.5. </span> Partial implementations</h3>
  2.1049 +
  2.1050 +  <p>So that authors can exploit the forward-compatible parsing rules to
  2.1051 +   assign fallback values, CSS renderers <strong>must</strong> treat as
  2.1052 +   invalid (and <a
  2.1053 +   href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as
  2.1054 +   appropriate</a>) any at-rules, properties, property values, keywords, and
  2.1055 +   other syntactic constructs for which they have no usable level of support.
  2.1056 +   In particular, user agents <strong>must not</strong> selectively ignore
  2.1057 +   unsupported component values and honor supported values in a single
  2.1058 +   multi-value property declaration: if any value is considered invalid (as
  2.1059 +   unsupported values must be), CSS requires that the entire declaration be
  2.1060 +   ignored.
  2.1061 +
  2.1062 +  <h3 id=experimental><span class=secno>6.6. </span> Experimental
  2.1063 +   implementations</h3>
  2.1064 +
  2.1065 +  <p>To avoid clashes with future CSS features, the CSS2.1 specification
  2.1066 +   reserves a <a
  2.1067 +   href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
  2.1068 +   syntax</a> for proprietary and experimental extensions to CSS.
  2.1069 +
  2.1070 +  <p>Prior to a specification reaching the Candidate Recommendation stage in
  2.1071 +   the W3C process, all implementations of a CSS feature are considered
  2.1072 +   experimental. The CSS Working Group recommends that implementations use a
  2.1073 +   vendor-prefixed syntax for such features, including those in W3C Working
  2.1074 +   Drafts. This avoids incompatibilities with future changes in the draft.
  2.1075 +
  2.1076 +  <h3 id=testing><span class=secno>6.7. </span> Non-experimental
  2.1077 +   implementations</h3>
  2.1078 +
  2.1079 +  <p>Once a specification reaches the Candidate Recommendation stage,
  2.1080 +   non-experimental implementations are possible, and implementors should
  2.1081 +   release an unprefixed implementation of any CR-level feature they can
  2.1082 +   demonstrate to be correctly implemented according to spec.
  2.1083 +
  2.1084 +  <p>To establish and maintain the interoperability of CSS across
  2.1085 +   implementations, the CSS Working Group requests that non-experimental CSS
  2.1086 +   renderers submit an implementation report (and, if necessary, the
  2.1087 +   testcases used for that implementation report) to the W3C before releasing
  2.1088 +   an unprefixed implementation of any CSS features. Testcases submitted to
  2.1089 +   W3C are subject to review and correction by the CSS Working Group.
  2.1090 +
  2.1091 +  <p>Further information on submitting testcases and implementation reports
  2.1092 +   can be found from on the CSS Working Group's website at <a
  2.1093 +   href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
  2.1094 +   Questions should be directed to the <a
  2.1095 +   href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
  2.1096 +   mailing list.
  2.1097 +
  2.1098 +  <h3 id=cr-exit-criteria><span class=secno>6.8. </span> CR exit criteria</h3>
  2.1099 +
  2.1100 +  <p class=issue>[Change or remove the following CR exit criteria if the spec
  2.1101 +   is not a module, but, e.g., a Note or a profile. This text was <a
  2.1102 +   href="http://www.w3.org/Style/CSS/Tracker/actions/44"> decided on
  2.1103 +   2008-06-04.</a>]
  2.1104 +
  2.1105 +  <p> For this specification to be advanced to Proposed Recommendation, there
  2.1106 +   must be at least two independent, interoperable implementations of each
  2.1107 +   feature. Each feature may be implemented by a different set of products,
  2.1108 +   there is no requirement that all features be implemented by a single
  2.1109 +   product. For the purposes of this criterion, we define the following
  2.1110 +   terms:
  2.1111 +
  2.1112 +  <dl>
  2.1113 +   <dt>independent
  2.1114 +
  2.1115 +   <dd>each implementation must be developed by a different party and cannot
  2.1116 +    share, reuse, or derive from code used by another qualifying
  2.1117 +    implementation. Sections of code that have no bearing on the
  2.1118 +    implementation of this specification are exempt from this requirement.
  2.1119 +
  2.1120 +   <dt>interoperable
  2.1121 +
  2.1122 +   <dd>passing the respective test case(s) in the official CSS test suite,
  2.1123 +    or, if the implementation is not a Web browser, an equivalent test. Every
  2.1124 +    relevant test in the test suite should have an equivalent test created if
  2.1125 +    such a user agent (UA) is to be used to claim interoperability. In
  2.1126 +    addition if such a UA is to be used to claim interoperability, then there
  2.1127 +    must one or more additional UAs which can also pass those equivalent
  2.1128 +    tests in the same way for the purpose of interoperability. The equivalent
  2.1129 +    tests must be made publicly available for the purposes of peer review.
  2.1130 +
  2.1131 +   <dt>implementation
  2.1132 +
  2.1133 +   <dd>a user agent which:
  2.1134 +    <ol class=inline>
  2.1135 +     <li>implements the specification.
  2.1136 +
  2.1137 +     <li>is available to the general public. The implementation may be a
  2.1138 +      shipping product or other publicly available version (i.e., beta
  2.1139 +      version, preview release, or “nightly build”). Non-shipping product
  2.1140 +      releases must have implemented the feature(s) for a period of at least
  2.1141 +      one month in order to demonstrate stability.
  2.1142 +
  2.1143 +     <li>is not experimental (i.e., a version specifically designed to pass
  2.1144 +      the test suite and is not intended for normal usage going forward).
  2.1145 +    </ol>
  2.1146 +  </dl>
  2.1147 +
  2.1148 +  <p>The specification will remain Candidate Recommendation for at least six
  2.1149 +   months.
  2.1150 +
  2.1151 +  <h2 class=no-num id=acknowledgments> Acknowledgments</h2>
  2.1152 +
  2.1153 +  <p> Thanks especially to the feedback from Rossen Atanassov, Bert Bos,
  2.1154 +   Tantek Çelik, John Daggett, fantasai, Daniel Glazman, Vincent Hardy,
  2.1155 +   Håkon Wium Lie, Peter Linss, Florian Rivoal, Alan Stearns, Steve Zilles,
  2.1156 +   and all the rest of the <a
  2.1157 +   href="http://lists.w3.org/Archives/Public/www-style/">www-style</a>
  2.1158 +   community.
  2.1159 +
  2.1160 +  <h2 class=no-num id=references> References</h2>
  2.1161 +
  2.1162 +  <h3 class=no-num id=normative-references> Normative references</h3>
  2.1163 +  <!--begin-normative-->
  2.1164 +  <!-- Sorted by label -->
  2.1165 +
  2.1166 +  <dl class=bibliography>
  2.1167 +   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
  2.1168 +    <!---->
  2.1169 +
  2.1170 +   <dt id=CSS21>[CSS21]
  2.1171 +
  2.1172 +   <dd>Bert Bos; et al. <a
  2.1173 +    href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
  2.1174 +    Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
  2.1175 +    2011. W3C Recommendation. URL: <a
  2.1176 +    href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
  2.1177 +    </dd>
  2.1178 +   <!---->
  2.1179 +
  2.1180 +   <dt id=CSS3-BREAK>[CSS3-BREAK]
  2.1181 +
  2.1182 +   <dd>Rossen Atanassov; Elika J. Etemad. <a
  2.1183 +    href="http://www.w3.org/TR/2012/WD-css3-break-20120228/"><cite>CSS
  2.1184 +    Fragmentation Module Level 3.</cite></a> 28 February 2012. W3C Working
  2.1185 +    Draft. (Work in progress.) URL: <a
  2.1186 +    href="http://www.w3.org/TR/2012/WD-css3-break-20120228/">http://www.w3.org/TR/2012/WD-css3-break-20120228/</a>
  2.1187 +    </dd>
  2.1188 +   <!---->
  2.1189 +
  2.1190 +   <dt id=CSS3COL>[CSS3COL]
  2.1191 +
  2.1192 +   <dd>Håkon Wium Lie. <a
  2.1193 +    href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412"><cite>CSS
  2.1194 +    Multi-column Layout Module.</cite></a> 12 April 2011. W3C Candidate
  2.1195 +    Recommendation. (Work in progress.) URL: <a
  2.1196 +    href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412">http://www.w3.org/TR/2011/CR-css3-multicol-20110412</a>
  2.1197 +    </dd>
  2.1198 +   <!---->
  2.1199 +
  2.1200 +   <dt id=RFC2119>[RFC2119]
  2.1201 +
  2.1202 +   <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
  2.1203 +    words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
  2.1204 +    RFC 2119. URL: <a
  2.1205 +    href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
  2.1206 +    </dd>
  2.1207 +   <!---->
  2.1208 +
  2.1209 +   <dt id=SELECT>[SELECT]
  2.1210 +
  2.1211 +   <dd>Tantek Çelik; et al. <a
  2.1212 +    href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/"><cite>Selectors
  2.1213 +    Level 3.</cite></a> 29 September 2011. W3C Recommendation. URL: <a
  2.1214 +    href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/">http://www.w3.org/TR/2011/REC-css3-selectors-20110929/</a>
  2.1215 +    </dd>
  2.1216 +   <!---->
  2.1217 +  </dl>
  2.1218 +  <!--end-normative-->
  2.1219 +
  2.1220 +  <h3 class=no-num id=other-references> Other references</h3>
  2.1221 +  <!--begin-informative-->
  2.1222 +  <!-- Sorted by label -->
  2.1223 +
  2.1224 +  <dl class=bibliography>
  2.1225 +   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
  2.1226 +    <!---->
  2.1227 +
  2.1228 +   <dt id=CSS1>[CSS1]
  2.1229 +
  2.1230 +   <dd>Håkon Wium Lie; Bert Bos. <a
  2.1231 +    href="http://www.w3.org/TR/2008/REC-CSS1-20080411"><cite>Cascading Style
  2.1232 +    Sheets (CSS1) Level 1 Specification.</cite></a> 11 April 2008. W3C
  2.1233 +    Recommendation. URL: <a
  2.1234 +    href="http://www.w3.org/TR/2008/REC-CSS1-20080411">http://www.w3.org/TR/2008/REC-CSS1-20080411</a>
  2.1235 +    </dd>
  2.1236 +   <!---->
  2.1237 +
  2.1238 +   <dt id=CSS3-GRID-LAYOUT>[CSS3-GRID-LAYOUT]
  2.1239 +
  2.1240 +   <dd>Alex Mogilevsky; et al. <a
  2.1241 +    href="http://www.w3.org/TR/2012/WD-css3-grid-layout-20120322/"><cite>CSS
  2.1242 +    Grid Layout.</cite></a> 22 March 2012. W3C Working Draft. (Work in
  2.1243 +    progress.) URL: <a
  2.1244 +    href="http://www.w3.org/TR/2012/WD-css3-grid-layout-20120322/">http://www.w3.org/TR/2012/WD-css3-grid-layout-20120322/</a>
  2.1245 +    </dd>
  2.1246 +   <!---->
  2.1247 +
  2.1248 +   <dt id=CSS3-MARQUEE>[CSS3-MARQUEE]
  2.1249 +
  2.1250 +   <dd>Bert Bos. <a
  2.1251 +    href="http://www.w3.org/TR/2008/CR-css3-marquee-20081205"><cite>CSS
  2.1252 +    Marquee Module Level 3.</cite></a> 5 December 2008. W3C Candidate
  2.1253 +    Recommendation. (Work in progress.) URL: <a
  2.1254 +    href="http://www.w3.org/TR/2008/CR-css3-marquee-20081205">http://www.w3.org/TR/2008/CR-css3-marquee-20081205</a>
  2.1255 +    </dd>
  2.1256 +   <!---->
  2.1257 +
  2.1258 +   <dt id=CSS3-REGIONS>[CSS3-REGIONS]
  2.1259 +
  2.1260 +   <dd>Vincent Hardy; Alex Mogilevsky; Alan Stearns. <a
  2.1261 +    href="http://www.w3.org/TR/2012/WD-css3-regions-20120503/"><cite>CSS
  2.1262 +    Regions Module Level 3.</cite></a> 3 May 2012. W3C Working Draft. (Work
  2.1263 +    in progress.) URL: <a
  2.1264 +    href="http://www.w3.org/TR/2012/WD-css3-regions-20120503/">http://www.w3.org/TR/2012/WD-css3-regions-20120503/</a>
  2.1265 +    </dd>
  2.1266 +   <!---->
  2.1267 +
  2.1268 +   <dt id=CSS3BOX>[CSS3BOX]
  2.1269 +
  2.1270 +   <dd>Bert Bos. <a
  2.1271 +    href="http://www.w3.org/TR/2007/WD-css3-box-20070809"><cite>CSS basic box
  2.1272 +    model.</cite></a> 9 August 2007. W3C Working Draft. (Work in progress.)
  2.1273 +    URL: <a
  2.1274 +    href="http://www.w3.org/TR/2007/WD-css3-box-20070809">http://www.w3.org/TR/2007/WD-css3-box-20070809</a>
  2.1275 +    </dd>
  2.1276 +   <!---->
  2.1277 +
  2.1278 +   <dt id=CSS3COLOR>[CSS3COLOR]
  2.1279 +
  2.1280 +   <dd>Tantek Çelik; Chris Lilley; L. David Baron. <a
  2.1281 +    href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS Color
  2.1282 +    Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL: <a
  2.1283 +    href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a>
  2.1284 +    </dd>
  2.1285 +   <!---->
  2.1286 +
  2.1287 +   <dt id=CSS3GCPM>[CSS3GCPM]
  2.1288 +
  2.1289 +   <dd>Håkon Wium Lie. <a
  2.1290 +    href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608"><cite>CSS
  2.1291 +    Generated Content for Paged Media Module.</cite></a> 8 June 2010. W3C
  2.1292 +    Working Draft. (Work in progress.) URL: <a
  2.1293 +    href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608">http://www.w3.org/TR/2010/WD-css3-gcpm-20100608</a>
  2.1294 +    </dd>
  2.1295 +   <!---->
  2.1296 +  </dl>
  2.1297 +  <!--end-informative-->
  2.1298 +
  2.1299 +  <h2 class=no-num id=index> Index</h2>
  2.1300 +  <!--begin-index-->
  2.1301 +
  2.1302 +  <ul class=indexlist>
  2.1303 +   <li>authoring tool, <a href="#authoring-tool"
  2.1304 +    title="authoring tool"><strong>6.4.</strong></a>
  2.1305 +
  2.1306 +   <li>fragment box, <a href="#fragment-box"
  2.1307 +    title="fragment box"><strong>4.</strong></a>
  2.1308 +
  2.1309 +   <li>max-lines, <a href="#max-lines0"
  2.1310 +    title=max-lines><strong>4.2.</strong></a>
  2.1311 +
  2.1312 +   <li>renderer, <a href="#renderer" title=renderer><strong>6.4.</strong></a>
  2.1313 +    
  2.1314 +
  2.1315 +   <li>style sheet
  2.1316 +    <ul>
  2.1317 +     <li>as conformance class, <a href="#style-sheet"
  2.1318 +      title="style sheet, as conformance class"><strong>6.4.</strong></a>
  2.1319 +    </ul>
  2.1320 +  </ul>
  2.1321 +  <!--end-index-->
  2.1322 +
  2.1323 +  <h2 class=no-num id=property-index> Property index</h2>
  2.1324 +  <!--begin-properties-->
  2.1325 +
  2.1326 +  <table class=proptable>
  2.1327 +   <thead>
  2.1328 +    <tr>
  2.1329 +     <th>Property
  2.1330 +
  2.1331 +     <th>Values
  2.1332 +
  2.1333 +     <th>Initial
  2.1334 +
  2.1335 +     <th>Applies to
  2.1336 +
  2.1337 +     <th>Inh.
  2.1338 +
  2.1339 +     <th>Percentages
  2.1340 +
  2.1341 +     <th>Media
  2.1342 +
  2.1343 +   <tbody>
  2.1344 +    <tr>
  2.1345 +     <th><a class=property href="#max-lines0">max-lines</a>
  2.1346 +
  2.1347 +     <td>none | &lt;integer&gt;
  2.1348 +
  2.1349 +     <td>none
  2.1350 +
  2.1351 +     <td>fragment boxes
  2.1352 +
  2.1353 +     <td>no
  2.1354 +
  2.1355 +     <td>N/A
  2.1356 +
  2.1357 +     <td>visual
  2.1358 +  </table>
  2.1359 +  <!--end-properties-->
  2.1360 +</html>
  2.1361 +<!-- Keep this comment at the end of the file
  2.1362 +Local variables:
  2.1363 +mode: sgml
  2.1364 +sgml-declaration:"~/SGML/HTML4.decl"
  2.1365 +sgml-default-doctype-name:"html"
  2.1366 +sgml-minimize-attributes:t
  2.1367 +sgml-nofill-elements:("pre" "style" "br")
  2.1368 +sgml-live-element-indicator:t
  2.1369 +sgml-omittag:nil
  2.1370 +sgml-shorttag:nil
  2.1371 +sgml-namecase-general:t
  2.1372 +sgml-general-insert-case:lower
  2.1373 +sgml-always-quote-attributes:t
  2.1374 +sgml-indent-step:nil
  2.1375 +sgml-indent-data:t
  2.1376 +sgml-parent-document:nil
  2.1377 +sgml-exposed-tags:nil
  2.1378 +sgml-local-catalogs:nil
  2.1379 +sgml-local-ecat-files:nil
  2.1380 +End:
  2.1381 +-->
     3.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     3.2 +++ b/css3-overflow/Overview.src.html	Fri Aug 17 23:51:31 2012 +0200
     3.3 @@ -0,0 +1,1045 @@
     3.4 +<!DOCTYPE html>
     3.5 +<html lang="en">
     3.6 +<head>
     3.7 +  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     3.8 +  <title>CSS Overflow Module Level 3</title>
     3.9 +  <link rel=contents href="#contents">
    3.10 +  <link rel=index href="#index">
    3.11 +  <link rel="stylesheet" type="text/css" href="../default.css">
    3.12 +  <link rel="stylesheet" type="text/css"
    3.13 +        href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css">
    3.14 +	<style>
    3.15 +		table.source-demo-pair {
    3.16 +			width: 100%;
    3.17 +		}
    3.18 +
    3.19 +		.in-cards-demo {
    3.20 +			width: 13em;
    3.21 +			height: 8em;
    3.22 +
    3.23 +			padding: 4px;
    3.24 +			border: medium solid blue;
    3.25 +			margin: 6px;
    3.26 +
    3.27 +			font: medium/1.3 Times New Roman, Times, serif;
    3.28 +			white-space: nowrap;
    3.29 +		}
    3.30 +
    3.31 +		.bouncy-columns-demo {
    3.32 +			width: 6em;
    3.33 +			height: 10em;
    3.34 +			float: left;
    3.35 +			margin: 1em;
    3.36 +			font: medium/1.25 Times New Roman, Times, serif;
    3.37 +			white-space: nowrap;
    3.38 +		}
    3.39 +		.bouncy-columns-demo.one {
    3.40 +			background: aqua; color: black;
    3.41 +			transform: rotate(-3deg);
    3.42 +		}
    3.43 +		.bouncy-columns-demo.two {
    3.44 +			background: yellow; color: black;
    3.45 +			transform: rotate(3deg);
    3.46 +		}
    3.47 +
    3.48 +		.article-font-inherit-demo {
    3.49 +			font: 1em/1.25 Times New Roman, Times, serif;
    3.50 +			white-space: nowrap;
    3.51 +		}
    3.52 +		.article-font-inherit-demo.one {
    3.53 +			width: 12em;
    3.54 +			font-size: 1.5em;
    3.55 +			margin-bottom: 1em;
    3.56 +			height: 4em;
    3.57 +		}
    3.58 +		.article-font-inherit-demo.two {
    3.59 +			width: 11em;
    3.60 +			margin-left: 5em;
    3.61 +			margin-right: 2em;
    3.62 +		}
    3.63 +
    3.64 +		.dark-columns-demo {
    3.65 +			width: 6em;
    3.66 +			height: 10em;
    3.67 +			float: left;
    3.68 +			margin-right: 1em;
    3.69 +			font: medium/1.25 Times New Roman, Times, serif;
    3.70 +			white-space: nowrap;
    3.71 +		}
    3.72 +		.dark-columns-demo.one {
    3.73 +			background: aqua; color: black;
    3.74 +		}
    3.75 +		.dark-columns-demo.one :link {
    3.76 +			color: blue;
    3.77 +		}
    3.78 +		.dark-columns-demo.one :visited {
    3.79 +			color: purple;
    3.80 +		}
    3.81 +		.dark-columns-demo.two {
    3.82 +			background: navy; color: white;
    3.83 +		}
    3.84 +		.dark-columns-demo.two :link {
    3.85 +			color: aqua;
    3.86 +		}
    3.87 +		.dark-columns-demo.two :visited {
    3.88 +			color: fuchsia;
    3.89 +		}
    3.90 +
    3.91 +		.article-max-lines-demo {
    3.92 +			font: 1em/1.25 Times New Roman, Times, serif;
    3.93 +			white-space: nowrap;
    3.94 +		}
    3.95 +		.article-max-lines-demo.one::first-letter {
    3.96 +			font-size: 2em;
    3.97 +			line-height: 0.9;
    3.98 +		}
    3.99 +		.article-max-lines-demo.one {
   3.100 +			font-size: 1.5em;
   3.101 +			width: 16em;
   3.102 +		}
   3.103 +		.article-max-lines-demo.two {
   3.104 +			width: 11.5em;
   3.105 +			float: left; margin-right: 1em;
   3.106 +		}
   3.107 +		.article-max-lines-demo.three {
   3.108 +			width: 11.5em;
   3.109 +			float: left;
   3.110 +		}
   3.111 +	</style>
   3.112 +</head>
   3.113 +
   3.114 +<div class="head">
   3.115 +<!--logo-->
   3.116 +
   3.117 +<h1>CSS Overflow Module Level 3</h1>
   3.118 +
   3.119 +<h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
   3.120 +<dl>
   3.121 +  <dt>This version:
   3.122 +    <dd><a href="[VERSION]">http://www.w3.org/TR/[YEAR]/ED-css3-overflow-[CDATE]/</a>
   3.123 +
   3.124 +  <dt>Latest version:
   3.125 +    <dd><a href="http://www.w3.org/TR/[SHORTNAME]/">http://www.w3.org/TR/[SHORTNAME]/</a>
   3.126 +
   3.127 +  <dt>Editor's draft:
   3.128 +    <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a>
   3.129 +
   3.130 +<!--
   3.131 +  <dt>Previous version:
   3.132 +    <dd><a href="http://www.w3.org/PreviousVersionURI">
   3.133 +    http://www.w3.org/PreviousVersionURI</a>
   3.134 +-->
   3.135 +
   3.136 +  <dt>Issue Tracking:</dt>
   3.137 +    <dd>Maintained in document (only editor's draft is current)
   3.138 +
   3.139 +  <dt>Feedback:</dt>
   3.140 +    <dd><a href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> with subject line &ldquo;<kbd>[[SHORTNAME]] <var>&hellip; message topic &hellip;</var></kbd>&rdquo;
   3.141 +
   3.142 +  <dt>Editors:
   3.143 +    <dd class="h-card vcard">
   3.144 +      <a class="p-name fn u-url url" rel="author"
   3.145 +         href="http://dbaron.org/">L. David Baron</a>,
   3.146 +      <a class="p-org org" href="http://www.mozilla.org/">Mozilla</a>
   3.147 +</dl>
   3.148 +
   3.149 +<!--copyright-->
   3.150 +
   3.151 +<hr title="Separator for header">
   3.152 +</div>
   3.153 +
   3.154 +<h2 class="no-num no-toc" id="abstract">Abstract</h2>
   3.155 +
   3.156 +	<p>
   3.157 +		<a href="http://www.w3.org/TR/CSS/">CSS</a> is
   3.158 +		a language for describing
   3.159 +		the rendering of structured documents (such as HTML and XML)
   3.160 +		on screen, on paper, in speech, etc.
   3.161 +		This module contains the features of CSS
   3.162 +		relating to new mechanisms of overflow handling in visual media (e.g., screen or paper).
   3.163 +		In interactive media,
   3.164 +		it describes features that allow the overflow
   3.165 +		from a fixed size container
   3.166 +		to be handled by pagination (displaying one page at a time).
   3.167 +		It also describes features, applying to all visual media,
   3.168 +		that allow the contents of an element
   3.169 +		to be spread across multiple fragments,
   3.170 +		allowing the contents to flow across multiple regions
   3.171 +		or to have different styles for different fragments.
   3.172 +	</p>
   3.173 +
   3.174 +<h2 class="no-num no-toc" id="status">Status of this document</h2>
   3.175 +
   3.176 +<!--status-->
   3.177 +
   3.178 +<p>The following features are at risk: &hellip;
   3.179 +
   3.180 +<h2 class="no-num no-toc" id="contents">
   3.181 +Table of contents</h2>
   3.182 +
   3.183 +<!--toc-->
   3.184 +
   3.185 +<h2 id="intro">
   3.186 +Introduction</h2>
   3.187 +
   3.188 +	<p>
   3.189 +		In CSS Level 1 [[CSS1]], placing more content than would fit
   3.190 +		inside an element with a specified size
   3.191 +		was generally an authoring error.
   3.192 +		Doing so caused the content to extend
   3.193 +		outside the bounds of the element,
   3.194 +		which would likely cause
   3.195 +		that content to overlap with other elements.
   3.196 +	</p>
   3.197 +
   3.198 +	<p>
   3.199 +		CSS Level 2 [[CSS21]] introduced the 'overflow' property,
   3.200 +		which allows authors to have overflow be handled by scrolling,
   3.201 +		which means it is no longer an authoring error.
   3.202 +		It also allows authors to specify
   3.203 +		that overflow is handled by clipping,
   3.204 +		which makes sense when the author's intent
   3.205 +		is that the content not be shown.
   3.206 +	</p>
   3.207 +
   3.208 +	<p>
   3.209 +		However, scrolling is not the only way
   3.210 +		to present large amounts of content,
   3.211 +		and may even not be the optimal way.
   3.212 +		After all, the codex replaced the scroll
   3.213 +		as the common format for large written works
   3.214 +		because of its advantages.
   3.215 +	</p>
   3.216 +
   3.217 +	<p>
   3.218 +		This specification introduces
   3.219 +		a mechanism for Web pages to specify
   3.220 +		that an element of a page should handle overflow
   3.221 +		through pagination rather than through scrolling.
   3.222 +	</p>
   3.223 +
   3.224 +	<p>
   3.225 +		This specification also extends the concept of overflow
   3.226 +		in another direction.
   3.227 +		Instead of requiring that authors specify a single area
   3.228 +		into which the content of an element must flow,
   3.229 +		this specification allows authors to specify multiple fragments,
   3.230 +		each with their own dimensions and styles,
   3.231 +		so that the content of the element can flow from one to the next,
   3.232 +		using as many as needed to place the content without overflowing.
   3.233 +	</p>
   3.234 +
   3.235 +	<p>
   3.236 +		In both of these cases, implementations must
   3.237 +		break the content in the block-progression dimension.
   3.238 +		Implementations must do this is described
   3.239 +		in the CSS Fragmentation Module [[!CSS3-BREAK]].
   3.240 +	</p>
   3.241 +
   3.242 +<h2 id="scrolling-overflow">Scrolling and hidden overflow</h2>
   3.243 +
   3.244 +	<p class="issue">
   3.245 +		Move material from [[CSS21]] and [[CSS3BOX]] here.
   3.246 +	</p>
   3.247 +
   3.248 +<h2 id="paginated-overflow">Paginated overflow</h2>
   3.249 +
   3.250 +<p class="issue">overflow:paginate or overflow:pages (or paged-x, paged-y, paged-x-controls, paged-y-controls as [[CSS3GCPM]] has?)</p>
   3.251 +
   3.252 +<p class="issue">Ability to display N pages at once
   3.253 +rather than just one page at once?</p>
   3.254 +
   3.255 +	<p class="issue">
   3.256 +		The current implementation of paginated overflow uses
   3.257 +		the 'overflow'/'overflow-x'/'overflow-y' properties
   3.258 +		rather than the 'overflow-style' property as proposed
   3.259 +		in the [[CSS3GCPM]] draft
   3.260 +		(which also matches the [[CSS3-MARQUEE]] proposal).
   3.261 +		We should probably switch away from 'overflow-style',
   3.262 +		but that's not 100% clear.
   3.263 +	</p>
   3.264 +
   3.265 +<h2 id="fragment-overflow">Fragment overflow</h2>
   3.266 +
   3.267 +	<p>
   3.268 +		This section introduces and defines the meaning of
   3.269 +		the new ''fragments'' value of the 'overflow' property.
   3.270 +	</p>
   3.271 +
   3.272 +	<p>
   3.273 +		When the computed value of 'overflow' for an element is ''fragments'',
   3.274 +		and implementations would otherwise have created a box for the element,
   3.275 +		then implementations must create a sequence of <dfn>fragment box</dfn>es
   3.276 +		for that element.
   3.277 +		(It is possible for an element with ''overflow: fragments''
   3.278 +		to generate only one <i>fragment box</i>.
   3.279 +		However, if an element's computed 'overflow' is not ''fragments'',
   3.280 +		then its box is not a <i>fragment box</i>.)
   3.281 +		Every <i>fragment box</i> is a fragmentation container,
   3.282 +		and any overflow
   3.283 +		that would cause that fragmentation container to fragment
   3.284 +		causes another <i>fragment box</i> created as a next sibling
   3.285 +		of the previous one.
   3.286 +		<span class="issue">Or is it as though it's a next sibling of
   3.287 +		the element?  Need to figure out exactly how this interacts with
   3.288 +		other box-level fixup.</span>
   3.289 +		Additionally, if the <i>fragment box</i> is also
   3.290 +		a multi-column box (as defined in [[!CSS3COL]]
   3.291 +		<span class="issue">though it defines <i>multi-column element</i></span>)
   3.292 +		any content that would lead to the creation of <i>overflow columns</i> [[!CSS3COL]]
   3.293 +		instead is flown into an additional fragment box.
   3.294 +		However, fragment boxes may themselves be broken
   3.295 +		(due to fragmentation in a fragmentation context outside of them,
   3.296 +		such as pages, columns, or other fragment boxes);
   3.297 +		such breaking leads to fragments of the same fragment box
   3.298 +		rather than multiple fragment boxes.
   3.299 +		(This matters because fragment boxes may be styled by their index;
   3.300 +		such breaking leads to multiple fragments of a fragment box
   3.301 +		with a single index.
   3.302 +		This design choice is so that
   3.303 +		breaking a fragment box across pages does not break
   3.304 +		the association of indices to particular pieces of content.)
   3.305 +		<span class="issue">Should a forced break that breaks to
   3.306 +		an outer fragmentation context cause a new fragment of a single
   3.307 +		fragment box or a new fragment box?</span>
   3.308 +		<span class="issue">Should we find a term other than
   3.309 +		<i>fragment box</i> here to make this a little less confusing?</span>
   3.310 +	</p>
   3.311 +
   3.312 +	<p class="issue">
   3.313 +		What if we want to be able to style the pieces of an element
   3.314 +		split within another type of fragmentation context?
   3.315 +		These rules prevent ever using ''::nth-fragment()'' for that,
   3.316 +		despite that the name seems the most logical name for such a feature.
   3.317 +	</p>
   3.318 +
   3.319 +	<div class="example">
   3.320 +		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
   3.321 +&lt;title&gt;Breaking content into
   3.322 +  equal-sized cards&lt;/title&gt;
   3.323 +&lt;style&gt;
   3.324 +  .in-cards {
   3.325 +    overflow: fragments;
   3.326 +
   3.327 +    width: 13em;
   3.328 +    height: 8em;
   3.329 +
   3.330 +    padding: 4px;
   3.331 +    border: medium solid blue;
   3.332 +    margin: 6px;
   3.333 +
   3.334 +    font: medium/1.3 Times New
   3.335 +      Roman, Times, serif;
   3.336 +  }
   3.337 +&lt;/style&gt;
   3.338 +&lt;div class="in-cards"&gt;
   3.339 +  In this example, the text in the div
   3.340 +  is broken into a series of cards.
   3.341 +  These cards all have the same style.
   3.342 +  The presence of enough content to
   3.343 +  overflow one of the cards causes
   3.344 +  another one to be created.  The second
   3.345 +  card is created just like it's the
   3.346 +  next sibling of the first.
   3.347 +&lt;/div&gt;</pre></td><td>
   3.348 +			<div class="in-cards-demo">In this example, the text in the<br>div is broken into a series of<br>cards.  These cards all have the<br>same style. The presence of<br>enough content to overflow<br>one of the cards causes another</div>
   3.349 +			<div class="in-cards-demo">one to be created.  The second<br>card is created just like it's the<br>next sibling of the first.</div>
   3.350 +		</td></tr></table>
   3.351 +	</div>
   3.352 +
   3.353 +	<p class="issue">
   3.354 +		We should specify that ''overflow: fragments'' does not apply
   3.355 +		to at least some table parts,
   3.356 +		and perhaps other elements as well.
   3.357 +		We need to determine exactly which ones.
   3.358 +	</p>
   3.359 +
   3.360 +	<p class="issue">
   3.361 +		This specification needs to say which type of
   3.362 +		fragmentation context is created
   3.363 +		so that it's clear which values of the 'break' property
   3.364 +		cause breaks within this context.
   3.365 +		We probably want ''break: regions'' to apply.
   3.366 +	</p>
   3.367 +
   3.368 +	<p class="issue">
   3.369 +		This specification needs a processing model
   3.370 +		that will apply in cases where the layout containing the
   3.371 +		fragments has characteristics that use the intrinsic size of the fragments
   3.372 +		to change the amount of space available for them,
   3.373 +		such as [[CSS3-GRID-LAYOUT]].
   3.374 +		There has already been some work on such a processing model
   3.375 +		in [[CSS3-REGIONS]],
   3.376 +		and the work done on a model there,
   3.377 +		and the editors of that specification,
   3.378 +		should inform what happens in this specification.
   3.379 +	</p>
   3.380 +
   3.381 +<h3 id="fragment-styling">Fragment styling</h3>
   3.382 +
   3.383 +<h4 id="fragment-pseudo-element">The ::nth-fragment() pseudo-element</h4>
   3.384 +
   3.385 +	<p>
   3.386 +		The ::nth-fragment() pseudo-element is a pseudo-element
   3.387 +		that describes some of the <i>fragment box</i>es generated by an element.
   3.388 +		The argument to the pseudo-element takes the same syntax
   3.389 +		as the argument to the :nth-child() pseudo-class
   3.390 +		defined in [[!SELECT]], and has the same meaning
   3.391 +		except that the number is relative to
   3.392 +		<i>fragment box</i>es generated by the element
   3.393 +		instead of siblings of the element.
   3.394 +	</p>
   3.395 +
   3.396 +	<p class="note">
   3.397 +		Selectors that allow addressing fragments
   3.398 +		by counting from the end rather than the start
   3.399 +		are intentionally not provided.
   3.400 +		Such selectors would interfere with determining
   3.401 +		the number of fragments.
   3.402 +	</p>
   3.403 +
   3.404 +	<p class="issue">
   3.405 +		Depending on future discussions,
   3.406 +		this ''::nth-fragment(<var>an+b</var>)'' syntax
   3.407 +		may be replaced with
   3.408 +		the new ''::fragment:nth(<var>an+b</var>)'' syntax.
   3.409 +	</p>
   3.410 +
   3.411 +<h4 id="style-of-fragments">Styling of fragments</h4>
   3.412 +
   3.413 +	<p class="issue">
   3.414 +		Should this apply to fragment overflow only,
   3.415 +		or also to paginated overflow?
   3.416 +		(If it applies,
   3.417 +		then stricter property restrictions would be needed
   3.418 +		for paginated overflow.)
   3.419 +	</p>
   3.420 +
   3.421 +	<p>
   3.422 +		In the absence of rules with ''::nth-fragment()'' pseudo-elements,
   3.423 +		the computed style for each <i>fragment box</i>
   3.424 +		is the computed style for the element
   3.425 +		for which the <i>fragment box</i> was created.
   3.426 +		However, the style for a <i>fragment box</i> is also influenced
   3.427 +		by rules whose selector's <i>subject</i> [[!SELECT]]
   3.428 +		has an ''::nth-fragment()'' pseudo-element,
   3.429 +		if the 1-based number of the <i>fragment box</i> matches
   3.430 +		that ''::nth-fragment()'' pseudo-element
   3.431 +		and the selector (excluding the ''::nth-fragment()'' pseudo-element)
   3.432 +		matches the element generating the fragments.
   3.433 +	</p>
   3.434 +
   3.435 +	<p>
   3.436 +		When determining the style of the <i>fragment box</i>,
   3.437 +		these rules that match the fragment pseudo-element
   3.438 +		cascade together with the rules that match the element,
   3.439 +		with the fragment pseudo-element adding the specificity
   3.440 +		of a pseudo-class to the specificity calculation.
   3.441 +		<span class="issue">Does this need to be specified in
   3.442 +		the cascading module as well?</span>
   3.443 +	</p>
   3.444 +
   3.445 +	<div class="example">
   3.446 +		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
   3.447 +&lt;style&gt;
   3.448 +  .bouncy-columns {
   3.449 +    overflow: fragments;
   3.450 +    width: 6em;
   3.451 +    height: 10em;
   3.452 +    float: left;
   3.453 +    margin: 1em;
   3.454 +    font: medium/1.25 Times New
   3.455 +      Roman, Times, serif;
   3.456 +  }
   3.457 +  .bouncy-columns::nth-fragment(1) {
   3.458 +    background: aqua; color: black;
   3.459 +    transform: rotate(-3deg);
   3.460 +  }
   3.461 +  .bouncy-columns::nth-fragment(2) {
   3.462 +    background: yellow; color: black;
   3.463 +    transform: rotate(3deg);
   3.464 +  }
   3.465 +&lt;/style&gt;
   3.466 +&lt;div class="bouncy-columns"&gt;
   3.467 +  <i>...</i>
   3.468 +&lt;/div&gt;</pre></td><td>
   3.469 +			<div class="bouncy-columns-demo one">In this<br>example, the<br>text in the div<br>is broken into<br>a series of<br>columns.  The<br>author<br>probably</div>
   3.470 +			<div class="bouncy-columns-demo two">intended the<br>text to fill two<br>columns.  But<br>if it happens to<br>fill three<br>columns, the<br>third column is<br>still created.  It</div>
   3.471 +			<div class="bouncy-columns-demo">just doesn't<br>have any<br>fragment-specific<br>styling because<br>the author<br>didn't give it<br>any.</div>
   3.472 +		</td></tr></table>
   3.473 +	</div>
   3.474 +
   3.475 +	<p>
   3.476 +		Styling an ''::nth-fragment()'' pseudo-element with the 'overflow'
   3.477 +		property does take effect;
   3.478 +		if a <i>fragment box</i> has a
   3.479 +		computed value of 'overflow' other than ''fragments''
   3.480 +		then that fragment box is the last fragment.
   3.481 +		However, overriding ''overflow'' on the first fragment
   3.482 +		does not cause the <i>fragment box</i> not to exist;
   3.483 +		whether there are fragment boxes at all is determined by
   3.484 +		the computed value of overflow for the element.
   3.485 +	</p>
   3.486 +
   3.487 +	<p>
   3.488 +		Styling an ''::nth-fragment()'' pseudo-element with the 'content'
   3.489 +		property has no effect;
   3.490 +		the computed value of 'content' for the fragment box
   3.491 +		remains the same as the computed value of content for the element.
   3.492 +	</p>
   3.493 +
   3.494 +	<p>
   3.495 +		Specifying ''display: none'' for a <i>fragment box</i> causes
   3.496 +		the fragment box with that index not to be generated.
   3.497 +		However, in terms of the indices
   3.498 +		used for matching ''::nth-fragment()'' pseudo-elements
   3.499 +		of later fragment boxes,
   3.500 +		it still counts as though it was generated.
   3.501 +		However, since it is not generated, it does not contain any content.
   3.502 +	</p>
   3.503 +
   3.504 +	<p class="issue">
   3.505 +		Would it make more sense to forbid ''display:none''?
   3.506 +		Or perhaps to forbid 'display', 'position', 'float',
   3.507 +		and similar (in addition to 'overflow')?
   3.508 +	</p>
   3.509 +
   3.510 +	<p>
   3.511 +		To match the model for other pseudo-elements
   3.512 +		where the pseudo-elements live inside their corresponding element,
   3.513 +		declarations in ''::nth-fragment()'' pseudo-elements override
   3.514 +		declarations in rules without the pseudo-element.
   3.515 +		The relative priority within such declarations is determined
   3.516 +		by normal cascading order (see [[!CSS21]]).
   3.517 +	</p>
   3.518 +
   3.519 +	<p>
   3.520 +		Styles specified on ''::nth-fragment()'' pseudo-elements
   3.521 +		do affect inheritance to content within the <i>fragment box</i>.
   3.522 +		In other words, the content within the <i>fragment box</i> must
   3.523 +		inherit from the fragment box's style (i.e., the pseudo-element style)
   3.524 +		rather than directly from the element.
   3.525 +		This means that elements split between fragment boxes may
   3.526 +		have different styles for different parts of the element.
   3.527 +	</p>
   3.528 +
   3.529 +	<p class="issue">
   3.530 +		This inheritance rule allows specifying styles indirectly
   3.531 +		(by using explicit ''inherit'' or using default inheritance
   3.532 +		on properties that don't apply to '':first-letter'')
   3.533 +		that can't be specified directly
   3.534 +		(based on the rules in the next section).
   3.535 +		This is a problem.
   3.536 +		The restrictions that apply to styling inside fragments
   3.537 +		should also apply to inheritance from fragments.
   3.538 +	</p>
   3.539 +
   3.540 +	<div class="example">
   3.541 +		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
   3.542 +&lt;style&gt;
   3.543 +  .article {
   3.544 +    overflow: fragments;
   3.545 +  }
   3.546 +  .article::nth-fragment(1) {
   3.547 +    font-size: 1.5em;
   3.548 +    margin-bottom: 1em;
   3.549 +    height: 4em;
   3.550 +  }
   3.551 +  .article::nth-fragment(2) {
   3.552 +    margin-left: 5em;
   3.553 +    margin-right: 2em;
   3.554 +  }
   3.555 +&lt;/style&gt;
   3.556 +&lt;div class="article"&gt;
   3.557 +  The &lt;code&gt;font-size&lt;/code&gt; property<i>...</i>
   3.558 +&lt;/div&gt;</pre></td><td>
   3.559 +			<div class="article-font-inherit-demo one">The <code>font-size</code> property<br>specified on the fragment<br>is inherited into the</div>
   3.560 +			<div class="article-font-inherit-demo two">descendants of the fragment.<br>This means that inherited<br>properties can be used<br>reliably on a fragment, as in<br>this example.</div>
   3.561 +		</td></tr></table>
   3.562 +	</div>
   3.563 +
   3.564 +<h4 id="style-in-fragments">Styling inside fragments</h4>
   3.565 +
   3.566 +	<p class="issue">
   3.567 +		Should this apply to fragment overflow only,
   3.568 +		or also to paginated overflow,
   3.569 +		or even to pagination across pages?
   3.570 +	</p>
   3.571 +
   3.572 +	<p>
   3.573 +		The ''::nth-fragment()'' pseudo-element
   3.574 +		can also be used to style
   3.575 +		content inside of a <i>fragment box</i>.
   3.576 +		Unlike the ''::first-line'' and ''::first-letter'' pseudo-elements,
   3.577 +		the ''::nth-fragment()'' pseudo-element can be applied
   3.578 +		to parts of the selector other than the subject:
   3.579 +		in particular, it can match ancestors of the subject.
   3.580 +		However, the only CSS properties applied
   3.581 +		by rules with such selectors
   3.582 +		are those that apply
   3.583 +		to the ''::first-letter'' pseudo-element.
   3.584 +	</p>
   3.585 +
   3.586 +	<p>
   3.587 +		To be more precise,
   3.588 +		when a rule's selector has ''::nth-fragment()'' pseudo-elements
   3.589 +		attached to parts of the selector other than the subject,
   3.590 +		the declarations in that rule apply to
   3.591 +		a fragment (or pseudo-element thereof) when:
   3.592 +	</p>
   3.593 +	<ol>
   3.594 +		<li>
   3.595 +			the declarations are for properties that apply to the
   3.596 +			''::first-letter'' pseudo-element,
   3.597 +		</li>
   3.598 +		<li>
   3.599 +			the declarations would apply to
   3.600 +			that fragment (or pseudo-element thereof)
   3.601 +			had those ''::nth-fragment()'' pseudo-elements been removed,
   3.602 +			with a particular association between
   3.603 +			each sequence of simple selectors and the element it matched,
   3.604 +			and
   3.605 +		</li>
   3.606 +		<li>
   3.607 +			for each removed ''::nth-fragment()'' pseudo-element,
   3.608 +			the fragment lives within a <i>fragment box</i>
   3.609 +			of the element associated in that association
   3.610 +			with the selector that the pseudo-element was attached to,
   3.611 +			and whose index matches the pseudo-element.
   3.612 +		</li>
   3.613 +	</ol>
   3.614 +
   3.615 +	<div class="example">
   3.616 +		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
   3.617 +&lt;style&gt;
   3.618 +  .dark-columns {
   3.619 +    overflow: fragments;
   3.620 +    width: 6em;
   3.621 +    height: 10em;
   3.622 +    float: left;
   3.623 +    margin-right: 1em;
   3.624 +    font: medium/1.25 Times New
   3.625 +      Roman, Times, serif;
   3.626 +  }
   3.627 +  .dark-columns::nth-fragment(1) {
   3.628 +    background: aqua; color: black;
   3.629 +  }
   3.630 +  .dark-columns::nth-fragment(1) :link {
   3.631 +    color: blue;
   3.632 +  }
   3.633 +  .dark-columns::nth-fragment(1) :visited {
   3.634 +    color: purple;
   3.635 +  }
   3.636 +  .dark-columns::nth-fragment(2) {
   3.637 +    background: navy; color: white;
   3.638 +  }
   3.639 +  .dark-columns::nth-fragment(2) :link {
   3.640 +    color: aqua;
   3.641 +  }
   3.642 +  .dark-columns::nth-fragment(2) :visited {
   3.643 +    color: fuchsia;
   3.644 +  }
   3.645 +&lt;/style&gt;
   3.646 +&lt;div class="dark-columns"&gt;
   3.647 +  <i>...</i>
   3.648 +&lt;/div&gt;</pre></td><td>
   3.649 +			<div class="dark-columns-demo one">In this<br><a href="http://en.wiktionary.org/wiki/example">example</a>, the<br>text flows<br>from one<br>light-colored<br>fragment into<br>another<br>dark-colored</div>
   3.650 +			<div class="dark-columns-demo two">fragment.  We<br>therefore want<br>different styles<br>for <a href="http://www.w3.org/Provider/Style/IntoContext.html">hyperlinks</a><br>in the different<br>fragments.</div>
   3.651 +		</td></tr></table>
   3.652 +	</div>
   3.653 +
   3.654 +
   3.655 +<h3 id="max-lines">The 'max-lines' property</h3>
   3.656 +
   3.657 +	<p>
   3.658 +		Authors may wish to style the opening lines of an element
   3.659 +		with different styles
   3.660 +		by putting those opening lines in a separate fragment.
   3.661 +		However, since it may be difficult to predict the exact height
   3.662 +		occupied by those lines
   3.663 +		in order to restrict the first fragment to that height,
   3.664 +		this specification introduces a 'max-lines' property
   3.665 +		that forces a fragment to break
   3.666 +		after a specified number of lines.
   3.667 +		This forces a break after the given number of lines
   3.668 +		contained within the element or its descendants,
   3.669 +		as long as those lines are in the same block formatting context.
   3.670 +	</p>
   3.671 +
   3.672 +	<table class=propdef>
   3.673 +		<tr>
   3.674 +			<th>Name:
   3.675 +			<td><dfn>max-lines</dfn>
   3.676 +		<tr>
   3.677 +			<th><a href="#values">Value</a>:
   3.678 +			<td>none | &lt;integer&gt;
   3.679 +		<tr>
   3.680 +			<th>Initial:
   3.681 +			<td>none
   3.682 +		<tr>
   3.683 +			<th>Applies to:
   3.684 +			<td>fragment boxes
   3.685 +		<tr>
   3.686 +			<th>Inherited:
   3.687 +			<td>no
   3.688 +		<tr>
   3.689 +			<th>Animatable:
   3.690 +			<td>as <a href="http://www.w3.org/TR/css3-transitions/#animatable-types">integer</a>
   3.691 +		<tr>
   3.692 +			<th>Percentages:
   3.693 +			<td>N/A
   3.694 +		<tr>
   3.695 +			<th>Media:
   3.696 +			<td>visual
   3.697 +		<tr>
   3.698 +			<th>Computed&nbsp;value:
   3.699 +			<td>specified value
   3.700 +		<tr>
   3.701 +			<th>Canonical order:
   3.702 +			<td><abbr title="follows order of property value definition">per grammar</abbr>
   3.703 +	</table>
   3.704 +
   3.705 +	<dl>
   3.706 +		<dt>none
   3.707 +		<dd>
   3.708 +			<p>
   3.709 +				Breaks occur only as specified elsewhere.
   3.710 +			</p>
   3.711 +		</dd>
   3.712 +
   3.713 +		<dt>&lt;integer&gt;
   3.714 +		<dd>
   3.715 +			<p>
   3.716 +				In addition to any breaks specified elsewhere,
   3.717 +				a break is forced before any line that would exceed
   3.718 +				the given number of lines
   3.719 +				being placed inside the element
   3.720 +				(excluding lines that are in
   3.721 +				a different block formatting context from
   3.722 +				the block formatting context to which
   3.723 +				an unstyled child of the element would belong).
   3.724 +			</p>
   3.725 +
   3.726 +			<p class="issue">
   3.727 +				If there are multiple boundaries between this line
   3.728 +				and the previous, where exactly (in terms of element
   3.729 +				boundaries) is the break forced?
   3.730 +			</p>
   3.731 +
   3.732 +			<p>
   3.733 +				Only positive integers are accepted.
   3.734 +				Zero or negative integers are a parse error.
   3.735 +			</p>
   3.736 +		</dd>
   3.737 +	</dl>
   3.738 +
   3.739 +<p class="issue">Should this apply to fragment overflow only, or also
   3.740 +to pagination?</p>
   3.741 +
   3.742 +	<div class="example">
   3.743 +		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
   3.744 +&lt;style&gt;
   3.745 +  .article {
   3.746 +    overflow: fragments;
   3.747 +  }
   3.748 +  .article::first-letter {
   3.749 +    font-size: 2em;
   3.750 +    line-height: 0.9;
   3.751 +  }
   3.752 +  .article::nth-fragment(1) {
   3.753 +    font-size: 1.5em;
   3.754 +    max-lines: 3;
   3.755 +  }
   3.756 +  .article::nth-fragment(2) {
   3.757 +    column-count: 2;
   3.758 +  }
   3.759 +&lt;/style&gt;
   3.760 +&lt;div class="article"&gt;
   3.761 +  <i>...</i>
   3.762 +&lt;/div&gt;</pre></td><td>
   3.763 +			<div class="article-max-lines-demo one">The max-lines property allows<br>authors to use a larger font for the first<br>few lines of an article.  Without the</div>
   3.764 +			<div class="article-max-lines-demo two">max-lines property, authors<br>might have to use the<br>'height' property instead, but<br>that would leave a slight gap<br>if the author miscalculated<br>how much height a given<br>number of lines would<br>occupy (which might be</div>
   3.765 +			<div class="article-max-lines-demo three">particularly hard if the author<br>didn't know what text would<br>be filling the space, exactly<br>what font would be used, or<br>exactly which platform's font<br>rendering would be used to<br>display the font).</div>
   3.766 +		</td></tr></table>
   3.767 +	</div>
   3.768 +
   3.769 +<h2 id="static-media">Overflow in static media</h2>
   3.770 +
   3.771 +	<p class="issue">
   3.772 +		This specification should define useful behavior
   3.773 +		for all values of 'overflow'
   3.774 +		in static media (such as print).
   3.775 +		Current implementation behavior is quite poor and
   3.776 +		produces unexpected results when authors have not considered
   3.777 +		what will happen when
   3.778 +		the content they produce for interactive media
   3.779 +		is printed.
   3.780 +	</p>
   3.781 +
   3.782 +<h2 id="conformance">
   3.783 +Conformance</h2>
   3.784 +
   3.785 +<h3 id="placement">
   3.786 +Module interactions</h3>
   3.787 +
   3.788 +  <p>This module extends the 'overflow'
   3.789 +  feature defined in [[CSS21]] section 11.1.1.  It defines additional
   3.790 +  overflow handling mechanisms that implementations must implement as
   3.791 +  described in this module in order to conform to this module.</p>
   3.792 +
   3.793 +  <p>No properties in this module apply to the <code>::first-line</code> or
   3.794 +  <code>::first-letter</code> pseudo-elements.</p>
   3.795 +
   3.796 +<h3 id="values">
   3.797 +Values</h3>
   3.798 +
   3.799 +  <p>This specification follows the
   3.800 +  <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
   3.801 +  definition conventions</a> from [[!CSS21]]. Value types not defined in
   3.802 +  this specification are defined in CSS Level 2 Revision 1 [[!CSS21]].
   3.803 +  Other CSS modules may expand the definitions of these value types: for
   3.804 +  example [[CSS3COLOR]], when combined with this module, expands the
   3.805 +  definition of the &lt;color&gt; value type as used in this specification.</p>
   3.806 +  
   3.807 +  <p>In addition to the property-specific values listed in their definitions,
   3.808 +  all properties defined in this specification also accept the
   3.809 +  <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
   3.810 +  keyword as their property value. For readability it has not been repeated
   3.811 +  explicitly.
   3.812 +
   3.813 +
   3.814 +<h3 id="conventions">
   3.815 +Document conventions</h3>
   3.816 +
   3.817 +  <p>Conformance requirements are expressed with a combination of
   3.818 +  descriptive assertions and RFC 2119 terminology. The key words “MUST”,
   3.819 +  “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
   3.820 +  “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
   3.821 +  document are to be interpreted as described in RFC 2119.
   3.822 +  However, for readability, these words do not appear in all uppercase
   3.823 +  letters in this specification.
   3.824 +  
   3.825 +  <p>All of the text of this specification is normative except sections
   3.826 +  explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p>
   3.827 +  
   3.828 +  <p>Examples in this specification are introduced with the words “for example”
   3.829 +  or are set apart from the normative text with <code>class="example"</code>,
   3.830 +  like this:
   3.831 +  
   3.832 +  <div class="example">
   3.833 +    <p>This is an example of an informative example.</p>
   3.834 +  </div>
   3.835 +  
   3.836 +  <p>Informative notes begin with the word “Note” and are set apart from the
   3.837 +  normative text with <code>class="note"</code>, like this:
   3.838 +  
   3.839 +  <p class="note">Note, this is an informative note.</p>
   3.840 +
   3.841 +<h3 id="conformance-classes">
   3.842 +Conformance classes</h3>
   3.843 +
   3.844 +  <p>Conformance to CSS Overflow Module Level 3
   3.845 +  is defined for three conformance classes:
   3.846 +  <dl>
   3.847 +    <dt><dfn title="style sheet!!as conformance class">style sheet</dfn>
   3.848 +      <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
   3.849 +      style sheet</a>.
   3.850 +    <dt><dfn>renderer</dfn></dt>
   3.851 +      <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
   3.852 +      that interprets the semantics of a style sheet and renders
   3.853 +      documents that use them.
   3.854 +    <dt><dfn id="authoring-tool">authoring tool</dfn></dt>
   3.855 +      <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
   3.856 +      that writes a style sheet.
   3.857 +  </dl>
   3.858 +  
   3.859 +  <p>A style sheet is conformant to CSS Overflow Module Level 3
   3.860 +  if all of its statements that use syntax defined in this module are valid
   3.861 +  according to the generic CSS grammar and the individual grammars of each
   3.862 +  feature defined in this module.
   3.863 +  
   3.864 +  <p>A renderer is conformant to CSS Overflow Module Level 3
   3.865 +  if, in addition to interpreting the style sheet as defined by the
   3.866 +  appropriate specifications, it supports all the features defined
   3.867 +  by CSS Overflow Module Level 3 by parsing them correctly
   3.868 +  and rendering the document accordingly. However, the inability of a
   3.869 +  UA to correctly render a document due to limitations of the device
   3.870 +  does not make the UA non-conformant. (For example, a UA is not
   3.871 +  required to render color on a monochrome monitor.)
   3.872 +  
   3.873 +  <p>An authoring tool is conformant to CSS Overflow Module Level 3
   3.874 +  if it writes style sheets that are syntactically correct according to the
   3.875 +  generic CSS grammar and the individual grammars of each feature in
   3.876 +  this module, and meet all other conformance requirements of style sheets
   3.877 +  as described in this module.
   3.878 +
   3.879 +<h3 id="partial">
   3.880 +Partial implementations</h3>
   3.881 +
   3.882 +  <p>So that authors can exploit the forward-compatible parsing rules to
   3.883 +  assign fallback values, CSS renderers <strong>must</strong>
   3.884 +  treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore
   3.885 +  as appropriate</a>) any at-rules, properties, property values, keywords,
   3.886 +  and other syntactic constructs for which they have no usable level of
   3.887 +  support. In particular, user agents <strong>must not</strong> selectively
   3.888 +  ignore unsupported component values and honor supported values in a single
   3.889 +  multi-value property declaration: if any value is considered invalid
   3.890 +  (as unsupported values must be), CSS requires that the entire declaration
   3.891 +  be ignored.</p>
   3.892 +  
   3.893 +<h3 id="experimental">
   3.894 +Experimental implementations</h3>
   3.895 +
   3.896 +  <p>To avoid clashes with future CSS features, the CSS2.1 specification
   3.897 +  reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
   3.898 +  syntax</a> for proprietary and experimental extensions to CSS.
   3.899 +  
   3.900 +  <p>Prior to a specification reaching the Candidate Recommendation stage
   3.901 +  in the W3C process, all implementations of a CSS feature are considered
   3.902 +  experimental. The CSS Working Group recommends that implementations
   3.903 +  use a vendor-prefixed syntax for such features, including those in
   3.904 +  W3C Working Drafts. This avoids incompatibilities with future changes
   3.905 +  in the draft.
   3.906 +  </p>
   3.907 + 
   3.908 +<h3 id="testing">
   3.909 +Non-experimental implementations</h3>
   3.910 +
   3.911 +  <p>Once a specification reaches the Candidate Recommendation stage,
   3.912 +  non-experimental implementations are possible, and implementors should
   3.913 +  release an unprefixed implementation of any CR-level feature they
   3.914 +  can demonstrate to be correctly implemented according to spec.
   3.915 +  
   3.916 +  <p>To establish and maintain the interoperability of CSS across
   3.917 +  implementations, the CSS Working Group requests that non-experimental
   3.918 +  CSS renderers submit an implementation report (and, if necessary, the
   3.919 +  testcases used for that implementation report) to the W3C before
   3.920 +  releasing an unprefixed implementation of any CSS features. Testcases
   3.921 +  submitted to W3C are subject to review and correction by the CSS
   3.922 +  Working Group.
   3.923 +  
   3.924 +  <p>Further information on submitting testcases and implementation reports
   3.925 +  can be found from on the CSS Working Group's website at
   3.926 +  <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
   3.927 +  Questions should be directed to the
   3.928 +  <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
   3.929 +  mailing list.
   3.930 +
   3.931 +<h3 id="cr-exit-criteria">
   3.932 +CR exit criteria</h3>
   3.933 +
   3.934 +  <p class=issue>[Change or remove the following CR exit criteria if
   3.935 +  the spec is not a module, but, e.g., a Note or a profile. This text was <a
   3.936 +  href="http://www.w3.org/Style/CSS/Tracker/actions/44"> decided on 2008-06-04.</a>]</p>
   3.937 +
   3.938 +  <p>
   3.939 +  For this specification to be advanced to Proposed Recommendation,
   3.940 +  there must be at least two independent, interoperable implementations
   3.941 +  of each feature. Each feature may be implemented by a different set of
   3.942 +  products, there is no requirement that all features be implemented by
   3.943 +  a single product. For the purposes of this criterion, we define the
   3.944 +  following terms:
   3.945 +  
   3.946 +  <dl>
   3.947 +    <dt>independent <dd>each implementation must be developed by a
   3.948 +    different party and cannot share, reuse, or derive from code
   3.949 +    used by another qualifying implementation. Sections of code that
   3.950 +    have no bearing on the implementation of this specification are
   3.951 +    exempt from this requirement.
   3.952 +  
   3.953 +    <dt>interoperable <dd>passing the respective test case(s) in the
   3.954 +    official CSS test suite, or, if the implementation is not a Web
   3.955 +    browser, an equivalent test. Every relevant test in the test
   3.956 +    suite should have an equivalent test created if such a user
   3.957 +    agent (UA) is to be used to claim interoperability. In addition
   3.958 +    if such a UA is to be used to claim interoperability, then there
   3.959 +    must one or more additional UAs which can also pass those
   3.960 +    equivalent tests in the same way for the purpose of
   3.961 +    interoperability. The equivalent tests must be made publicly
   3.962 +    available for the purposes of peer review.
   3.963 +  
   3.964 +    <dt>implementation <dd>a user agent which:
   3.965 +  
   3.966 +    <ol class=inline>
   3.967 +      <li>implements the specification.
   3.968 +  
   3.969 +      <li>is available to the general public. The implementation may
   3.970 +      be a shipping product or other publicly available version
   3.971 +      (i.e., beta version, preview release, or “nightly build”). 
   3.972 +      Non-shipping product releases must have implemented the
   3.973 +      feature(s) for a period of at least one month in order to
   3.974 +      demonstrate stability.
   3.975 +  
   3.976 +      <li>is not experimental (i.e., a version specifically designed
   3.977 +      to pass the test suite and is not intended for normal usage
   3.978 +      going forward).
   3.979 +    </ol>
   3.980 +  </dl>
   3.981 +  
   3.982 +  <p>The specification will remain Candidate Recommendation for at least
   3.983 +  six months.
   3.984 +
   3.985 +<h2 class=no-num id="acknowledgments">
   3.986 +Acknowledgments</h2>
   3.987 +
   3.988 +	<p>
   3.989 +		Thanks especially to the feedback from
   3.990 +		Rossen Atanassov,
   3.991 +		Bert Bos,
   3.992 +		Tantek Çelik,
   3.993 +		John Daggett,
   3.994 +		fantasai,
   3.995 +		Daniel Glazman,
   3.996 +		Vincent Hardy,
   3.997 +		H&aring;kon Wium Lie,
   3.998 +		Peter Linss,
   3.999 +		Florian Rivoal,
  3.1000 +		Alan Stearns,
  3.1001 +		Steve Zilles,
  3.1002 +		and all the rest of the
  3.1003 +		<a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community.
  3.1004 +	</p>
  3.1005 +
  3.1006 +<h2 class=no-num id="references">
  3.1007 +References</h2>
  3.1008 +
  3.1009 +<h3 class="no-num" id="normative-references">
  3.1010 +Normative references</h3>
  3.1011 +<!--normative-->
  3.1012 +
  3.1013 +<h3 class="no-num" id="other-references">
  3.1014 +Other references</h3>
  3.1015 +<!--informative-->
  3.1016 +
  3.1017 +<h2 class="no-num" id="index">
  3.1018 +Index</h2>
  3.1019 +<!--index-->
  3.1020 +
  3.1021 +<h2 class="no-num" id="property-index">
  3.1022 +Property index</h2>
  3.1023 +<!-- properties -->
  3.1024 +
  3.1025 +</body>
  3.1026 +</html>
  3.1027 +<!-- Keep this comment at the end of the file
  3.1028 +Local variables:
  3.1029 +mode: sgml
  3.1030 +sgml-declaration:"~/SGML/HTML4.decl"
  3.1031 +sgml-default-doctype-name:"html"
  3.1032 +sgml-minimize-attributes:t
  3.1033 +sgml-nofill-elements:("pre" "style" "br")
  3.1034 +sgml-live-element-indicator:t
  3.1035 +sgml-omittag:nil
  3.1036 +sgml-shorttag:nil
  3.1037 +sgml-namecase-general:t
  3.1038 +sgml-general-insert-case:lower
  3.1039 +sgml-always-quote-attributes:t
  3.1040 +sgml-indent-step:nil
  3.1041 +sgml-indent-data:t
  3.1042 +sgml-parent-document:nil
  3.1043 +sgml-exposed-tags:nil
  3.1044 +sgml-local-catalogs:nil
  3.1045 +sgml-local-ecat-files:nil
  3.1046 +End:
  3.1047 +-->
  3.1048 + 
     4.1 --- a/css3-regions/Overview.html	Fri Aug 17 23:46:15 2012 +0200
     4.2 +++ b/css3-regions/Overview.html	Fri Aug 17 23:51:31 2012 +0200
     4.3 @@ -38,13 +38,13 @@
     4.4  
     4.5     <h1 id=css-regions-module>CSS Regions Module Level 3</h1>
     4.6  
     4.7 -   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 11 August 2012</h2>
     4.8 +   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 16 August 2012</h2>
     4.9  
    4.10     <dl>
    4.11      <dt>This version:
    4.12  
    4.13      <dd><a
    4.14 -     href="http://www.w3.org/TR/2012/ED-css3-regions-20120811/">http://www.w3.org/csswg/css3-regions</a>
    4.15 +     href="http://www.w3.org/TR/2012/ED-css3-regions-20120816/">http://www.w3.org/csswg/css3-regions</a>
    4.16  
    4.17      <dt>Latest version:
    4.18  
    4.19 @@ -1763,7 +1763,7 @@
    4.20     href="#dom-named-flow"><code class=idl>NamedFlow</code></a> object
    4.21     representation of a <a href="#named-flow0">named flow</a>.
    4.22  
    4.23 -  <p>An additional method and an additional attribute on the <a
    4.24 +  <p>An additional method on the <a
    4.25     href="http://www.w3.org/TR/dom/#interface-document"><code
    4.26     class=idl>Document</code></a> interface provide access to <a
    4.27     href="#named-flow0">named flows</a>.
    4.28 @@ -1771,19 +1771,19 @@
    4.29    <pre class=idl>
    4.30  partial interface <a
    4.31     href="http://www.w3.org/TR/dom/#interface-document">Document</a> {
    4.32 -  readonly attribute <a
    4.33 +  <a
    4.34     href="#dom-named-flow-collection">NamedFlowCollection</a> <a
    4.35 -   href="#document-namedflows">namedFlows</a>;
    4.36 +   href="#document-getnamedflows">getNamedFlows()</a>;
    4.37  };               
    4.38  </pre>
    4.39  
    4.40 -  <p>The <dfn id=document-namedflows><code class=idl>namedFlows</code></dfn>
    4.41 -   attribute on the <a
    4.42 +  <p>The <dfn id=document-getnamedflows><code
    4.43 +   class=idl>getNamedFlows()</code></dfn> method on the <a
    4.44     href="http://www.w3.org/TR/dom/#interface-document"><code
    4.45 -   class=idl>Document</code></a> interface returns the live list of all the
    4.46 -   current <a href="#named-flow0">named flows</a> in the document.
    4.47 -
    4.48 -  <p>The <a href="#document-namedflows"><code class=idl>namedFlows</code></a>
    4.49 +   class=idl>Document</code></a> interface returns a static snapshot of all
    4.50 +   the current <a href="#named-flow0">named flows</a> in the document.
    4.51 +
    4.52 +  <p>The <a href="#dom-named-flow"><code class=idl>namedFlows</code></a>
    4.53     collection must include all <a href="#named-flow0">named flows</a> that
    4.54     are currently in the <code>CREATED</code> state. The list must not include
    4.55     <a href="#named-flow0">named flows</a> that are in the <code>NULL</code>
    4.56 @@ -1800,8 +1800,7 @@
    4.57    <p>The <dfn id=dom-named-flow-collection><code
    4.58     class=idl>NamedFlowCollection</code></dfn> interface provides a list of
    4.59     current <a href="#dom-named-flow"><code class=idl>NamedFlow</code></a>
    4.60 -   instances in the document. The collection is live and methods operate on
    4.61 -   the underlying data, not a snapshot of the data.
    4.62 +   instances in the document. The collection is a snapshot of the data.
    4.63  
    4.64    <pre class=idl>
    4.65  interface NamedFlowCollection {
    4.66 @@ -2036,7 +2035,9 @@
    4.67      chain, that means the <a href="#named-flow0">named flow</a> content is
    4.68      further fitted in subsequent regions. In this last case, note that the <a
    4.69      href="#named-flow0">named flow</a> fragment may be empty (for example if
    4.70 -    the region is too small to accommodate any content).
    4.71 +    the region is too small to accommodate any content). This value is
    4.72 +    returned if the <a href="#css-region">region</a> object is not (or no
    4.73 +    longer) a region.
    4.74  
    4.75     <dt>‘<code class=property>empty</code>’
    4.76  
    4.77 @@ -2092,7 +2093,8 @@
    4.78     fragmented across region boundaries, the <a
    4.79     href="http://dev.w3.org/csswg/cssom/#cssstyledeclaration">CSSStyleDeclaration</a>
    4.80     returned must apply only to the fragment that flows through the <span>CSS
    4.81 -   Region</span>.
    4.82 +   Region</span>. The method returns null if the <a
    4.83 +   href="#css-region">region</a> object is not (or no longer) a region.
    4.84  
    4.85    <div class=note>
    4.86     <p>If the element is not contained in the <span>CSS Region</span> at all,
    4.87 @@ -2110,14 +2112,7 @@
    4.88     class=property>flow-from</code></a>’ property on the corresponding
    4.89     pseudo-element, element or other construct becomes ‘<code
    4.90     class=property>none</code>’ but a script is still holding a reference to
    4.91 -   the <a href="#css-region"><code class=idl>Region</code></a> object. If a
    4.92 -   <a href="#css-region"><code class=idl>Region</code></a> instance is no
    4.93 -   longer a <a href="#css-region">region</a>, accessing its attributes or
    4.94 -   invoking its methods throws a <a
    4.95 -   href="http://www.w3.org/TR/dom/#exception-domexception"><code
    4.96 -   class=idl>DOMException</code></a> with the <a
    4.97 -   href="http://www.w3.org/TR/dom/#dom-domexception-invalid_access_err"><code
    4.98 -   class=idl>INVALID_ACCESS_ERR</code></a> error code.
    4.99 +   the <a href="#css-region"><code class=idl>Region</code></a> object.
   4.100  
   4.101    <h3 id=region-style-rule-interface><span class=secno>6.3. </span>The
   4.102     CSSRegionStyleRule interface</h3>
   4.103 @@ -2818,6 +2813,10 @@
   4.104     3<sup>rd</sup> 2012</a> version</h3>
   4.105  
   4.106    <ul>
   4.107 +   <li>Removed exceptions from the Region interface
   4.108 +
   4.109 +   <li>Changed NamedFlowCollection from live to a static snapshot
   4.110 +
   4.111     <li>Changed NamedFlow to inherit from EventTarget
   4.112  
   4.113     <li>Removed flowFrom from Region interface and changed method name to
   4.114 @@ -2888,8 +2887,9 @@
   4.115     <li>Added a name property to the <a
   4.116      href="#dom-named-flow"><code>NamedFlow</code></a> interface. Added a <a
   4.117      href="#dom-named-flow-collection"><code>NamedFlowCollection</code></a>
   4.118 -    interface and added a <code>getNamedFlows</code> method on the
   4.119 -    <code>Document</code> interface, as per <a
   4.120 +    interface and added a <a
   4.121 +    href="#document-getnamedflows"><code>getNamedFlows</code></a> method on
   4.122 +    the <code>Document</code> interface, as per <a
   4.123      href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15828">Bug
   4.124      15828</a>.
   4.125  
   4.126 @@ -3594,6 +3594,10 @@
   4.127     <li>getContent(), <a href="#dom-named-flow-get-content"
   4.128      title="getContent()"><strong>6.1.</strong></a>
   4.129  
   4.130 +   <li><a href="#document-getnamedflows"><code
   4.131 +    class=idl>getNamedFlows()</code></a>, <a href="#document-getnamedflows"
   4.132 +    title="getNamedFlows()"><strong>6.1.</strong></a>
   4.133 +
   4.134     <li>getRegionFlowRanges, <a href="#dom-region-getregionflowranges"
   4.135      title=getRegionFlowRanges><strong>6.2.</strong></a>
   4.136  
   4.137 @@ -3633,10 +3637,6 @@
   4.138      href="#dom-named-flow-collection"
   4.139      title=NamedFlowCollection><strong>6.1.</strong></a>
   4.140  
   4.141 -   <li><a href="#document-namedflows"><code class=idl>namedFlows</code></a>,
   4.142 -    <a href="#document-namedflows" title=namedFlows><strong>6.1.</strong></a>
   4.143 -    
   4.144 -
   4.145     <li><a href="#dom-named-flow-collection-named-item"><code
   4.146      class=idl>namedItem(name)</code></a>, <a
   4.147      href="#dom-named-flow-collection-named-item"
     5.1 --- a/css3-regions/Overview.src.html	Fri Aug 17 23:46:15 2012 +0200
     5.2 +++ b/css3-regions/Overview.src.html	Fri Aug 17 23:51:31 2012 +0200
     5.3 @@ -1590,20 +1590,20 @@
     5.4          scripts to reference a <code class="idl">NamedFlow</code> object representation
     5.5          of a <span>named flow</span>.</p>
     5.6          
     5.7 -    <p>An additional method and an additional attribute on the <a href=
     5.8 +    <p>An additional method on the <a href=
     5.9      "http://www.w3.org/TR/dom/#interface-document"><code class=
    5.10      "idl">Document</code></a> interface provide access to <span>named flows</span>.</p>
    5.11      
    5.12      <pre class="idl">
    5.13  partial interface <a href=
    5.14  "http://www.w3.org/TR/dom/#interface-document">Document</a> {
    5.15 -  readonly attribute <a href="#dom-named-flow-collection">NamedFlowCollection</a> <a href="#document-namedflows">namedFlows</a>;
    5.16 +  <a href="#dom-named-flow-collection">NamedFlowCollection</a> <a href="#document-getnamedflows">getNamedFlows()</a>;
    5.17  };               
    5.18  </pre>
    5.19  
    5.20 -    <p>The <dfn id="document-namedflows"><code class="idl">namedFlows</code></dfn> attribute on the <a href=
    5.21 +    <p>The <dfn id="document-getnamedflows"><code class="idl">getNamedFlows()</code></dfn> method on the <a href=
    5.22      "http://www.w3.org/TR/dom/#interface-document"><code class=
    5.23 -    "idl">Document</code></a> interface returns the live list of all the current <span>named
    5.24 +    "idl">Document</code></a> interface returns a static snapshot of all the current <span>named
    5.25      flows</span> in the document. </p>
    5.26      
    5.27      <p>The <code class="idl">namedFlows</code> collection must include all <span>named flows</span> 
    5.28 @@ -1617,10 +1617,12 @@
    5.29      </ul>
    5.30          
    5.31  
    5.32 -    <p>The <dfn id="dom-named-flow-collection"><code class="idl">NamedFlowCollection</code></dfn>
    5.33 -    interface provides a list of current <code class="idl">NamedFlow</code> instances in the 
    5.34 -    document. The collection is live and methods operate on the underlying data, not a snapshot of
    5.35 -    the data.</p>
    5.36 +    <p>The <dfn id="dom-named-flow-collection"><code class="idl">NamedFlowCollection</code></dfn> 
    5.37 +    interface provides a list of current 
    5.38 +    <code class="idl">NamedFlow</code> instances 
    5.39 +    in the document. 
    5.40 +    The collection is 
    5.41 +    a snapshot of the data.</p>
    5.42      
    5.43      <pre class="idl">
    5.44  interface NamedFlowCollection {
    5.45 @@ -1810,15 +1812,23 @@
    5.46  
    5.47              <dt>'fit'</dt>
    5.48  
    5.49 -            <dd>The region's flow fragment content fits into the region's <a href=
    5.50 -            "http://www.w3.org/TR/CSS21/box.html#box-dimensions">content box</a>.
    5.51 -            If the region is the last one in the <span title=
    5.52 -            "region-chain">region chain</span>, it means that the content fits
    5.53 -            without overflowing. If the region is not the last one in the region
    5.54 -            chain, that means the <span>named flow</span>
    5.55 -            content is further fitted in subsequent regions. In this
    5.56 -            last case, note that the <span>named flow</span> fragment may be 
    5.57 -            empty (for example if the region is too small to accommodate any content).</dd>
    5.58 +            <dd>The region's flow fragment content 
    5.59 +              fits into the region's 
    5.60 +              <a href="http://www.w3.org/TR/CSS21/box.html#box-dimensions">content box</a>. 
    5.61 +              If the region is the last one 
    5.62 +              in the <span title="region-chain">region chain</span>, 
    5.63 +              it means that the content 
    5.64 +              fits without overflowing. 
    5.65 +              If the region is not the last one 
    5.66 +              in the region chain, 
    5.67 +              that means the <span>named flow</span> content 
    5.68 +              is further fitted in subsequent regions. 
    5.69 +              In this last case, 
    5.70 +              note that the <span>named flow</span> fragment may be empty 
    5.71 +              (for example if the region is too small 
    5.72 +              to accommodate any content). 
    5.73 +              This value is returned if the <span>region</span> object 
    5.74 +              is not (or no longer) a region.</dd>
    5.75  
    5.76              <dt>'empty'</dt>
    5.77  
    5.78 @@ -1881,7 +1891,10 @@
    5.79            If the element is fragmented across region boundaries, 
    5.80            the <a href="http://dev.w3.org/csswg/cssom/#cssstyledeclaration">CSSStyleDeclaration</a>  returned must apply only 
    5.81            to the fragment that flows through 
    5.82 -          the <span>CSS Region</span>.</p>
    5.83 +          the <span>CSS Region</span>. 
    5.84 +          The method returns null 
    5.85 +          if the <span>region</span> object 
    5.86 +          is not (or no longer) a region.</p>
    5.87  
    5.88          <div class="note">
    5.89            <p>If the element is not contained 
    5.90 @@ -1904,15 +1917,7 @@
    5.91            element or other construct
    5.92            becomes 'none' 
    5.93            but a script is still holding 
    5.94 -          a reference to the <code class="idl">Region</code> object. 
    5.95 -          If a <code class="idl">Region</code> instance 
    5.96 -          is no longer a <span>region</span>, 
    5.97 -          accessing its attributes 
    5.98 -          or invoking its methods throws a 
    5.99 -          <a href="http://www.w3.org/TR/dom/#exception-domexception"><code class="idl">DOMException</code></a> 
   5.100 -          with the 
   5.101 -          <a href="http://www.w3.org/TR/dom/#dom-domexception-invalid_access_err"><code class="idl">INVALID_ACCESS_ERR</code></a> 
   5.102 -          error code.</p>
   5.103 +          a reference to the <code class="idl">Region</code> object.
   5.104          </div>
   5.105  
   5.106      <h3 id="region-style-rule-interface">The CSSRegionStyleRule interface</h3>
   5.107 @@ -2445,6 +2450,8 @@
   5.108      <h3 id="changes_from_May_03_2012">Changes from <a href="http://www.w3.org/TR/2012/WD-css3-regions-20120503/">May 3<sup>rd</sup> 2012</a> version</h3>
   5.109  
   5.110      <ul>
   5.111 +      <li>Removed exceptions from the Region interface</li>
   5.112 +      <li>Changed NamedFlowCollection from live to a static snapshot</li>
   5.113        <li>Changed NamedFlow to inherit from EventTarget</li>
   5.114        <li>Removed flowFrom from Region interface and changed method name to getComputedRegionStyle().</li>
   5.115        <li>Region interface is now a supplemental interface with the [NoInterfaceObject] extended attribute.</li>
     6.1 --- a/css3-transforms/ChangeLog	Fri Aug 17 23:46:15 2012 +0200
     6.2 +++ b/css3-transforms/ChangeLog	Fri Aug 17 23:51:31 2012 +0200
     6.3 @@ -1,3 +1,7 @@
     6.4 +2012-08-16 dschulze@adobe.com
     6.5 +    Added issue to interpolation of rotate3d.
     6.6 +    Corrected typo.
     6.7 +
     6.8  2012-08-9 dschulze@adobe.com
     6.9      Simplify transform interpolation uppen request of CSS WG.
    6.10      rotate3d still gets decomposed as 4x4matrix for now.
     7.1 --- a/css3-transforms/Overview.html	Fri Aug 17 23:46:15 2012 +0200
     7.2 +++ b/css3-transforms/Overview.html	Fri Aug 17 23:51:31 2012 +0200
     7.3 @@ -39,14 +39,14 @@
     7.4  
     7.5     <h1>CSS Transforms</h1>
     7.6  
     7.7 -   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 9 August 2012</h2>
     7.8 +   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 16 August 2012</h2>
     7.9  
    7.10     <dl>
    7.11      <dt>This version:
    7.12  
    7.13      <dd> <a
    7.14 -     href="http://www.w3.org/TR/2012/ED-css3-transforms-20120809/">http://dev.w3.org/csswg/css3-transforms/</a>
    7.15 -     <!--http://www.w3.org/TR/2012/WD-css3-transforms-20120809/-->
    7.16 +     href="http://www.w3.org/TR/2012/ED-css3-transforms-20120816/">http://dev.w3.org/csswg/css3-transforms/</a>
    7.17 +     <!--http://www.w3.org/TR/2012/WD-css3-transforms-20120816/-->
    7.18  
    7.19      <dt>Latest version:
    7.20  
    7.21 @@ -2725,7 +2725,7 @@
    7.22      class=css>scale(&lt;number&gt;[, &lt;number&gt;])</code>.
    7.23  
    7.24     <dt id=rotate3d-primitive> <code class=css>rotate3d(&lt;number&gt;,
    7.25 -    &lt;number&gt;, &lt;number&gt;) </code>
    7.26 +    &lt;number&gt;, &lt;number&gt;, &lt;angle&gt;) </code>
    7.27  
    7.28     <dd> for <code class=css>rotate(&lt;number&gt;)</code>, <code
    7.29      class=css>rotateX(&lt;number&gt;)</code>, <code
    7.30 @@ -2828,7 +2828,9 @@
    7.31     converted into 4x4 matrices first and interpolated as defined in section
    7.32     <a href="#matrix-interpolation">Interpolation of Matrices</a> afterwards.
    7.33  
    7.34 -  <p> ‘<code class=css>rotate3d</code>’</p>
    7.35 +  <p class=issue>This is the current behavior on browsers. The CSS WG is
    7.36 +   looking into specifying numerical interpolation for ‘<code
    7.37 +   class=css>rotate3d</code>’.</p>
    7.38    <!-- ======================================================================================================= -->
    7.39  
    7.40    <h2 id=matrix-interpolation><span class=secno>20. </span> Interpolation of
     8.1 --- a/css3-transforms/Transforms.src.html	Fri Aug 17 23:46:15 2012 +0200
     8.2 +++ b/css3-transforms/Transforms.src.html	Fri Aug 17 23:51:31 2012 +0200
     8.3 @@ -2588,7 +2588,7 @@
     8.4                    class="css">scale(&lt;number&gt;[, &lt;number&gt;])</code>.
     8.5                  </dd>
     8.6                  <dt id="rotate3d-primitive">
     8.7 -                  <code class="css">rotate3d(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;)
     8.8 +                  <code class="css">rotate3d(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;angle&gt;)
     8.9                  </dt>
    8.10                  <dd>
    8.11                    for <code class="css">rotate(&lt;number&gt;)</code>, <code
    8.12 @@ -2700,6 +2700,9 @@
    8.13                  href="#matrix-interpolation">Interpolation of Matrices</a> afterwards.
    8.14                </p>
    8.15  
    8.16 +              <p class="issue">This is the current behavior on browsers. The CSS WG is looking into specifying
    8.17 +                numerical interpolation for ''rotate3d''.</p>
    8.18 +
    8.19                <!-- ======================================================================================================= -->
    8.20  
    8.21                <h2 id="matrix-interpolation">
     9.1 --- a/selectors4/Overview.html	Fri Aug 17 23:46:15 2012 +0200
     9.2 +++ b/selectors4/Overview.html	Fri Aug 17 23:51:31 2012 +0200
     9.3 @@ -19,14 +19,14 @@
     9.4  
     9.5     <h1 id=title>Selectors Level 4</h1>
     9.6  
     9.7 -   <h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 21 August
     9.8 +   <h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 17 August
     9.9      2012</h2>
    9.10  
    9.11     <dl>
    9.12      <dt>This version:
    9.13  
    9.14 -    <dd><a href="http://www.w3.org/TR/2012/WD-selectors4-20120821/">
    9.15 -     http://www.w3.org/TR/2012/WD-selectors4-20120821/</a>
    9.16 +    <dd><a href="http://www.w3.org/TR/2012/WD-selectors4-20120817/">
    9.17 +     http://www.w3.org/TR/2012/WD-selectors4-20120817/</a>
    9.18  
    9.19      <dt>Editor's draft:
    9.20  
    9.21 @@ -476,17 +476,29 @@
    9.22    <p><em>This section is not normative.</em>
    9.23  
    9.24    <p> A selector is a boolean predicate that takes an element in a tree
    9.25 -   structure and answers whether the element matches the selector or not.
    9.26 -
    9.27 -  <p> These expressions can be used directly on an element to test whether it
    9.28 -   matches some criteria, such as in the <code>Element.matches()</code>
    9.29 -   function defined in <a href="#SELECTORS-API2"
    9.30 -   rel=biblioentry>[SELECTORS-API2]<!--{{SELECTORS-API2}}--></a>, or
    9.31 -   alternately, can be applied to an entire tree of elements to filter it
    9.32 -   into a set of elements that match the criteria, such as in the selector in
    9.33 -   a CSS style rule.
    9.34 -
    9.35 -  <p>Selectors Levels 1, 2, and 3 are defined as the subsets of selector
    9.36 +   structure and tests whether the element matches the selector or not.
    9.37 +
    9.38 +  <p> These expressions may be used for many things:
    9.39 +
    9.40 +  <ul>
    9.41 +   <li> directly on an element to test whether it matches some criteria, such
    9.42 +    as in the <code>Element.matches()</code> function defined in <a
    9.43 +    href="#SELECTORS-API2"
    9.44 +    rel=biblioentry>[SELECTORS-API2]<!--{{SELECTORS-API2}}--></a>
    9.45 +
    9.46 +   <li> applied to an entire tree of elements to filter it into a set of
    9.47 +    elements that match the criteria, such as in the
    9.48 +    <code>document.findAll()</code> function defined in <a
    9.49 +    href="#SELECTORS-API2"
    9.50 +    rel=biblioentry>[SELECTORS-API2]<!--{{SELECTORS-API2}}--></a> or the
    9.51 +    selector of a CSS style rule.
    9.52 +
    9.53 +   <li> used "in reverse" to generate markup that would match a given
    9.54 +    selector, such as in <a href="http://haml.info/">HAML</a> or <a
    9.55 +    href="http://en.wikipedia.org/wiki/Zen_Coding">Zen Coding</a>
    9.56 +  </ul>
    9.57 +
    9.58 +  <p> Selectors Levels 1, 2, and 3 are defined as the subsets of selector
    9.59     functionality defined in the <a
    9.60     href="http://www.w3.org/TR/REC-CSS1">CSS1</a>, <a
    9.61     href="http://www.w3.org/TR/CSS21/">CSS2.1</a>, and <a
    9.62 @@ -495,12 +507,12 @@
    9.63  
    9.64    <h3 id=placement><span class=secno>1.1. </span>Module Interactions</h3>
    9.65  
    9.66 -  <p>This module replaces the definitions for, and extends the set of
    9.67 -   selectors defined for CSS in <a href="#SELECT"
    9.68 +  <p>This module replaces the definitions of and extends the set of selectors
    9.69 +   defined for CSS in <a href="#SELECT"
    9.70     rel=biblioentry>[SELECT]<!--{{SELECT}}--></a> and <a href="#CSS21"
    9.71     rel=biblioentry>[CSS21]<!--{{CSS21}}--></a>.
    9.72  
    9.73 -  <p>Pseudo-element selectors, which define abstract elements in a rendering
    9.74 +  <p> Pseudo-element selectors, which define abstract elements in a rendering
    9.75     tree, are not part of this specification: their generic syntax is
    9.76     described here, but, due to their close integration with the rendering
    9.77     model and irrelevance to other uses such as DOM queries, they will be
    9.78 @@ -1082,7 +1094,7 @@
    9.79       <td>1
    9.80  
    9.81      <tr>
    9.82 -     <td><code>E &gt; F</code>
    9.83 +     <td><code>E > F</code>
    9.84  
    9.85       <td>an F element child of an E element
    9.86  
    9.87 @@ -1120,7 +1132,7 @@
    9.88       <td>4
    9.89  
    9.90      <tr>
    9.91 -     <td><code>E! &gt; F</code>
    9.92 +     <td><code>E! > F</code>
    9.93  
    9.94       <td>an E element parent of an F element
    9.95  
    9.96 @@ -1132,6 +1144,7 @@
    9.97  
    9.98    <p>The meaning of each selector is derived from the table above by
    9.99     prepending "matches" to the contents of each cell in the "Meaning" column.
   9.100 +   
   9.101  
   9.102    <p class=note>Some Level 4 selectors (noted above as "3-UI") were
   9.103     introduced in <a href="#CSS3UI"
   9.104 @@ -1169,8 +1182,8 @@
   9.105     particular kind of relationship between the <a
   9.106     href="#compound"><i>compound selectors</i></a> on either side. Combinators
   9.107     in Selectors level 4 include: whitespace, &quot;greater-than sign&quot;
   9.108 -   (U+003E, <code>&gt;</code>), &quot;plus sign&quot; (U+002B,
   9.109 -   <code>+</code>) and &quot;tilde&quot; (U+007E, <code>~</code>). <a
   9.110 +   (U+003E, <code>></code>), &quot;plus sign&quot; (U+002B, <code>+</code>)
   9.111 +   and &quot;tilde&quot; (U+007E, <code>~</code>). <a
   9.112     href="#whitespace">White space</a> may appear between a combinator and the
   9.113     simple selectors around it.
   9.114  
   9.115 @@ -1207,12 +1220,12 @@
   9.116     <p>For example, the following selector represents a list item
   9.117      <code>LI</code> unique child of an ordered list <code>OL</code>:
   9.118  
   9.119 -   <pre>OL &gt; LI:only-child</pre>
   9.120 +   <pre>OL > LI:only-child</pre>
   9.121  
   9.122     <p>However the following one represents an ordered list <code>OL</code>
   9.123      having a unique child, that child being a <code>LI</code>:
   9.124  
   9.125 -   <pre>!OL &gt; LI:only-child</pre>
   9.126 +   <pre>!OL > LI:only-child</pre>
   9.127  
   9.128     <p>The tree structures represented by these two selectors are the same,
   9.129      but the subjects of the selectors are not.
   9.130 @@ -1428,16 +1441,19 @@
   9.131     after the comma.
   9.132  
   9.133    <div class=example>
   9.134 -   <p>CSS example:</p>
   9.135 +   <p>CSS example:
   9.136  
   9.137     <p>In this example, we condense three rules with identical declarations
   9.138 -    into one. Thus,</p>
   9.139 -
   9.140 -   <pre>h1 { font-family: sans-serif }
   9.141 -  h2 { font-family: sans-serif }
   9.142 -  h3 { font-family: sans-serif }</pre>
   9.143 -
   9.144 -   <p>is equivalent to:</p>
   9.145 +    into one. Thus,
   9.146 +
   9.147 +   <pre><!--
   9.148 +    -->h1 { font-family: sans-serif }
   9.149 +<!--
   9.150 +    -->h2 { font-family: sans-serif }
   9.151 +<!--
   9.152 +    -->h3 { font-family: sans-serif }</pre>
   9.153 +
   9.154 +   <p>is equivalent to:
   9.155  
   9.156     <pre>h1, h2, h3 { font-family: sans-serif }</pre>
   9.157    </div>
   9.158 @@ -1450,19 +1466,22 @@
   9.159     invalidated.
   9.160  
   9.161    <div class=example>
   9.162 -   <p>Invalid CSS example:</p>
   9.163 -
   9.164 -   <pre>h1 { font-family: sans-serif }
   9.165 -  h2..foo { font-family: sans-serif }
   9.166 -  h3 { font-family: sans-serif }</pre>
   9.167 -
   9.168 -   <p>is not equivalent to:</p>
   9.169 +   <p>Invalid CSS example:
   9.170 +
   9.171 +   <pre><!--
   9.172 +    -->h1 { font-family: sans-serif }
   9.173 +<!--
   9.174 +    -->h2..foo { font-family: sans-serif }
   9.175 +<!--
   9.176 +    -->h3 { font-family: sans-serif }</pre>
   9.177 +
   9.178 +   <p>is not equivalent to:
   9.179  
   9.180     <pre>h1, h2..foo, h3 { font-family: sans-serif }</pre>
   9.181  
   9.182     <p>because the above selector (<code>h1, h2..foo, h3</code>) is entirely
   9.183      invalid and the entire style rule is dropped. (When the selectors are not
   9.184 -    grouped, only the rule for <code>h2..foo</code> is dropped.)</p>
   9.185 +    grouped, only the rule for <code>h2..foo</code> is dropped.)
   9.186    </div>
   9.187  
   9.188    <h3 id=the-matches-pseudo><span class=secno>4.2. </span> The Matches-Any
   9.189 @@ -1494,14 +1513,14 @@
   9.190     <p>For example, following selector matches any element that is being
   9.191      hovered or focused, regardless of its namespace. In particular, it is not
   9.192      limited to only matching elements in the default namespace that are being
   9.193 -    hovered or focused.</p>
   9.194 +    hovered or focused.
   9.195  
   9.196     <pre>*|*:matches(:hover, :focus)</pre>
   9.197  
   9.198     <p>The following selector, however, represents only hovered or focused
   9.199      elements that are in the default namespace, because it uses an explicit
   9.200      universal selector within the <a
   9.201 -    href="#matches-pseudo"><code>:matches()</code></a> notation:</p>
   9.202 +    href="#matches-pseudo"><code>:matches()</code></a> notation:
   9.203  
   9.204     <pre>*|*:matches(*:hover, *:focus)</pre>
   9.205    </div>
   9.206 @@ -1531,16 +1550,16 @@
   9.207  
   9.208    <div class=example>
   9.209     <p>For example, the following selector matches all <code>button</code>
   9.210 -    elements in an HTML document that are not disabled.</p>
   9.211 +    elements in an HTML document that are not disabled.
   9.212  
   9.213     <pre>button:not([DISABLED])</pre>
   9.214  
   9.215 -   <p>The following selector represents all but <code>FOO</code> elements.</p>
   9.216 +   <p>The following selector represents all but <code>FOO</code> elements.
   9.217  
   9.218     <pre>*:not(FOO)</pre>
   9.219  
   9.220     <p>The following compound selector represents all HTML elements except
   9.221 -    links.</p>
   9.222 +    links.
   9.223  
   9.224     <pre>html|*:not(:link):not(:visited)</pre>
   9.225    </div>
   9.226 @@ -1569,10 +1588,10 @@
   9.227     selector represents an instance of the element type in the document tree.
   9.228  
   9.229    <div class=example>
   9.230 -   <p>Example:</p>
   9.231 +   <p>Example:
   9.232  
   9.233     <p>The following selector represents an <code>h1</code> element in the
   9.234 -    document tree:</p>
   9.235 +    document tree:
   9.236  
   9.237     <pre>h1</pre>
   9.238    </div>
   9.239 @@ -1638,7 +1657,7 @@
   9.240    </dl>
   9.241  
   9.242    <div class=example>
   9.243 -   <p>CSS examples:</p>
   9.244 +   <p>CSS examples:
   9.245  
   9.246     <pre>
   9.247     @namespace foo url(http://www.example.com);
   9.248 @@ -1650,19 +1669,19 @@
   9.249  
   9.250     <p>The first rule (not counting the <code>@namespace</code> at-rule) will
   9.251      match only <code>h1</code> elements in the "http://www.example.com"
   9.252 -    namespace.</p>
   9.253 +    namespace.
   9.254  
   9.255     <p>The second rule will match all elements in the "http://www.example.com"
   9.256 -    namespace.</p>
   9.257 +    namespace.
   9.258  
   9.259     <p>The third rule will match only <code>h1</code> elements with no
   9.260 -    namespace.</p>
   9.261 +    namespace.
   9.262  
   9.263     <p>The fourth rule will match <code>h1</code> elements in any namespace
   9.264 -    (including those without any namespace).</p>
   9.265 +    (including those without any namespace).
   9.266  
   9.267     <p>The last rule is equivalent to the fourth rule because no default
   9.268 -    namespace has been defined.</p>
   9.269 +    namespace has been defined.
   9.270    </div>
   9.271  
   9.272    <h3 id=universal-selector><span class=secno>5.2. </span> Universal selector
   9.273 @@ -1686,7 +1705,7 @@
   9.274     universal selector's presence implied.
   9.275  
   9.276    <div class=example>
   9.277 -   <p>Examples:</p>
   9.278 +   <p>Examples:
   9.279  
   9.280     <ul>
   9.281      <li><code>*[hreflang|=en]</code> and <code>[hreflang|=en]</code> are
   9.282 @@ -1789,16 +1808,16 @@
   9.283     <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
   9.284  
   9.285    <div class=example>
   9.286 -   <p>Examples:</p>
   9.287 +   <p>Examples:
   9.288  
   9.289     <p>The following attribute selector represents an <code>h1</code> element
   9.290 -    that carries the <code>title</code> attribute, whatever its value:</p>
   9.291 +    that carries the <code>title</code> attribute, whatever its value:
   9.292  
   9.293     <pre>h1[title]</pre>
   9.294  
   9.295     <p>In the following example, the selector represents a <code>span</code>
   9.296      element whose <code>class</code> attribute has exactly the value
   9.297 -    "example":</p>
   9.298 +    "example":
   9.299  
   9.300     <pre>span[class="example"]</pre>
   9.301  
   9.302 @@ -1806,7 +1825,7 @@
   9.303      attributes of an element, or several conditions on the same attribute.
   9.304      Here, the selector represents a <code>span</code> element whose
   9.305      <code>hello</code> attribute has exactly the value "Cleveland" and whose
   9.306 -    <code>goodbye</code> attribute has exactly the value "Columbus":</p>
   9.307 +    <code>goodbye</code> attribute has exactly the value "Columbus":
   9.308  
   9.309     <pre>span[hello="Cleveland"][goodbye="Columbus"]</pre>
   9.310  
   9.311 @@ -1815,28 +1834,32 @@
   9.312      element with the value "copyright copyleft copyeditor" on a
   9.313      <code>rel</code> attribute. The second selector would only match an
   9.314      <code>a</code> element with an <code>href</code> attribute having the
   9.315 -    exact value "http://www.w3.org/".</p>
   9.316 -
   9.317 -   <pre>a[rel~="copyright"] { ... }
   9.318 -  a[href="http://www.w3.org/"] { ... }</pre>
   9.319 +    exact value "http://www.w3.org/".
   9.320 +
   9.321 +   <pre><!--
   9.322 +    -->a[rel~="copyright"] { ... }
   9.323 +<!--
   9.324 +    -->a[href="http://www.w3.org/"] { ... }</pre>
   9.325  
   9.326     <p>The following selector represents an <code>a</code> element whose
   9.327 -    <code>hreflang</code> attribute is exactly "fr".</p>
   9.328 +    <code>hreflang</code> attribute is exactly "fr".
   9.329  
   9.330     <pre>a[hreflang=fr]</pre>
   9.331  
   9.332     <p>The following selector represents an <code>a</code> element for which
   9.333      the value of the <code>hreflang</code> attribute begins with "en",
   9.334 -    including "en", "en-US", and "en-scouse":</p>
   9.335 +    including "en", "en-US", and "en-scouse":
   9.336  
   9.337     <pre>a[hreflang|="en"]</pre>
   9.338  
   9.339     <p>The following selectors represent a <code>DIALOGUE</code> element
   9.340      whenever it has one of two different values for an attribute
   9.341 -    <code>character</code>:</p>
   9.342 -
   9.343 -   <pre>DIALOGUE[character=romeo]
   9.344 -  DIALOGUE[character=juliet]</pre>
   9.345 +    <code>character</code>:
   9.346 +
   9.347 +   <pre><!--
   9.348 +    -->DIALOGUE[character=romeo]
   9.349 +<!--
   9.350 +    -->DIALOGUE[character=juliet]</pre>
   9.351    </div>
   9.352  
   9.353    <h3 id=attribute-substrings><span class=secno>6.2. </span> Substring
   9.354 @@ -1871,20 +1894,20 @@
   9.355     <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
   9.356  
   9.357    <div class=example>
   9.358 -   <p>Examples:</p>
   9.359 +   <p>Examples:
   9.360  
   9.361     <p>The following selector represents an HTML <code>object</code>,
   9.362 -    referencing an image:</p>
   9.363 +    referencing an image:
   9.364  
   9.365     <pre>object[type^="image/"]</pre>
   9.366  
   9.367     <p>The following selector represents an HTML anchor <code>a</code> with an
   9.368 -    <code>href</code> attribute whose value ends with ".html".</p>
   9.369 +    <code>href</code> attribute whose value ends with ".html".
   9.370  
   9.371     <pre>a[href$=".html"]</pre>
   9.372  
   9.373     <p>The following selector represents an HTML paragraph with a
   9.374 -    <code>title</code> attribute whose value contains the substring "hello"</p>
   9.375 +    <code>title</code> attribute whose value contains the substring "hello"
   9.376  
   9.377     <pre>p[title*="hello"]</pre>
   9.378    </div>
   9.379 @@ -1931,25 +1954,29 @@
   9.380     <a href="#conformance">invalid</a> selector.
   9.381  
   9.382    <div class=example>
   9.383 -   <p>CSS examples:</p>
   9.384 -
   9.385 -   <pre>
   9.386 -  @namespace foo "http://www.example.com";
   9.387 -  [foo|att=val] { color: blue }
   9.388 -  [*|att] { color: yellow }
   9.389 -  [|att] { color: green }
   9.390 -  [att] { color: green }</pre>
   9.391 +   <p>CSS examples:
   9.392 +
   9.393 +   <pre><!--
   9.394 +    -->@namespace foo "http://www.example.com";
   9.395 +<!--
   9.396 +    -->[foo|att=val] { color: blue }
   9.397 +<!--
   9.398 +    -->[*|att] { color: yellow }
   9.399 +<!--
   9.400 +    -->[|att] { color: green }
   9.401 +<!--
   9.402 +    -->[att] { color: green }</pre>
   9.403  
   9.404     <p>The first rule will match only elements with the attribute
   9.405      <code>att</code> in the "http://www.example.com" namespace with the value
   9.406 -    "val".</p>
   9.407 +    "val".
   9.408  
   9.409     <p>The second rule will match only elements with the attribute
   9.410      <code>att</code> regardless of the namespace of the attribute (including
   9.411 -    no namespace).</p>
   9.412 +    no namespace).
   9.413  
   9.414     <p>The last two rules are equivalent and will match only elements with the
   9.415 -    attribute <code>att</code> where the attribute is not in a namespace.</p>
   9.416 +    attribute <code>att</code> where the attribute is not in a namespace.
   9.417    </div>
   9.418  
   9.419    <h3 id=def-values><span class=secno>6.5. </span> Default attribute values
   9.420 @@ -1969,6 +1996,7 @@
   9.421     rel=biblioentry>[XML10]<!--{{XML10}}--></a> for definitions of these
   9.422     subsets.) Depending on the UA, a default attribute value defined in the
   9.423     external subset of the DTD might or might not appear in the document tree.
   9.424 +   
   9.425  
   9.426    <p>A UA that recognizes an XML namespace may, but is not required to use
   9.427     its knowledge of that namespace to treat default attribute values as if
   9.428 @@ -1982,33 +2010,37 @@
   9.429     non-validating processors as defined by the XML specification.
   9.430  
   9.431    <div class=example>
   9.432 -   <p>Example:</p>
   9.433 +   <p>Example:
   9.434  
   9.435     <p>Consider an element <code>EXAMPLE</code> with an attribute
   9.436      <code>radix</code> that has a default value of <code>"decimal"</code>.
   9.437 -    The DTD fragment might be</p>
   9.438 +    The DTD fragment might be
   9.439  
   9.440     <pre
   9.441      class=dtd-example>&lt;!ATTLIST EXAMPLE radix (decimal,octal) "decimal"></pre>
   9.442  
   9.443 -   <p>If the style sheet contains the rules</p>
   9.444 -
   9.445 -   <pre>EXAMPLE[radix=decimal] { /*... default property settings ...*/ }
   9.446 -  EXAMPLE[radix=octal]   { /*... other settings...*/ }</pre>
   9.447 +   <p>If the style sheet contains the rules
   9.448 +
   9.449 +   <pre><!--
   9.450 +    -->EXAMPLE[radix=decimal] { /*... default property settings ...*/ }
   9.451 +<!--
   9.452 +    -->EXAMPLE[radix=octal]   { /*... other settings...*/ }</pre>
   9.453  
   9.454     <p>the first rule might not match elements whose <code>radix</code>
   9.455      attribute is set by default, i.e. not set explicitly. To catch all cases,
   9.456 -    the attribute selector for the default value must be dropped:</p>
   9.457 -
   9.458 -   <pre>EXAMPLE                { /*... default property settings ...*/ }
   9.459 -  EXAMPLE[radix=octal]   { /*... other settings...*/ }</pre>
   9.460 +    the attribute selector for the default value must be dropped:
   9.461 +
   9.462 +   <pre><!--
   9.463 +    -->EXAMPLE                { /*... default property settings ...*/ }
   9.464 +<!--
   9.465 +    -->EXAMPLE[radix=octal]   { /*... other settings...*/ }</pre>
   9.466  
   9.467     <p>Here, because the selector <code>EXAMPLE[radix=octal]</code> is more
   9.468      specific than the type selector alone, the style declarations in the
   9.469      second rule will override those in the first for elements that have a
   9.470      <code>radix</code> attribute value of <code>"octal"</code>. Care has to
   9.471      be taken that all property declarations that are to apply only to the
   9.472 -    default case are overridden in the non-default cases' style rules.</p>
   9.473 +    default case are overridden in the non-default cases' style rules.
   9.474    </div>
   9.475  
   9.476    <h3 id=class-html><span class=secno>6.6. </span> Class selectors</h3>
   9.477 @@ -2027,38 +2059,38 @@
   9.478     <a href="#specificity">specificity</a>.
   9.479  
   9.480    <div class=example>
   9.481 -   <p>CSS examples:</p>
   9.482 +   <p>CSS examples:
   9.483  
   9.484     <p>We can assign style information to all elements with
   9.485 -    <code>class~="pastoral"</code> as follows:</p>
   9.486 +    <code>class~="pastoral"</code> as follows:
   9.487  
   9.488     <pre>*.pastoral { color: green }  /* all elements with class~=pastoral */</pre>
   9.489  
   9.490 -   <p>or just</p>
   9.491 +   <p>or just
   9.492  
   9.493     <pre>.pastoral { color: green }  /* all elements with class~=pastoral */</pre>
   9.494  
   9.495     <p>The following assigns style only to H1 elements with
   9.496 -    <code>class~="pastoral"</code>:</p>
   9.497 +    <code>class~="pastoral"</code>:
   9.498  
   9.499     <pre>H1.pastoral { color: green }  /* H1 elements with class~=pastoral */</pre>
   9.500  
   9.501     <p>Given these rules, the first <code>H1</code> instance below would not
   9.502 -    have green text, while the second would:</p>
   9.503 +    have green text, while the second would:
   9.504  
   9.505     <pre>
   9.506 -  &lt;H1&gt;Not green&lt;/H1&gt;
   9.507 -  &lt;H1 class="pastoral"&gt;Very green&lt;/H1&gt;</pre>
   9.508 +  &lt;H1>Not green&lt;/H1>
   9.509 +  &lt;H1 class="pastoral">Very green&lt;/H1></pre>
   9.510  
   9.511     <p>The following rule matches any <code>P</code> element whose
   9.512      <code>class</code> attribute has been assigned a list of <a
   9.513      href="#whitespace">whitespace</a>-separated values that includes both
   9.514 -    <code>pastoral</code> and <code>marine</code>:</p>
   9.515 +    <code>pastoral</code> and <code>marine</code>:
   9.516  
   9.517     <pre>p.pastoral.marine { color: green }</pre>
   9.518  
   9.519     <p>This rule matches when <code>class="pastoral blue aqua marine"</code>
   9.520 -    but does not match for <code>class="pastoral blue"</code>.</p>
   9.521 +    but does not match for <code>class="pastoral blue"</code>.
   9.522    </div>
   9.523  
   9.524    <p class=note><strong>Note:</strong> Because CSS gives considerable power
   9.525 @@ -2101,20 +2133,20 @@
   9.526     hard-coded or ask the user.
   9.527  
   9.528    <div class=example>
   9.529 -   <p>Examples:</p>
   9.530 +   <p>Examples:
   9.531  
   9.532     <p>The following ID selector represents an <code>h1</code> element whose
   9.533 -    ID-typed attribute has the value "chapter1":</p>
   9.534 +    ID-typed attribute has the value "chapter1":
   9.535  
   9.536     <pre>h1#chapter1</pre>
   9.537  
   9.538     <p>The following ID selector represents any element whose ID-typed
   9.539 -    attribute has the value "chapter1":</p>
   9.540 +    attribute has the value "chapter1":
   9.541  
   9.542     <pre>#chapter1</pre>
   9.543  
   9.544     <p>The following selector represents any element whose ID-typed attribute
   9.545 -    has the value "z98y".</p>
   9.546 +    has the value "z98y".
   9.547  
   9.548     <pre>*#z98y</pre>
   9.549    </div>
   9.550 @@ -2128,6 +2160,7 @@
   9.551     for that namespace). If a style sheet author knows or suspects that a UA
   9.552     may not know what the ID of an element is, he should use normal attribute
   9.553     selectors instead: <code>[name=p371]</code> instead of <code>#p371</code>.
   9.554 +   
   9.555  
   9.556    <p>If an element has multiple ID attributes, all of them must be treated as
   9.557     IDs for that element for the purposes of the ID selector. Such a situation
   9.558 @@ -2170,10 +2203,10 @@
   9.559    <p>The two states are mutually exclusive.
   9.560  
   9.561    <div class=example>
   9.562 -   <p>Example:</p>
   9.563 +   <p>Example:
   9.564  
   9.565     <p>The following selector represents links carrying class
   9.566 -    <code>footnote</code> and already visited:</p>
   9.567 +    <code>footnote</code> and already visited:
   9.568  
   9.569     <pre>.footnote:visited</pre>
   9.570    </div>
   9.571 @@ -2295,24 +2328,25 @@
   9.572     fragment identifier, then the document has no target element.
   9.573  
   9.574    <div class=example>
   9.575 -   <p>Example:</p>
   9.576 +   <p>Example:
   9.577  
   9.578     <pre>p.note:target</pre>
   9.579  
   9.580     <p>This selector represents a <code>p</code> element of class
   9.581 -    <code>note</code> that is the target element of the referring URI.</p>
   9.582 +    <code>note</code> that is the target element of the referring URI.
   9.583    </div>
   9.584  
   9.585    <div class=example>
   9.586 -   <p>CSS example:</p>
   9.587 +   <p>CSS example:
   9.588  
   9.589     <p>Here, the <a href="#target-pseudo"><code>:target</code></a>
   9.590      pseudo-class is used to make the target element red and place an image
   9.591 -    before it, if there is one:</p>
   9.592 -
   9.593 -   <pre>
   9.594 -  *:target { color : red }
   9.595 -  *:target::before { content : url(target.png) }</pre>
   9.596 +    before it, if there is one:
   9.597 +
   9.598 +   <pre><!--
   9.599 +    -->*:target { color : red }
   9.600 +<!--
   9.601 +    -->*:target::before { content : url(target.png) }</pre>
   9.602    </div>
   9.603  
   9.604    <h3 id=the-scope-pseudo><span class=secno>7.5. </span> The contextual
   9.605 @@ -2350,20 +2384,26 @@
   9.606     several pseudo-classes at the same time.
   9.607  
   9.608    <div class=example>
   9.609 -   <p>Examples:</p>
   9.610 -
   9.611 -   <pre>a:link    /* unvisited links */
   9.612 -  a:visited /* visited links */
   9.613 -  a:hover   /* user hovers */
   9.614 -  a:active  /* active links */</pre>
   9.615 -
   9.616 -   <p>An example of combining dynamic pseudo-classes:</p>
   9.617 -
   9.618 -   <pre>a:focus
   9.619 -  a:focus:hover</pre>
   9.620 +   <p>Examples:
   9.621 +
   9.622 +   <pre><!--
   9.623 +    -->a:link    /* unvisited links */
   9.624 +<!--
   9.625 +    -->a:visited /* visited links */
   9.626 +<!--
   9.627 +    -->a:hover   /* user hovers */
   9.628 +<!--
   9.629 +    -->a:active  /* active links */</pre>
   9.630 +
   9.631 +   <p>An example of combining dynamic pseudo-classes:
   9.632 +
   9.633 +   <pre><!--
   9.634 +    -->a:focus
   9.635 +<!--
   9.636 +    -->a:focus:hover</pre>
   9.637  
   9.638     <p>The last selector matches <code>a</code> elements that are in the
   9.639 -    pseudo-class :focus and in the pseudo-class :hover.</p>
   9.640 +    pseudo-class :focus and in the pseudo-class :hover.
   9.641    </div>
   9.642  
   9.643    <h3 id=the-hover-pseudo><span class=secno>8.1. </span> The pointer hover
   9.644 @@ -2540,10 +2580,12 @@
   9.645     <p>For example, the following rule will highlight whichever paragraph or
   9.646      list item is being read aloud in a speech rendering of the document:
   9.647  
   9.648 -   <pre>
   9.649 -<!-- -->:current(p, li, dt, dd) {
   9.650 -<!-- -->  background: yellow;
   9.651 -<!-- -->}</pre>
   9.652 +   <pre><!--
   9.653 +    -->:current(p, li, dt, dd) {
   9.654 +<!--
   9.655 +    -->  background: yellow;
   9.656 +<!--
   9.657 +    -->}</pre>
   9.658    </div>
   9.659  
   9.660    <h3 id=the-past-pseudo><span class=secno>9.2. </span> The past-element
   9.661 @@ -2651,16 +2693,20 @@
   9.662     Two-letter or three-letter language codes."</a>
   9.663  
   9.664    <div class=example>
   9.665 -   <p>Examples:</p>
   9.666 +   <p>Examples:
   9.667  
   9.668     <p>The two following selectors represent an HTML document that is in
   9.669      Belgian French or German. The two next selectors represent <code>q</code>
   9.670 -    quotations in an arbitrary element in Belgian French or German.</p>
   9.671 -
   9.672 -   <pre>html:lang(fr-be)
   9.673 -  html:lang(de)
   9.674 -  :lang(fr-be) &gt; q
   9.675 -  :lang(de) &gt; q</pre>
   9.676 +    quotations in an arbitrary element in Belgian French or German.
   9.677 +
   9.678 +   <pre><!--
   9.679 +    -->html:lang(fr-be)
   9.680 +<!--
   9.681 +    -->html:lang(de)
   9.682 +<!--
   9.683 +    -->:lang(fr-be) > q
   9.684 +<!--
   9.685 +    -->:lang(de) > q</pre>
   9.686    </div>
   9.687  
   9.688    <p class=note>One difference between <code>:lang(C)</code> and the ‘<code
   9.689 @@ -2674,12 +2720,14 @@
   9.690     <p>In this HTML example, only the BODY matches <code>[lang|=fr]</code>
   9.691      (because it has a LANG attribute) but both the BODY and the P match
   9.692      <code>:lang(fr)</code> (because both are in French). The P does not match
   9.693 -    the <code>[lang|=fr]</code> because it does not have a LANG attribute.</p>
   9.694 -
   9.695 -   <pre>
   9.696 -  &lt;body lang=fr>
   9.697 -    &lt;p>Je suis français.&lt;/p>
   9.698 -  &lt;/body></pre>
   9.699 +    the <code>[lang|=fr]</code> because it does not have a LANG attribute.
   9.700 +
   9.701 +   <pre><!--
   9.702 +    -->&lt;body lang=fr>
   9.703 +<!--
   9.704 +    -->  &lt;p>Je suis français.&lt;/p>
   9.705 +<!--
   9.706 +    -->&lt;/body></pre>
   9.707    </div>
   9.708  
   9.709    <div class=example>
   9.710 @@ -2975,24 +3023,38 @@
   9.711     <code>[0-9]+</code> and the rest of the tokenization is given by the <a
   9.712     href="#lex">Lexical scanner</a> in section 10.2:
   9.713  
   9.714 -  <pre>nth
   9.715 -    : S* [ ['-'|'+']? INTEGER? {N} [ S* ['-'|'+'] S* INTEGER ]? |
   9.716 -           ['-'|'+']? INTEGER | {O}{D}{D} | {E}{V}{E}{N} ] S*
   9.717 -    ;</pre>
   9.718 +  <pre><!--
   9.719 +  -->nth
   9.720 +<!--
   9.721 +  -->: S* [ ['-'|'+']? INTEGER? {N} [ S* ['-'|'+'] S* INTEGER ]? |
   9.722 +<!--
   9.723 +  -->       ['-'|'+']? INTEGER | {O}{D}{D} | {E}{V}{E}{N} ] S*
   9.724 +<!--
   9.725 +  -->;</pre>
   9.726  
   9.727    <div class=example>
   9.728 -   <p>Examples:</p>
   9.729 -
   9.730 -   <pre>tr:nth-child(2n+1) /* represents every odd row of an HTML table */
   9.731 -  tr:nth-child(odd)  /* same */
   9.732 -  tr:nth-child(2n+0) /* represents every even row of an HTML table */
   9.733 -  tr:nth-child(even) /* same */
   9.734 -
   9.735 -  /* Alternate paragraph colours in CSS */
   9.736 -  p:nth-child(4n+1) { color: navy; }
   9.737 -  p:nth-child(4n+2) { color: green; }
   9.738 -  p:nth-child(4n+3) { color: maroon; }
   9.739 -  p:nth-child(4n+4) { color: purple; }</pre>
   9.740 +   <p>Examples:
   9.741 +
   9.742 +   <pre><!--
   9.743 +    -->tr:nth-child(2n+1) /* represents every odd row of an HTML table */
   9.744 +<!--
   9.745 +    -->tr:nth-child(odd)  /* same */
   9.746 +<!--
   9.747 +    -->tr:nth-child(2n+0) /* represents every even row of an HTML table */
   9.748 +<!--
   9.749 +    -->tr:nth-child(even) /* same */
   9.750 +<!--
   9.751 +    -->
   9.752 +<!--
   9.753 +    -->/* Alternate paragraph colours in CSS */
   9.754 +<!--
   9.755 +    -->p:nth-child(4n+1) { color: navy; }
   9.756 +<!--
   9.757 +    -->p:nth-child(4n+2) { color: green; }
   9.758 +<!--
   9.759 +    -->p:nth-child(4n+3) { color: maroon; }
   9.760 +<!--
   9.761 +    -->p:nth-child(4n+4) { color: purple; }</pre>
   9.762    </div>
   9.763  
   9.764    <p>When the value <var>b</var> is preceded by a negative sign, the "+"
   9.765 @@ -3000,12 +3062,14 @@
   9.766     the "-" character indicating the negative value of <var>b</var>).
   9.767  
   9.768    <div class=example>
   9.769 -   <p>Examples:</p>
   9.770 -
   9.771 -   <pre>
   9.772 -  :nth-child(10n-1)  /* represents the 9th, 19th, 29th, etc, element */
   9.773 -  :nth-child(10n+9)  /* Same */
   9.774 -  :nth-child(10n+-1) /* Syntactically invalid, and would be ignored */</pre>
   9.775 +   <p>Examples:
   9.776 +
   9.777 +   <pre><!--
   9.778 +    -->:nth-child(10n-1)  /* represents the 9th, 19th, 29th, etc, element */
   9.779 +<!--
   9.780 +    -->:nth-child(10n+9)  /* Same */
   9.781 +<!--
   9.782 +    -->:nth-child(10n+-1) /* Syntactically invalid, and would be ignored */</pre>
   9.783    </div>
   9.784  
   9.785    <p>When <var>a</var>=0, the <var>a</var><code>n</code> part need not be
   9.786 @@ -3016,25 +3080,32 @@
   9.787     <code>:nth-child(<var>b</var>)</code>.
   9.788  
   9.789    <div class=example>
   9.790 -   <p>Examples:</p>
   9.791 -
   9.792 -   <pre>foo:nth-child(0n+5)   /* represents an element foo that is the 5th child
   9.793 -                           of its parent element */
   9.794 -  foo:nth-child(5)      /* same */</pre>
   9.795 +   <p>Examples:
   9.796 +
   9.797 +   <pre><!--
   9.798 +    -->foo:nth-child(0n+5)   /* represents an element foo that is the 5th child
   9.799 +<!--
   9.800 +    -->                         of its parent element */
   9.801 +<!--
   9.802 +    -->foo:nth-child(5)      /* same */</pre>
   9.803    </div>
   9.804  
   9.805    <p>When <var>a</var>=1, or <var>a</var>=-1, the <code>1</code> may be
   9.806     omitted from the rule.
   9.807  
   9.808    <div class=example>
   9.809 -   <p>Examples:</p>
   9.810 -
   9.811 -   <p>The following selectors are therefore equivalent:</p>
   9.812 -
   9.813 -   <pre>bar:nth-child(1n+0)   /* represents all bar elements, specificity (0,1,1) */
   9.814 -  bar:nth-child(n+0)    /* same */
   9.815 -  bar:nth-child(n)      /* same */
   9.816 -  bar                   /* same but lower specificity (0,0,1) */</pre>
   9.817 +   <p>Examples:
   9.818 +
   9.819 +   <p>The following selectors are therefore equivalent:
   9.820 +
   9.821 +   <pre><!--
   9.822 +    -->bar:nth-child(1n+0)   /* represents all bar elements, specificity (0,1,1) */
   9.823 +<!--
   9.824 +    -->bar:nth-child(n+0)    /* same */
   9.825 +<!--
   9.826 +    -->bar:nth-child(n)      /* same */
   9.827 +<!--
   9.828 +    -->bar                   /* same but lower specificity (0,0,1) */</pre>
   9.829    </div>
   9.830  
   9.831    <p>If <var>b</var>=0, then every <var>a</var>th element is picked. In such
   9.832 @@ -3042,10 +3113,12 @@
   9.833     the <var>a</var> part is already omitted.
   9.834  
   9.835    <div class=example>
   9.836 -   <p>Examples:</p>
   9.837 -
   9.838 -   <pre>tr:nth-child(2n+0) /* represents every even row of an HTML table */
   9.839 -  tr:nth-child(2n) /* same */</pre>
   9.840 +   <p>Examples:
   9.841 +
   9.842 +   <pre><!--
   9.843 +    -->tr:nth-child(2n+0) /* represents every even row of an HTML table */
   9.844 +<!--
   9.845 +    -->tr:nth-child(2n) /* same */</pre>
   9.846    </div>
   9.847  
   9.848    <p>Whitespace is permitted after the "(", before the ")", and on either
   9.849 @@ -3053,22 +3126,25 @@
   9.850     <var>b</var> parts when both are present.
   9.851  
   9.852    <div class=example>
   9.853 -   <p>Valid Examples with white space:</p>
   9.854 -
   9.855 -   <pre>
   9.856 -  :nth-child( 3n + 1 )
   9.857 -  :nth-child( +3n - 2 )
   9.858 -  :nth-child( -n+ 6)
   9.859 -  :nth-child( +6 )
   9.860 -  </pre>
   9.861 -
   9.862 -   <p>Invalid Examples with white space:</p>
   9.863 -
   9.864 -   <pre>
   9.865 -  :nth-child(3 n)
   9.866 -  :nth-child(+ 2n)
   9.867 -  :nth-child(+ 2)
   9.868 -  </pre>
   9.869 +   <p>Valid Examples with white space:
   9.870 +
   9.871 +   <pre><!--
   9.872 +    -->:nth-child( 3n + 1 )
   9.873 +<!--
   9.874 +    -->:nth-child( +3n - 2 )
   9.875 +<!--
   9.876 +    -->:nth-child( -n+ 6)
   9.877 +<!--
   9.878 +    -->:nth-child( +6 )</pre>
   9.879 +
   9.880 +   <p>Invalid Examples with white space:
   9.881 +
   9.882 +   <pre><!--
   9.883 +    -->:nth-child(3 n)
   9.884 +<!--
   9.885 +    -->:nth-child(+ 2n)
   9.886 +<!--
   9.887 +    -->:nth-child(+ 2)</pre>
   9.888    </div>
   9.889  
   9.890    <p>If both <var>a</var> and <var>b</var> are equal to zero, the
   9.891 @@ -3079,7 +3155,7 @@
   9.892     represent an element in the document tree.
   9.893  
   9.894    <div class=example>
   9.895 -   <p>Example:</p>
   9.896 +   <p>Example:
   9.897  
   9.898     <pre>html|tr:nth-child(-n+6)  /* represents the 6 first rows of XHTML tables */</pre>
   9.899    </div>
   9.900 @@ -3100,12 +3176,16 @@
   9.901     class=css><code>odd</code></code>’ values as arguments.
   9.902  
   9.903    <div class=example>
   9.904 -   <p>Examples:</p>
   9.905 -
   9.906 -   <pre>tr:nth-last-child(-n+2)    /* represents the two last rows of an HTML table */
   9.907 -
   9.908 -  foo:nth-last-child(odd)    /* represents all odd foo elements in their parent element,
   9.909 -                                counting from the last one */</pre>
   9.910 +   <p>Examples:
   9.911 +
   9.912 +   <pre><!--
   9.913 +    -->tr:nth-last-child(-n+2)    /* represents the two last rows of an HTML table */
   9.914 +<!--
   9.915 +    -->
   9.916 +<!--
   9.917 +    -->foo:nth-last-child(odd)    /* represents all odd foo elements in their parent element,
   9.918 +<!--
   9.919 +    -->                              counting from the last one */</pre>
   9.920    </div>
   9.921  
   9.922    <h3 id=the-nth-of-type-pseudo><span class=secno>12.4. </span> <a
   9.923 @@ -3123,12 +3203,14 @@
   9.924     class=css><code>odd</code></code>’ values.
   9.925  
   9.926    <div class=example>
   9.927 -   <p>CSS example:</p>
   9.928 -
   9.929 -   <p>This allows an author to alternate the position of floated images:</p>
   9.930 -
   9.931 -   <pre>img:nth-of-type(2n+1) { float: right; }
   9.932 -  img:nth-of-type(2n) { float: left; }</pre>
   9.933 +   <p>CSS example:
   9.934 +
   9.935 +   <p>This allows an author to alternate the position of floated images:
   9.936 +
   9.937 +   <pre><!--
   9.938 +    -->img:nth-of-type(2n+1) { float: right; }
   9.939 +<!--
   9.940 +    -->img:nth-of-type(2n) { float: left; }</pre>
   9.941    </div>
   9.942  
   9.943    <h3 id=the-nth-last-of-type-pseudo><span class=secno>12.5. </span> <a
   9.944 @@ -3146,18 +3228,18 @@
   9.945     class=css><code>odd</code></code>’ values.
   9.946  
   9.947    <div class=example>
   9.948 -   <p>Example:</p>
   9.949 +   <p>Example:
   9.950  
   9.951     <p>To represent all <code>h2</code> children of an XHTML <code>body</code>
   9.952 -    except the first and last, one could use the following selector:</p>
   9.953 -
   9.954 -   <pre>body &gt; h2:nth-of-type(n+2):nth-last-of-type(n+2)</pre>
   9.955 +    except the first and last, one could use the following selector:
   9.956 +
   9.957 +   <pre>body > h2:nth-of-type(n+2):nth-last-of-type(n+2)</pre>
   9.958  
   9.959     <p>In this case, one could also use <a
   9.960      href="#negation-pseudo"><code>:not()</code></a>, although the selector
   9.961 -    ends up being just as long:</p>
   9.962 -
   9.963 -   <pre>body &gt; h2:not(:first-of-type):not(:last-of-type)</pre>
   9.964 +    ends up being just as long:
   9.965 +
   9.966 +   <pre>body > h2:not(:first-of-type):not(:last-of-type)</pre>
   9.967    </div>
   9.968  
   9.969    <h3 id=the-nth-match-pseudo><span class=secno>12.6. </span> <a
   9.970 @@ -3204,34 +3286,42 @@
   9.971     element that is the first child of some other element.
   9.972  
   9.973    <div class=example>
   9.974 -   <p>Examples:</p>
   9.975 +   <p>Examples:
   9.976  
   9.977     <p>The following selector represents a <code>p</code> element that is the
   9.978 -    first child of a <code>div</code> element:</p>
   9.979 -
   9.980 -   <pre>div &gt; p:first-child</pre>
   9.981 +    first child of a <code>div</code> element:
   9.982 +
   9.983 +   <pre>div > p:first-child</pre>
   9.984  
   9.985     <p>This selector can represent the <code>p</code> inside the
   9.986 -    <code>div</code> of the following fragment:</p>
   9.987 -
   9.988 -   <pre>
   9.989 -  &lt;p&gt; The last P before the note.&lt;/p&gt;
   9.990 -  &lt;div class="note"&gt;
   9.991 -     &lt;p&gt; The first P inside the note.&lt;/p&gt;
   9.992 -  &lt;/div&gt;</pre>
   9.993 +    <code>div</code> of the following fragment:
   9.994 +
   9.995 +   <pre><!--
   9.996 +    -->&lt;p> The last P before the note.&lt;/p>
   9.997 +<!--
   9.998 +    -->&lt;div class="note">
   9.999 +<!--
  9.1000 +       -->&lt;p> The first P inside the note.&lt;/p>
  9.1001 +<!--
  9.1002 +    -->&lt;/div></pre>
  9.1003     but cannot represent the second <code>p</code> in the following fragment:
  9.1004 -   <pre>
  9.1005 -  &lt;p&gt; The last P before the note.&lt;/p&gt;
  9.1006 -  &lt;div class="note"&gt;
  9.1007 -     &lt;h2&gt; Note &lt;/h2&gt;
  9.1008 -     &lt;p&gt; The first P inside the note.&lt;/p&gt;
  9.1009 -  &lt;/div&gt;</pre>
  9.1010 -
  9.1011 -   <p>The following two selectors are usually equivalent:</p>
  9.1012 -
  9.1013 -   <pre>
  9.1014 -  * &gt; a:first-child /* a is first child of any element */
  9.1015 -  a:first-child /* Same (assuming a is not the root element) */</pre>
  9.1016 +   <pre><!--
  9.1017 +    -->&lt;p> The last P before the note.&lt;/p>
  9.1018 +<!--
  9.1019 +    -->&lt;div class="note">
  9.1020 +<!--
  9.1021 +       -->&lt;h2> Note &lt;/h2>
  9.1022 +<!--
  9.1023 +       -->&lt;p> The first P inside the note.&lt;/p>
  9.1024 +<!--
  9.1025 +    -->&lt;/div></pre>
  9.1026 +
  9.1027 +   <p>The following two selectors are usually equivalent:
  9.1028 +
  9.1029 +   <pre><!--
  9.1030 +    -->* > a:first-child /* a is first child of any element */
  9.1031 +<!--
  9.1032 +    -->a:first-child /* Same (assuming a is not the root element) */</pre>
  9.1033    </div>
  9.1034  
  9.1035    <h3 id=the-last-child-pseudo><span class=secno>12.9. </span> <a
  9.1036 @@ -3242,12 +3332,12 @@
  9.1037     that is the last child of some other element.
  9.1038  
  9.1039    <div class=example>
  9.1040 -   <p>Example:</p>
  9.1041 +   <p>Example:
  9.1042  
  9.1043     <p>The following selector represents a list item <code>li</code> that is
  9.1044      the last child of an ordered list <code>ol</code>.
  9.1045  
  9.1046 -   <pre>ol &gt; li:last-child</pre>
  9.1047 +   <pre>ol > li:last-child</pre>
  9.1048    </div>
  9.1049  
  9.1050    <h3 id=the-first-of-type-pseudo><span class=secno>12.10. </span> <a
  9.1051 @@ -3259,29 +3349,39 @@
  9.1052     its parent element.
  9.1053  
  9.1054    <div class=example>
  9.1055 -   <p>Example:</p>
  9.1056 +   <p>Example:
  9.1057  
  9.1058     <p>The following selector represents a definition title <code>dt</code>
  9.1059      inside a definition list <code>dl</code>, this <code>dt</code> being the
  9.1060 -    first of its type in the list of children of its parent element.</p>
  9.1061 +    first of its type in the list of children of its parent element.
  9.1062  
  9.1063     <pre>dl dt:first-of-type</pre>
  9.1064  
  9.1065     <p>It is a valid description for the first two <code>dt</code> elements in
  9.1066 -    the following example but not for the third one:</p>
  9.1067 -
  9.1068 -   <pre>
  9.1069 -  &lt;dl&gt;
  9.1070 -   &lt;dt&gt;gigogne&lt;/dt&gt;
  9.1071 -   &lt;dd&gt;
  9.1072 -    &lt;dl&gt;
  9.1073 -     &lt;dt&gt;fusée&lt;/dt&gt;
  9.1074 -     &lt;dd&gt;multistage rocket&lt;/dd&gt;
  9.1075 -     &lt;dt&gt;table&lt;/dt&gt;
  9.1076 -     &lt;dd&gt;nest of tables&lt;/dd&gt;
  9.1077 -    &lt;/dl&gt;
  9.1078 -   &lt;/dd&gt;
  9.1079 -  &lt;/dl&gt;</pre>
  9.1080 +    the following example but not for the third one:
  9.1081 +
  9.1082 +   <pre><!--
  9.1083 +    -->&lt;dl>
  9.1084 +<!--
  9.1085 +     -->&lt;dt>gigogne&lt;/dt>
  9.1086 +<!--
  9.1087 +     -->&lt;dd>
  9.1088 +<!--
  9.1089 +      -->&lt;dl>
  9.1090 +<!--
  9.1091 +       -->&lt;dt>fusée&lt;/dt>
  9.1092 +<!--
  9.1093 +       -->&lt;dd>multistage rocket&lt;/dd>
  9.1094 +<!--
  9.1095 +       -->&lt;dt>table&lt;/dt>
  9.1096 +<!--
  9.1097 +       -->&lt;dd>nest of tables&lt;/dd>
  9.1098 +<!--
  9.1099 +      -->&lt;/dl>
  9.1100 +<!--
  9.1101 +     -->&lt;/dd>
  9.1102 +<!--
  9.1103 +    -->&lt;/dl></pre>
  9.1104    </div>
  9.1105  
  9.1106    <h3 id=the-last-of-type-pseudo><span class=secno>12.11. </span> <a
  9.1107 @@ -3293,12 +3393,12 @@
  9.1108     its parent element.
  9.1109  
  9.1110    <div class=example>
  9.1111 -   <p>Example:</p>
  9.1112 +   <p>Example:
  9.1113  
  9.1114     <p>The following selector represents the last data cell <code>td</code> of
  9.1115 -    a table row <code>tr</code>.</p>
  9.1116 -
  9.1117 -   <pre>tr &gt; td:last-of-type</pre>
  9.1118 +    a table row <code>tr</code>.
  9.1119 +
  9.1120 +   <pre>tr > td:last-of-type</pre>
  9.1121    </div>
  9.1122  
  9.1123    <h3 id=the-only-child-pseudo><span class=secno>12.12. </span> <a
  9.1124 @@ -3333,21 +3433,21 @@
  9.1125     considered empty or not.
  9.1126  
  9.1127    <div class=example>
  9.1128 -   <p>Examples:</p>
  9.1129 +   <p>Examples:
  9.1130  
  9.1131     <p><code>p:empty</code> is a valid representation of the following
  9.1132 -    fragment:</p>
  9.1133 -
  9.1134 -   <pre>&lt;p&gt;&lt;/p&gt;</pre>
  9.1135 +    fragment:
  9.1136 +
  9.1137 +   <pre>&lt;p>&lt;/p></pre>
  9.1138  
  9.1139     <p><code>foo:empty</code> is not a valid representation for the following
  9.1140 -    fragments:</p>
  9.1141 -
  9.1142 -   <pre>&lt;foo&gt;bar&lt;/foo&gt;</pre>
  9.1143 -
  9.1144 -   <pre>&lt;foo&gt;&lt;bar&gt;bla&lt;/bar&gt;&lt;/foo&gt;</pre>
  9.1145 -
  9.1146 -   <pre>&lt;foo&gt;this is not &lt;bar&gt;:empty&lt;/bar&gt;&lt;/foo&gt;</pre>
  9.1147 +    fragments:
  9.1148 +
  9.1149 +   <pre>&lt;foo>bar&lt;/foo></pre>
  9.1150 +
  9.1151 +   <pre>&lt;foo>&lt;bar>bla&lt;/bar>&lt;/foo></pre>
  9.1152 +
  9.1153 +   <pre>&lt;foo>this is not &lt;bar>:empty&lt;/bar>&lt;/foo></pre>
  9.1154    </div>
  9.1155  
  9.1156    <h2 id=combinators><span class=secno>13. </span> Combinators</h2>
  9.1157 @@ -3366,21 +3466,22 @@
  9.1158     arbitrary descendant of some ancestor element <code>A</code>.
  9.1159  
  9.1160    <div class=example>
  9.1161 -   <p>Examples:</p>
  9.1162 -
  9.1163 -   <p>For example, consider the following selector:</p>
  9.1164 +   <p>Examples:
  9.1165 +
  9.1166 +   <p>For example, consider the following selector:
  9.1167  
  9.1168     <pre>h1 em</pre>
  9.1169  
  9.1170     <p>It represents an <code>em</code> element being the descendant of an
  9.1171      <code>h1</code> element. It is a correct and valid, but partial,
  9.1172 -    description of the following fragment:</p>
  9.1173 -
  9.1174 -   <pre>
  9.1175 -  &lt;h1&gt;This &lt;span class="myclass"&gt;headline
  9.1176 -  is &lt;em&gt;very&lt;/em&gt; important&lt;/span&gt;&lt;/h1&gt;</pre>
  9.1177 -
  9.1178 -   <p>The following selector:</p>
  9.1179 +    description of the following fragment:
  9.1180 +
  9.1181 +   <pre><!--
  9.1182 +    -->&lt;h1>This &lt;span class="myclass">headline
  9.1183 +<!--
  9.1184 +    -->is &lt;em>very&lt;/em> important&lt;/span>&lt;/h1></pre>
  9.1185 +
  9.1186 +   <p>The following selector:
  9.1187  
  9.1188     <pre>div * p</pre>
  9.1189  
  9.1190 @@ -3389,12 +3490,12 @@
  9.1191      side of the "*" is not part of the universal selector; the whitespace is
  9.1192      a combinator indicating that the <code>div</code> must be the ancestor of
  9.1193      some element, and that that element must be an ancestor of the
  9.1194 -    <code>p</code>.</p>
  9.1195 +    <code>p</code>.
  9.1196  
  9.1197     <p>The following selector, which combines descendant combinators and <a
  9.1198      href="#attribute-selectors">attribute selectors</a>, represents an
  9.1199      element that (1) has the <code>href</code> attribute set and (2) is
  9.1200 -    inside a <code>p</code> that is itself inside a <code>div</code>:</p>
  9.1201 +    inside a <code>p</code> that is itself inside a <code>div</code>:
  9.1202  
  9.1203     <pre>div p *[href]</pre>
  9.1204    </div>
  9.1205 @@ -3403,27 +3504,27 @@
  9.1206  
  9.1207    <p>A <dfn id=child-combinator>child combinator</dfn> describes a childhood
  9.1208     relationship between two elements. A child combinator is made of the
  9.1209 -   &quot;greater-than sign&quot; (U+003E, <code>&gt;</code>) character and
  9.1210 +   &quot;greater-than sign&quot; (U+003E, <code>></code>) character and
  9.1211     separates two <a href="#compound"><i>compound selectors</i></a>.
  9.1212  
  9.1213    <div class=example>
  9.1214 -   <p>Examples:</p>
  9.1215 +   <p>Examples:
  9.1216  
  9.1217     <p>The following selector represents a <code>p</code> element that is
  9.1218 -    child of <code>body</code>:</p>
  9.1219 -
  9.1220 -   <pre>body &gt; p</pre>
  9.1221 +    child of <code>body</code>:
  9.1222 +
  9.1223 +   <pre>body > p</pre>
  9.1224  
  9.1225     <p>The following example combines descendant combinators and child
  9.1226 -    combinators.</p>
  9.1227 -
  9.1228 -   <pre>div ol&gt;li p</pre>
  9.1229 +    combinators.
  9.1230 +
  9.1231 +   <pre>div ol>li p</pre>
  9.1232     <!-- LEAVE THOSE SPACES OUT! see below -->
  9.1233     <p>It represents a <code>p</code> element that is a descendant of an
  9.1234      <code>li</code> element; the <code>li</code> element must be the child of
  9.1235      an <code>ol</code> element; the <code>ol</code> element must be a
  9.1236      descendant of a <code>div</code>. Notice that the optional white space
  9.1237 -    around the "&gt;" combinator has been left out.</p>
  9.1238 +    around the ">" combinator has been left out.
  9.1239    </div>
  9.1240  
  9.1241    <p>For information on selecting the first child of an element, please see
  9.1242 @@ -3444,17 +3545,17 @@
  9.1243     when considering the adjacency of elements.
  9.1244  
  9.1245    <div class=example>
  9.1246 -   <p>Examples:</p>
  9.1247 +   <p>Examples:
  9.1248  
  9.1249     <p>The following selector represents a <code>p</code> element immediately
  9.1250 -    following a <code>math</code> element:</p>
  9.1251 +    following a <code>math</code> element:
  9.1252  
  9.1253     <pre>math + p</pre>
  9.1254  
  9.1255     <p>The following selector is conceptually similar to the one in the
  9.1256      previous example, except that it adds an attribute selector — it adds a
  9.1257      constraint to the <code>h1</code> element, that it must have
  9.1258 -    <code>class="opener"</code>:</p>
  9.1259 +    <code>class="opener"</code>:
  9.1260  
  9.1261     <pre>h1.opener + h2</pre>
  9.1262    </div>
  9.1263 @@ -3472,17 +3573,17 @@
  9.1264     the second one.
  9.1265  
  9.1266    <div class=example>
  9.1267 -   <p>Example:</p>
  9.1268 +   <p>Example:
  9.1269  
  9.1270     <pre>h1 ~ pre</pre>
  9.1271  
  9.1272     <p>represents a <code>pre</code> element following an <code>h1</code>. It
  9.1273 -    is a correct and valid, but partial, description of:</p>
  9.1274 +    is a correct and valid, but partial, description of:
  9.1275  
  9.1276     <pre>
  9.1277 -  &lt;h1&gt;Definition of the function a&lt;/h1&gt;
  9.1278 -  &lt;p&gt;Function a(x) has to be applied to all figures in the table.&lt;/p&gt;
  9.1279 -  &lt;pre&gt;function a(x) = 12x/13.5&lt;/pre&gt;</pre>
  9.1280 +  &lt;h1>Definition of the function a&lt;/h1>
  9.1281 +  &lt;p>Function a(x) has to be applied to all figures in the table.&lt;/p>
  9.1282 +  &lt;pre>function a(x) = 12x/13.5&lt;/pre></pre>
  9.1283    </div>
  9.1284  
  9.1285    <h3 id=idref-combinators><span class=secno>13.5. </span> Reference
  9.1286 @@ -3506,17 +3607,23 @@
  9.1287     selectors</a>.
  9.1288  
  9.1289    <div class=example>
  9.1290 -   <p>The following example highlights an <code>&lt;input&gt;</code> element
  9.1291 +   <p>The following example highlights an <code>&lt;input></code> element
  9.1292      when its <a
  9.1293 -    href="http://www.w3.org/TR/html40/interact/forms.html#h-17.9"><code>&lt;label&gt;</code></a>
  9.1294 -    is focused or hovered-over:</p>
  9.1295 -
  9.1296 -   <pre>label:matches(:hover, :focus) /for/ input,       /* association by "for" attribute */
  9.1297 -<!--  -->label:matches(:hover, :focus):not([for]) input { /* association by containment */
  9.1298 -<!--  -->  box-shadow: yellow 0 0 10px; }</pre>
  9.1299 +    href="http://www.w3.org/TR/html40/interact/forms.html#h-17.9"><code>&lt;label></code></a>
  9.1300 +    is focused or hovered-over:
  9.1301 +
  9.1302 +   <pre><!--
  9.1303 +    -->label:matches(:hover, :focus) /for/ input,       /* association by "for" attribute */
  9.1304 +<!--
  9.1305 +    -->label:matches(:hover, :focus):not([for]) input { /* association by containment */
  9.1306 +<!--
  9.1307 +      -->box-shadow: yellow 0 0 10px; 
  9.1308 +<!--
  9.1309 +    -->}</pre>
  9.1310    </div>
  9.1311  
  9.1312    <p class=issue>This could also be implemented as a functional pseudo-class.
  9.1313 +   
  9.1314  
  9.1315    <h2 id=column-selectors><span class=secno>14. </span> Grid-Structural
  9.1316     Selectors</h2>
  9.1317 @@ -3546,18 +3653,24 @@
  9.1318     represented by a selector indicating membership in any of those columns.
  9.1319  
  9.1320    <div class=example>
  9.1321 -   <p>The following example makes cells C, E, and G yellow.</p>
  9.1322 +   <p>The following example makes cells C, E, and G yellow.
  9.1323  
  9.1324     <pre>col.selected || td { background: yellow; }</pre>
  9.1325  
  9.1326 -   <pre>
  9.1327 -<!-- -->&lt;table>
  9.1328 -<!-- -->  &lt;col span="2">
  9.1329 -<!-- -->  &lt;col class="selected">
  9.1330 -<!-- -->  &lt;tr>&lt;td>A &lt;td>B &lt;td>C
  9.1331 -<!-- -->  &lt;tr>&lt;td span="2">D &lt;td>E
  9.1332 -<!-- -->  &lt;tr>&lt;td>F &lt;td span="2">G
  9.1333 -<!-- -->&lt;/table></pre>
  9.1334 +   <pre><!--
  9.1335 +    -->&lt;table>
  9.1336 +<!--
  9.1337 +    -->  &lt;col span="2">
  9.1338 +<!--
  9.1339 +    -->  &lt;col class="selected">
  9.1340 +<!--
  9.1341 +    -->  &lt;tr>&lt;td>A &lt;td>B &lt;td>C
  9.1342 +<!--
  9.1343 +    -->  &lt;tr>&lt;td span="2">D &lt;td>E
  9.1344 +<!--
  9.1345 +    -->  &lt;tr>&lt;td>F &lt;td span="2">G
  9.1346 +<!--
  9.1347 +    -->&lt;/table></pre>
  9.1348    </div>
  9.1349  
  9.1350    <h3 id=the-nth-column-pseudo><span class=secno>14.2. </span> <a
  9.1351 @@ -3628,19 +3741,23 @@
  9.1352     base) gives the specificity.
  9.1353  
  9.1354    <div class=example>
  9.1355 -   <p>Examples:</p>
  9.1356 -
  9.1357 -   <pre>
  9.1358 -  *               /* a=0 b=0 c=0 -&gt; specificity =   0 */
  9.1359 -  LI              /* a=0 b=0 c=1 -&gt; specificity =   1 */
  9.1360 -  UL LI           /* a=0 b=0 c=2 -&gt; specificity =   2 */
  9.1361 -  UL OL+LI        /* a=0 b=0 c=3 -&gt; specificity =   3 */
  9.1362 -  H1 + *[REL=up]  /* a=0 b=1 c=1 -&gt; specificity =  11 */
  9.1363 -  UL OL LI.red    /* a=0 b=1 c=3 -&gt; specificity =  13 */
  9.1364 -  LI.red.level    /* a=0 b=2 c=1 -&gt; specificity =  21 */
  9.1365 -  #x34y           /* a=1 b=0 c=0 -&gt; specificity = 100 */
  9.1366 -  #s12:not(FOO)   /* a=1 b=0 c=1 -&gt; specificity = 101 */
  9.1367 -  </pre>
  9.1368 +   <p>Examples: id="the-" <!--
  9.1369 +    -->* /* a=0 b=0 c=0 -> specificity = 0 */
  9.1370 +    <!--
  9.1371 +    -->LI /* a=0 b=0 c=1 -> specificity = 1 */ <!--
  9.1372 +    -->UL LI /*
  9.1373 +    a=0 b=0 c=2 -> specificity = 2 */ <!--
  9.1374 +    -->UL OL+LI /* a=0 b=0 c=3 ->
  9.1375 +    specificity = 3 */ <!--
  9.1376 +    -->H1 + *[REL=up] /* a=0 b=1 c=1 ->
  9.1377 +    specificity = 11 */ <!--
  9.1378 +    -->UL OL LI.red /* a=0 b=1 c=3 ->
  9.1379 +    specificity = 13 */ <!--
  9.1380 +    -->LI.red.level /* a=0 b=2 c=1 ->
  9.1381 +    specificity = 21 */ <!--
  9.1382 +    -->#x34y /* a=1 b=0 c=0 -> specificity = 100
  9.1383 +    */ <!--
  9.1384 +    -->#s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */
  9.1385    </div>
  9.1386  
  9.1387    <p class=note><strong>Note:</strong> Repeated occurrances of the same
  9.1388 @@ -3677,81 +3794,82 @@
  9.1389  
  9.1390    <p>The productions are:
  9.1391  
  9.1392 -  <pre>selectors_group
  9.1393 -    : selector [ COMMA S* selector ]*
  9.1394 -    ;
  9.1395 -
  9.1396 -  selector
  9.1397 -    : compound_selector [ combinator simple_selector_sequence ]*
  9.1398 -    ;
  9.1399 -
  9.1400 -  combinator
  9.1401 -    /* combinators can be surrounded by whitespace */
  9.1402 -    : PLUS S* | GREATER S* | TILDE S* | S+
  9.1403 -    ;
  9.1404 -
  9.1405 -  simple_selector_sequence
  9.1406 -    : [ type_selector | universal ]
  9.1407 -      [ HASH | class | attrib | pseudo | negation ]*
  9.1408 -    | [ HASH | class | attrib | pseudo | negation ]+
  9.1409 -    ;
  9.1410 -
  9.1411 -  type_selector
  9.1412 -    : [ namespace_prefix ]? element_name
  9.1413 -    ;
  9.1414 -
  9.1415 -  namespace_prefix
  9.1416 -    : [ IDENT | '*' ]? '|'
  9.1417 -    ;
  9.1418 -
  9.1419 -  element_name
  9.1420 -    : IDENT
  9.1421 -    ;
  9.1422 -
  9.1423 -  universal
  9.1424 -    : [ namespace_prefix ]? '*'
  9.1425 -    ;
  9.1426 -
  9.1427 -  class
  9.1428 -    : '.' IDENT
  9.1429 -    ;
  9.1430 -
  9.1431 -  attrib
  9.1432 -    : '[' S* [ namespace_prefix ]? IDENT S*
  9.1433 -          [ [ PREFIXMATCH |
  9.1434 -              SUFFIXMATCH |
  9.1435 -              SUBSTRINGMATCH |
  9.1436 -              '=' |
  9.1437 -              INCLUDES |
  9.1438 -              DASHMATCH ] S* [ IDENT | STRING ] S* [IDENT S*]?
  9.1439 -          ]? ']'
  9.1440 -    ;
  9.1441 -
  9.1442 -  pseudo
  9.1443 -    /* '::' starts a pseudo-element, ':' a pseudo-class */
  9.1444 -    /* Exceptions: :first-line, :first-letter, :before and :after. */
  9.1445 -    /* Note that pseudo-elements are restricted to one per selector and */
  9.1446 -    /* occur only in the last compound_selector. */
  9.1447 -    : ':' ':'? [ IDENT | functional_pseudo ]
  9.1448 -    ;
  9.1449 -
  9.1450 -  functional_pseudo
  9.1451 -    : FUNCTION S* expression ')'
  9.1452 -    ;
  9.1453 -
  9.1454 -  expression
  9.1455 -    /* In CSS3, the expressions are identifiers, strings, */
  9.1456 -    /* or of the form "an+b" */
  9.1457 -    : [ [ PLUS | '-' | DIMENSION | NUMBER | STRING | IDENT ] S* ]+
  9.1458 -    ;
  9.1459 -
  9.1460 -  negation
  9.1461 -    : NOT S* negation_arg S* ')'
  9.1462 -    ;
  9.1463 -
  9.1464 -  negation_arg
  9.1465 -    : type_selector | universal | HASH | class | attrib | pseudo
  9.1466 -    ;</pre>
  9.1467 +  <pre>
  9.1468 +    selectors_group
  9.1469 +      : selector [ COMMA S* selector ]*
  9.1470 +      ;
  9.1471 +
  9.1472 +    selector
  9.1473 +      : compound_selector [ combinator simple_selector_sequence ]*
  9.1474 +      ;
  9.1475 +
  9.1476 +    combinator
  9.1477 +      /* combinators can be surrounded by whitespace */
  9.1478 +      : PLUS S* | GREATER S* | TILDE S* | S+
  9.1479 +      ;
  9.1480 +
  9.1481 +    simple_selector_sequence
  9.1482 +      : [ type_selector | universal ]
  9.1483 +        [ HASH | class | attrib | pseudo | negation ]*
  9.1484 +      | [ HASH | class | attrib | pseudo | negation ]+
  9.1485 +      ;
  9.1486 +
  9.1487 +    type_selector
  9.1488 +      : [ namespace_prefix ]? element_name
  9.1489 +      ;
  9.1490 +
  9.1491 +    namespace_prefix
  9.1492 +      : [ IDENT | '*' ]? '|'
  9.1493 +      ;
  9.1494 +
  9.1495 +    element_name
  9.1496 +      : IDENT
  9.1497 +      ;
  9.1498 +
  9.1499 +    universal
  9.1500 +      : [ namespace_prefix ]? '*'
  9.1501 +      ;
  9.1502 +
  9.1503 +    class
  9.1504 +      : '.' IDENT
  9.1505 +      ;
  9.1506 +
  9.1507 +    attrib
  9.1508 +      : '[' S* [ namespace_prefix ]? IDENT S*
  9.1509 +            [ [ PREFIXMATCH |
  9.1510 +                SUFFIXMATCH |
  9.1511 +                SUBSTRINGMATCH |
  9.1512 +                '=' |
  9.1513 +                INCLUDES |
  9.1514 +                DASHMATCH ] S* [ IDENT | STRING ] S* [IDENT S*]?
  9.1515 +            ]? ']'
  9.1516 +      ;
  9.1517 +
  9.1518 +    pseudo
  9.1519 +      /* '::' starts a pseudo-element, ':' a pseudo-class */
  9.1520 +      /* Exceptions: :first-line, :first-letter, :before and :after. */
  9.1521 +      /* Note that pseudo-elements are restricted to one per selector and */
  9.1522 +      /* occur only in the last compound_selector. */
  9.1523 +      : ':' ':'? [ IDENT | functional_pseudo ]
  9.1524 +      ;
  9.1525 +
  9.1526 +    functional_pseudo
  9.1527 +      : FUNCTION S* expression ')'
  9.1528 +      ;
  9.1529 +
  9.1530 +    expression
  9.1531 +      /* In CSS3, the expressions are identifiers, strings, */
  9.1532 +      /* or of the form "an+b" */
  9.1533 +      : [ [ PLUS | '-' | DIMENSION | NUMBER | STRING | IDENT ] S* ]+
  9.1534 +      ;
  9.1535 +
  9.1536 +    negation
  9.1537 +      : NOT S* negation_arg S* ')'
  9.1538 +      ;
  9.1539 +
  9.1540 +    negation_arg
  9.1541 +      : type_selector | universal | HASH | class | attrib | pseudo
  9.1542 +      ;</pre>
  9.1543  
  9.1544    <h3 id=lex><span class=secno>16.2. </span> Lexical scanner</h3>
  9.1545  
  9.1546 @@ -3765,62 +3883,116 @@
  9.1547     point in Unicode/ISO-10646. <a href="#UNICODE"
  9.1548     rel=biblioentry>[UNICODE]<!--{{!UNICODE}}--></a>
  9.1549  
  9.1550 -  <pre>
  9.1551 -  %option case-insensitive
  9.1552 -
  9.1553 -  ident     [-]?{nmstart}{nmchar}*
  9.1554 -  name      {nmchar}+
  9.1555 -  nmstart   [_a-z]|{nonascii}|{escape}
  9.1556 -  nonascii  [^\0-\177]
  9.1557 -  unicode   \\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])?
  9.1558 -  escape    {unicode}|\\[^\n\r\f0-9a-f]
  9.1559 -  nmchar    [_a-z0-9-]|{nonascii}|{escape}
  9.1560 -  num       [0-9]+|[0-9]*\.[0-9]+
  9.1561 -  string    {string1}|{string2}
  9.1562 -  string1   \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*\"
  9.1563 -  string2   \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*\'
  9.1564 -  invalid   {invalid1}|{invalid2}
  9.1565 -  invalid1  \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*
  9.1566 -  invalid2  \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*
  9.1567 -  nl        \n|\r\n|\r|\f
  9.1568 -  w         [ \t\r\n\f]*
  9.1569 -
  9.1570 -  D         d|\\0{0,4}(44|64)(\r\n|[ \t\r\n\f])?
  9.1571 -  E         e|\\0{0,4}(45|65)(\r\n|[ \t\r\n\f])?
  9.1572 -  N         n|\\0{0,4}(4e|6e)(\r\n|[ \t\r\n\f])?|\\n
  9.1573 -  O         o|\\0{0,4}(4f|6f)(\r\n|[ \t\r\n\f])?|\\o
  9.1574 -  T         t|\\0{0,4}(54|74)(\r\n|[ \t\r\n\f])?|\\t
  9.1575 -  V         v|\\0{0,4}(58|78)(\r\n|[ \t\r\n\f])?|\\v
  9.1576 -
  9.1577 -  %%
  9.1578 -
  9.1579 -  [ \t\r\n\f]+     return S;
  9.1580 -
  9.1581 -  "~="             return INCLUDES;
  9.1582 -  "|="             return DASHMATCH;
  9.1583 -  "^="             return PREFIXMATCH;
  9.1584 -  "$="             return SUFFIXMATCH;
  9.1585 -  "*="             return SUBSTRINGMATCH;
  9.1586 -  {ident}          return IDENT;
  9.1587 -  {string}         return STRING;
  9.1588 -  {ident}"("       return FUNCTION;
  9.1589 -  {num}            return NUMBER;
  9.1590 -  "#"{name}        return HASH;
  9.1591 -  {w}"+"           return PLUS;
  9.1592 -  {w}"&gt;"           return GREATER;
  9.1593 -  {w}","           return COMMA;
  9.1594 -  {w}"~"           return TILDE;
  9.1595 -  ":"{N}{O}{T}"("  return NOT;
  9.1596 -  @{ident}         return ATKEYWORD;
  9.1597 -  {invalid}        return INVALID;
  9.1598 -  {num}%           return PERCENTAGE;
  9.1599 -  {num}{ident}     return DIMENSION;
  9.1600 -  "&lt;!--"           return CDO;
  9.1601 -  "--&gt;"            return CDC;
  9.1602 -
  9.1603 -  \/\*[^*]*\*+([^/*][^*]*\*+)*\/                    /* ignore comments */
  9.1604 -
  9.1605 -  .                return *yytext;</pre>
  9.1606 +  <pre><!--
  9.1607 +  -->%option case-insensitive
  9.1608 +<!--
  9.1609 +  -->
  9.1610 +<!--
  9.1611 +  -->ident     [-]?{nmstart}{nmchar}*
  9.1612 +<!--
  9.1613 +  -->name      {nmchar}+
  9.1614 +<!--
  9.1615 +  -->nmstart   [_a-z]|{nonascii}|{escape}
  9.1616 +<!--
  9.1617 +  -->nonascii  [^\0-\177]
  9.1618 +<!--
  9.1619 +  -->unicode   \\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])?
  9.1620 +<!--
  9.1621 +  -->escape    {unicode}|\\[^\n\r\f0-9a-f]
  9.1622 +<!--
  9.1623 +  -->nmchar    [_a-z0-9-]|{nonascii}|{escape}
  9.1624 +<!--
  9.1625 +  -->num       [0-9]+|[0-9]*\.[0-9]+
  9.1626 +<!--
  9.1627 +  -->string    {string1}|{string2}
  9.1628 +<!--
  9.1629 +  -->string1   \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*\"
  9.1630 +<!--
  9.1631 +  -->string2   \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*\'
  9.1632 +<!--
  9.1633 +  -->invalid   {invalid1}|{invalid2}
  9.1634 +<!--
  9.1635 +  -->invalid1  \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*
  9.1636 +<!--
  9.1637 +  -->invalid2  \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*
  9.1638 +<!--
  9.1639 +  -->nl        \n|\r\n|\r|\f
  9.1640 +<!--
  9.1641 +  -->w         [ \t\r\n\f]*
  9.1642 +<!--
  9.1643 +  -->
  9.1644 +<!--
  9.1645 +  -->D         d|\\0{0,4}(44|64)(\r\n|[ \t\r\n\f])?
  9.1646 +<!--
  9.1647 +  -->E         e|\\0{0,4}(45|65)(\r\n|[ \t\r\n\f])?
  9.1648 +<!--
  9.1649 +  -->N         n|\\0{0,4}(4e|6e)(\r\n|[ \t\r\n\f])?|\\n
  9.1650 +<!--
  9.1651 +  -->O         o|\\0{0,4}(4f|6f)(\r\n|[ \t\r\n\f])?|\\o
  9.1652 +<!--
  9.1653 +  -->T         t|\\0{0,4}(54|74)(\r\n|[ \t\r\n\f])?|\\t
  9.1654 +<!--
  9.1655 +  -->V         v|\\0{0,4}(58|78)(\r\n|[ \t\r\n\f])?|\\v
  9.1656 +<!--
  9.1657 +  -->
  9.1658 +<!--
  9.1659 +  -->%%
  9.1660 +<!--
  9.1661 +  -->
  9.1662 +<!--
  9.1663 +  -->[ \t\r\n\f]+     return S;
  9.1664 +<!--
  9.1665 +  -->
  9.1666 +<!--
  9.1667 +  -->"~="             return INCLUDES;
  9.1668 +<!--
  9.1669 +  -->"|="             return DASHMATCH;
  9.1670 +<!--
  9.1671 +  -->"^="             return PREFIXMATCH;
  9.1672 +<!--
  9.1673 +  -->"$="             return SUFFIXMATCH;
  9.1674 +<!--
  9.1675 +  -->"*="             return SUBSTRINGMATCH;
  9.1676 +<!--
  9.1677 +  -->{ident}          return IDENT;
  9.1678 +<!--
  9.1679 +  -->{string}         return STRING;
  9.1680 +<!--
  9.1681 +  -->{ident}"("       return FUNCTION;
  9.1682 +<!--
  9.1683 +  -->{num}            return NUMBER;
  9.1684 +<!--
  9.1685 +  -->"#"{name}        return HASH;
  9.1686 +<!--
  9.1687 +  -->{w}"+"           return PLUS;
  9.1688 +<!--
  9.1689 +  -->{w}">"           return GREATER;
  9.1690 +<!--
  9.1691 +  -->{w}","           return COMMA;
  9.1692 +<!--
  9.1693 +  -->{w}"~"           return TILDE;
  9.1694 +<!--
  9.1695 +  -->":"{N}{O}{T}"("  return NOT;
  9.1696 +<!--
  9.1697 +  -->@{ident}         return ATKEYWORD;
  9.1698 +<!--
  9.1699 +  -->{invalid}        return INVALID;
  9.1700 +<!--
  9.1701 +  -->{num}%           return PERCENTAGE;
  9.1702 +<!--
  9.1703 +  -->{num}{ident}     return DIMENSION;
  9.1704 +<!--
  9.1705 +  -->"&lt;!--"           return CDO;
  9.1706 +<!--
  9.1707 +  -->"-->"            return CDC;
  9.1708 +<!--
  9.1709 +  -->
  9.1710 +<!--
  9.1711 +  -->\/\*[^*]*\*+([^/*][^*]*\*+)*\/                    /* ignore comments */
  9.1712 +<!--
  9.1713 +  -->
  9.1714 +<!--
  9.1715 +  -->.                return *yytext;</pre>
  9.1716  
  9.1717    <h2 id=profiling><span class=secno>17. </span> Profiles</h2>
  9.1718  
  9.1719 @@ -3981,7 +4153,7 @@
  9.1720     <code>class="example"</code>, like this:
  9.1721  
  9.1722    <div class=example>
  9.1723 -   <p>This is an example of an informative example.</p>
  9.1724 +   <p>This is an example of an informative example.
  9.1725    </div>
  9.1726  
  9.1727    <p>Informative notes begin with the word “Note” and are set apart from
  9.1728 @@ -4054,16 +4226,16 @@
  9.1729     names. This avoids any incompatibilities with future changes in the draft.
  9.1730     Once a specification reaches the Candidate Recommendation stage,
  9.1731     implementors should implement the non-prefixed syntax for any feature they
  9.1732 -   consider to be correctly implemented according to spec.</p>
  9.1733 -  <!--
  9.1734 +   consider to be correctly implemented according to spec. <!--
  9.1735    <h2 id="Tests">Tests</h2>
  9.1736  
  9.1737    <p>This specification has <a
  9.1738    href="http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/">a test
  9.1739    suite</a> allowing user agents to verify their basic conformance to
  9.1740    the specification. This test suite does not pretend to be exhaustive
  9.1741 -  and does not cover all possible combined cases of Selectors.</p>
  9.1742 +  and does not cover all possible combined cases of Selectors.
  9.1743  -->
  9.1744 +   
  9.1745  
  9.1746    <h2 id=acknowledgements><span class=secno>19. </span> Acknowledgements</h2>
  9.1747  
    10.1 --- a/selectors4/Overview.src.html	Fri Aug 17 23:46:15 2012 +0200
    10.2 +++ b/selectors4/Overview.src.html	Fri Aug 17 23:51:31 2012 +0200
    10.3 @@ -43,7 +43,7 @@
    10.4  
    10.5      <dt>Previous Editors:
    10.6      <dd class="vcard"><a lang="tr" class="url fn" href="http://www.tantek.com/">Tantek &Ccedil;elik</a> (Microsoft)
    10.7 -    <dd class="vcard"><span class="fn">Daniel Glazman</span> (Disruptive Innovations SARL)</dd>
    10.8 +    <dd class="vcard"><span class="fn">Daniel Glazman</span> (Disruptive Innovations SARL)
    10.9      <dd class="vcard"><span class="fn">Ian Hickson</span> (Opera Softare ASA)
   10.10      <dd class="vcard"><span class="fn">Peter Linss</span> (Netscape/AOL)
   10.11      <dd class="vcard"><span class="fn">John Williams</span> (Quark, Inc.)
   10.12 @@ -65,11 +65,11 @@
   10.13    performance-critical code. They are a core component of
   10.14    <abbr title="Cascading Style Sheets">CSS</abbr> (Cascading
   10.15    Style Sheets), which uses Selectors to bind style properties to
   10.16 -  elements in the document.</p>
   10.17 +  elements in the document.
   10.18  
   10.19    <p>Selectors Level 4 describes the selectors that already exist in
   10.20    [[!SELECT]], and further introduces new selectors for CSS and
   10.21 -  other languages that may need them.</p>
   10.22 +  other languages that may need them.
   10.23  
   10.24    <h2 class="no-num no-toc" id="status">Status of this Document</h2>
   10.25  
   10.26 @@ -100,49 +100,63 @@
   10.27    <p>
   10.28      A selector is a boolean predicate
   10.29      that takes an element in a tree structure
   10.30 -    and answers whether the element matches the selector or not.
   10.31 +    and tests whether the element matches the selector or not.
   10.32  
   10.33    <p>
   10.34 -    These expressions can be used directly on an element to test whether it matches some criteria,
   10.35 -    such as in the <code>Element.matches()</code> function defined in [[SELECTORS-API2]],
   10.36 -    or alternately,
   10.37 -    can be applied to an entire tree of elements
   10.38 -    to filter it into a set of elements that match the criteria,
   10.39 -    such as in the selector in a CSS style rule.
   10.40 -
   10.41 -  <p>Selectors Levels 1, 2, and 3 are defined as the subsets of selector
   10.42 -  functionality defined in the <a href="http://www.w3.org/TR/REC-CSS1">CSS1</a>,
   10.43 -  <a href="http://www.w3.org/TR/CSS21/">CSS2.1</a>, and
   10.44 -  <a href="http://www.w3.org/TR/css3-selectors/">Selectors Level 3</a>
   10.45 -  specifications, respectively. This module defines Selectors Level 4.
   10.46 +    These expressions may be used for many things:
   10.47 +
   10.48 +  <ul>
   10.49 +    <li>
   10.50 +      directly on an element to test whether it matches some criteria,
   10.51 +      such as in the <code>Element.matches()</code> function defined in [[SELECTORS-API2]]
   10.52 +
   10.53 +    <li>
   10.54 +      applied to an entire tree of elements
   10.55 +      to filter it into a set of elements that match the criteria,
   10.56 +      such as in the <code>document.findAll()</code> function defined in [[SELECTORS-API2]]
   10.57 +      or the selector of a CSS style rule.
   10.58 +
   10.59 +    <li>
   10.60 +      used "in reverse" to generate markup that would match a given selector,
   10.61 +      such as in <a href="http://haml.info/">HAML</a> or <a href="http://en.wikipedia.org/wiki/Zen_Coding">Zen Coding</a>
   10.62 +  </ul>
   10.63 +    
   10.64 +
   10.65 +  <p>
   10.66 +    Selectors Levels 1, 2, and 3 are defined as the subsets of selector
   10.67 +    functionality defined in the <a href="http://www.w3.org/TR/REC-CSS1">CSS1</a>,
   10.68 +    <a href="http://www.w3.org/TR/CSS21/">CSS2.1</a>, and
   10.69 +    <a href="http://www.w3.org/TR/css3-selectors/">Selectors Level 3</a>
   10.70 +    specifications, respectively. This module defines Selectors Level 4.
   10.71  
   10.72  <h3 id="placement">Module Interactions</h3>
   10.73  
   10.74 -  <p>This module replaces the definitions for, and extends the set of
   10.75 -    selectors defined for CSS
   10.76 -    in [[SELECT]] and [[CSS21]].
   10.77 -
   10.78 -  <p>Pseudo-element selectors, which define abstract elements in a
   10.79 -  rendering tree, are not part of this specification: their generic syntax
   10.80 -  is described here, but, due to their close integration with the rendering
   10.81 -  model and irrelevance to other uses such as DOM queries, they will be
   10.82 -  defined in other modules.
   10.83 +  <p>This module replaces the definitions of 
   10.84 +    and extends the set of selectors defined for CSS in [[SELECT]] and [[CSS21]].
   10.85 +
   10.86 +  <p>
   10.87 +    Pseudo-element selectors, 
   10.88 +    which define abstract elements in a rendering tree, 
   10.89 +    are not part of this specification: 
   10.90 +    their generic syntax is described here, 
   10.91 +    but, due to their close integration with the rendering model and irrelevance to other uses such as DOM queries, 
   10.92 +    they will be defined in other modules.
   10.93  
   10.94  <h2 id="overview">
   10.95  Selectors Overview</h2>
   10.96  
   10.97    <p><em>This section is non-normative, as it merely summarizes the
   10.98 -  following sections.</em></p>
   10.99 +  following sections.</em>
  10.100  
  10.101    <p>A Selector represents a structure. This structure can be used as a
  10.102    condition (e.g. in a CSS rule) that determines which elements a
  10.103    selector matches in the document tree, or as a flat description of the
  10.104 -  HTML or XML fragment corresponding to that structure.</p>
  10.105 +  HTML or XML fragment corresponding to that structure.
  10.106  
  10.107    <p>Selectors may range from simple element names to rich contextual
  10.108 -  representations.</p>
  10.109 -
  10.110 -  <p>The following table summarizes the Selector syntax:</p>
  10.111 +  representations.
  10.112 +
  10.113 +  <p>The following table summarizes the Selector syntax:
  10.114  
  10.115    <table class="data">
  10.116      <col class="pattern">
  10.117 @@ -470,7 +484,7 @@
  10.118        <td><a href="#descendant-combinators">Descendant combinator</a>
  10.119        <td>1
  10.120      <tr>
  10.121 -      <td><code>E &gt; F</code>
  10.122 +      <td><code>E > F</code>
  10.123        <td>an F element child of an E element
  10.124        <td><a href="#child-combinators">Child combinator</a>
  10.125        <td>2
  10.126 @@ -490,7 +504,7 @@
  10.127        <td><a href="#idref-combinators">Reference combinator</a>
  10.128        <td>4
  10.129      <tr>
  10.130 -      <td><code>E! &gt; F</code>
  10.131 +      <td><code>E! > F</code>
  10.132        <td>an E element parent of an F element
  10.133        <td><a href="#subject">Determining the subject of a selector</a> +
  10.134            <a href="#child-combinators">Child combinator</a>
  10.135 @@ -499,7 +513,7 @@
  10.136  
  10.137    <p>The meaning of each selector is derived from the table above by
  10.138    prepending "matches" to the contents of each cell in the "Meaning"
  10.139 -  column.</p>
  10.140 +  column.
  10.141  
  10.142    <p class="note">Some Level 4 selectors (noted above as "3-UI") were
  10.143      introduced in [[CSS3UI]].
  10.144 @@ -536,13 +550,13 @@
  10.145    <p>A <dfn>combinator</dfn> is punctuation that represents a particular
  10.146    kind of relationship between the <i>compound selectors</i> on either side.
  10.147    Combinators in Selectors level 4 include: whitespace, &quot;greater-than
  10.148 -  sign&quot; (U+003E, <code>&gt;</code>), &quot;plus sign&quot; (U+002B,
  10.149 +  sign&quot; (U+003E, <code>></code>), &quot;plus sign&quot; (U+002B,
  10.150    <code>+</code>) and &quot;tilde&quot; (U+007E, <code>~</code>).
  10.151    <a href="#whitespace">White space</a> may appear between a combinator
  10.152 -  and the simple selectors around it.</p>
  10.153 +  and the simple selectors around it.
  10.154  
  10.155    <p>An empty selector, containing no <i>compound selector</i>, is an
  10.156 -  <a href="#invalid">invalid selector</a>.</p>
  10.157 +  <a href="#invalid">invalid selector</a>.
  10.158  
  10.159  <h3 id="subject">
  10.160  Determining the Subject of a Selector</h3>
  10.161 @@ -573,10 +587,10 @@
  10.162    <div class="example">
  10.163    <p>For example, the following selector represents a list item <code>LI</code>
  10.164      unique child of an ordered list <code>OL</code>:
  10.165 -    <pre>OL &gt; LI:only-child</pre>
  10.166 +    <pre>OL > LI:only-child</pre>
  10.167      <p>However the following one represents an ordered list <code>OL</code>
  10.168      having a unique child, that child being a <code>LI</code>:
  10.169 -    <pre>!OL &gt; LI:only-child</pre>
  10.170 +    <pre>!OL > LI:only-child</pre>
  10.171      <p>The tree structures represented by these two selectors are the same,
  10.172      but the subjects of the selectors are not.
  10.173    </div>
  10.174 @@ -627,13 +641,13 @@
  10.175  
  10.176    <p>The <dfn>pseudo-class</dfn> concept is introduced to permit selection based on
  10.177    information that lies outside of the document tree or that cannot be
  10.178 -  expressed using the other simple selectors.</p>
  10.179 +  expressed using the other simple selectors.
  10.180  
  10.181    <p>A <i>pseudo-class</i> always consists of a &quot;colon&quot;
  10.182    (<code>:</code>) followed by the name of the <i>pseudo-class</i> and, for
  10.183    functional pseudo-classes, by a value between parentheses.
  10.184    White space is optionally allowed between the parentheses and the
  10.185 -  argument, but not between the pseudo-class name and the parentheses.</p>
  10.186 +  argument, but not between the pseudo-class name and the parentheses.
  10.187  
  10.188    <p><i>Pseudo-classes</i> are allowed in all <i>compound selectors</i> contained in a selector.
  10.189    <i>Pseudo-classes</i> are allowed anywhere in a <i>compound selector</i>
  10.190 @@ -675,7 +689,7 @@
  10.191    for <i>pseudo-elements</i> introduced in CSS levels 1 and 2
  10.192    (namely, <code>:first-line</code>, <code>:first-letter</code>,
  10.193    <code>:before</code> and <code>:after</code>).
  10.194 -  This compatibility notation is not allowed any other <i>pseudo-elements</i>.</p>
  10.195 +  This compatibility notation is not allowed any other <i>pseudo-elements</i>.
  10.196    
  10.197    <p>Only one <i>pseudo-element</i> may appear per selector,
  10.198    and only if the subject of the selector is the last <i>compound selector</i> in the selector.
  10.199 @@ -683,7 +697,7 @@
  10.200    that represents the <a href="#subject">subjects</a> of the selector.
  10.201  
  10.202    <p class="note">A future version of this specification may allow
  10.203 -  multiple pseudo-elements per selector.</p>
  10.204 +  multiple pseudo-elements per selector.
  10.205  
  10.206    <p>Syntactically, a <i>pseudo-element</i> may be followed
  10.207    by any combination of the <a href="#useraction-pseudos">user action pseudo-classes</a>.
  10.208 @@ -711,7 +725,7 @@
  10.209    selectors depends on the document language. For example, in HTML,
  10.210    element names are case-insensitive, but in XML, they are
  10.211    case-sensitive. Case sensitivity of namespace prefixes is defined in
  10.212 -  [[!CSS3NAMESPACE]].</p>
  10.213 +  [[!CSS3NAMESPACE]].
  10.214  
  10.215    <p><dfn id="whitespace">White space</dfn> in Selectors consists of the
  10.216    characters SPACE (U+0020), TAB (U+0009), LINE FEED (U+000A),
  10.217 @@ -721,7 +735,7 @@
  10.218  
  10.219    <p>Characters in Selectors can be escaped with a backslash according
  10.220    to the same <a href="http://www.w3.org/TR/CSS21/syndata.html#characters">escaping
  10.221 -  rules</a> as CSS. [[!CSS21]].</p>
  10.222 +  rules</a> as CSS. [[!CSS21]].
  10.223  
  10.224  <h3 id="namespaces">
  10.225  Namespaces</h3>
  10.226 @@ -732,7 +746,7 @@
  10.227    not specify a namespace prefix declaration mechanism, then no prefixes
  10.228    are declared. In CSS, namespace prefixes are declared with the
  10.229    <a href="http://www.w3.org/TR/css3-namespace/#declaration"><code>@namespace</code></a>
  10.230 -  rule. [[!CSS3NAMESPACE]]</p>
  10.231 +  rule. [[!CSS3NAMESPACE]]
  10.232  
  10.233  <h3 id="invalid">
  10.234  Invalid Selectors and Error Handling</h3>
  10.235 @@ -742,16 +756,16 @@
  10.236  
  10.237    <p>User agents must observe the rules for handling parsing errors:
  10.238    <ul>
  10.239 -    <li>a simple selector containing an <a href="#namespaces">undeclared namespace prefix</a> is invalid</li>
  10.240 +    <li>a simple selector containing an <a href="#namespaces">undeclared namespace prefix</a> is invalid
  10.241      <li>a selector containing an invalid simple selector, an invalid combinator
  10.242 -      or an invalid token is invalid. </li>
  10.243 -    <li>a selector list containing an invalid selector is invalid.</li>
  10.244 +      or an invalid token is invalid. 
  10.245 +    <li>a selector list containing an invalid selector is invalid.
  10.246    </ul>
  10.247  
  10.248    <p>An invalid selector represents nothing.
  10.249  
  10.250    <p class="issue">It's been <a href="http://lists.w3.org/Archives/Public/www-style/2010Nov/0203.html">requested</a>
  10.251 -    that the last rule be dropped in favor of Media Queries-style error-handling.</p>
  10.252 +    that the last rule be dropped in favor of Media Queries-style error-handling.
  10.253  
  10.254  
  10.255  
  10.256 @@ -766,17 +780,18 @@
  10.257    <dfn>selector list</dfn>.
  10.258    (A comma is U+002C.) For example, in CSS when several selectors share
  10.259    the same declarations, they may be grouped into a comma-separated
  10.260 -  list. White space may appear before and/or after the comma.</p>
  10.261 +  list. White space may appear before and/or after the comma.
  10.262  
  10.263    <div class="example">
  10.264 -  <p>CSS example:</p>
  10.265 -  <p>In this example, we condense three rules with identical
  10.266 -  declarations into one. Thus,</p>
  10.267 -  <pre>h1 { font-family: sans-serif }
  10.268 -  h2 { font-family: sans-serif }
  10.269 -  h3 { font-family: sans-serif }</pre>
  10.270 -  <p>is equivalent to:</p>
  10.271 -  <pre>h1, h2, h3 { font-family: sans-serif }</pre>
  10.272 +    <p>CSS example:
  10.273 +    <p>In this example, we condense three rules with identical
  10.274 +    declarations into one. Thus,
  10.275 +    <pre><!--
  10.276 +    -->h1 { font-family: sans-serif }&#xa;<!--
  10.277 +    -->h2 { font-family: sans-serif }&#xa;<!--
  10.278 +    -->h3 { font-family: sans-serif }</pre>
  10.279 +    <p>is equivalent to:
  10.280 +    <pre>h1, h2, h3 { font-family: sans-serif }</pre>
  10.281    </div>
  10.282  
  10.283    <p><strong>Warning</strong>: the equivalence is true in this example
  10.284 @@ -784,19 +799,20 @@
  10.285    selectors were invalid, the entire group of selectors would be
  10.286    invalid. This would invalidate the rule for all three heading
  10.287    elements, whereas in the former case only one of the three individual
  10.288 -  heading rules would be invalidated.</p>
  10.289 +  heading rules would be invalidated.
  10.290  
  10.291    <div class="example">
  10.292 -  <p>Invalid CSS example:</p>
  10.293 -  <pre>h1 { font-family: sans-serif }
  10.294 -  h2..foo { font-family: sans-serif }
  10.295 -  h3 { font-family: sans-serif }</pre>
  10.296 -  <p>is not equivalent to:</p>
  10.297 -  <pre>h1, h2..foo, h3 { font-family: sans-serif }</pre>
  10.298 -  <p>because the above selector (<code>h1, h2..foo, h3</code>)
  10.299 -  is entirely invalid and the entire style rule is dropped. (When
  10.300 -  the selectors are not grouped, only the rule for <code>h2..foo</code>
  10.301 -  is dropped.)</p>
  10.302 +    <p>Invalid CSS example:
  10.303 +    <pre><!--
  10.304 +    -->h1 { font-family: sans-serif }&#xa;<!--
  10.305 +    -->h2..foo { font-family: sans-serif }&#xa;<!--
  10.306 +    -->h3 { font-family: sans-serif }</pre>
  10.307 +    <p>is not equivalent to:
  10.308 +    <pre>h1, h2..foo, h3 { font-family: sans-serif }</pre>
  10.309 +    <p>because the above selector (<code>h1, h2..foo, h3</code>)
  10.310 +    is entirely invalid and the entire style rule is dropped. (When
  10.311 +    the selectors are not grouped, only the rule for <code>h2..foo</code>
  10.312 +    is dropped.)
  10.313    </div>
  10.314  
  10.315  <h3 id="the-matches-pseudo">
  10.316 @@ -811,24 +827,24 @@
  10.317    <a href="#combinator">combinators</a> are not allowed. Additionally,
  10.318    <code>:matches()</code> may not be nested within itself or within
  10.319    <code>:not()</code>: <code>:matches(:matches(...))</code> and
  10.320 -  <code>:not(:matches(...))</code> are invalid.</p>
  10.321 +  <code>:not(:matches(...))</code> are invalid.
  10.322  
  10.323    <p>Pseudo-elements cannot be represented by the matches-any pseudo-class;
  10.324    they are not valid within <code>:matches()</code>.
  10.325  
  10.326    <p>Default namespace declarations do not affect the subject of any selector
  10.327    within a matches-any pseudo-class unless the argument is an explicit
  10.328 -  universal selector or a type selector.</p>
  10.329 +  universal selector or a type selector.
  10.330  
  10.331    <div class="example">
  10.332      <p>For example, following selector matches any element that is being
  10.333      hovered or focused, regardless of its namespace. In particular, it
  10.334      is not limited to only matching elements in the default namespace
  10.335 -    that are being hovered or focused.</p>
  10.336 +    that are being hovered or focused.
  10.337      <pre>*|*:matches(:hover, :focus)</pre>
  10.338      <p>The following selector, however, represents only hovered or focused
  10.339      elements that are in the default namespace, because it uses an explicit
  10.340 -    universal selector within the <code>:matches()</code> notation:</p>
  10.341 +    universal selector within the <code>:matches()</code> notation:
  10.342      <pre>*|*:matches(*:hover, *:focus)</pre>
  10.343    </div>
  10.344  
  10.345 @@ -855,26 +871,26 @@
  10.346  
  10.347    <div class="example">
  10.348      <p>For example, the following selector matches all <code>button</code>
  10.349 -    elements in an HTML document that are not disabled.</p>
  10.350 +    elements in an HTML document that are not disabled.
  10.351      <pre>button:not([DISABLED])</pre>
  10.352      <p>The following selector represents all but <code>FOO</code>
  10.353 -    elements.</p>
  10.354 +    elements.
  10.355      <pre>*:not(FOO)</pre>
  10.356      <p>The following compound selector represents all HTML elements
  10.357 -    except links.</p>
  10.358 +    except links.
  10.359      <pre>html|*:not(:link):not(:visited)</pre>
  10.360    </div>
  10.361  
  10.362    <p>Default namespace declarations do not affect the subject of any selector
  10.363    within a negation pseudo-class unless the argument is an explicit universal
  10.364    selector or a type selector. (See <a href="#matches"><code>:matches()</code></a>
  10.365 -  for examples.</p>
  10.366 +  for examples.
  10.367  
  10.368    <p class="note"><strong>Note</strong>: the :not() pseudo allows
  10.369    useless selectors to be written.  For instance <code>:not(*|*)</code>,
  10.370    which represents no element at all, or <code>foo:not(bar)</code>,
  10.371    which is equivalent to <code>foo</code> but with a higher
  10.372 -  specificity.</p>
  10.373 +  specificity.
  10.374  
  10.375  <h2 id="elemental-selectors">
  10.376  Elemental selectors</h2>
  10.377 @@ -886,11 +902,11 @@
  10.378    element type written using the syntax of
  10.379    <a href="http://www.w3.org/TR/css3-namespace/#css-qnames">CSS qualified
  10.380    names</a> [[!CSS3NAMESPACE]]. A type selector represents
  10.381 -  an instance of the element type in the document tree. </p>
  10.382 +  an instance of the element type in the document tree. 
  10.383  
  10.384    <div class="example">
  10.385 -   <p>Example:</p>
  10.386 -   <p>The following selector represents an <code>h1</code> element in the document tree:</p>
  10.387 +   <p>Example:
  10.388 +   <p>The following selector represents an <code>h1</code> element in the document tree:
  10.389     <pre>h1</pre>
  10.390    </div>
  10.391  
  10.392 @@ -901,26 +917,26 @@
  10.393    prefix that has been previously <a href="#nsdecl">declared</a> may be
  10.394    prepended to the element name separated by the namespace separator
  10.395    &quot;vertical bar&quot; (U+007C, <code>|</code>). (See, e.g., [[XML-NAMES]] for the use of namespaces in
  10.396 -  XML.)</p>
  10.397 +  XML.)
  10.398  
  10.399    <p>The namespace component may be left empty (no prefix before the
  10.400    namespace separator) to indicate that the selector is only to
  10.401 -  represent elements with no namespace.</p>
  10.402 +  represent elements with no namespace.
  10.403  
  10.404    <p>An asterisk may be used for the namespace prefix, indicating that
  10.405    the selector represents elements in any namespace (including elements
  10.406 -  with no namespace).</p>
  10.407 +  with no namespace).
  10.408  
  10.409    <p>Element type selectors that have no namespace component (no
  10.410    namespace separator) represent elements without regard to the
  10.411    element's namespace (equivalent to "<code>*|</code>") unless a default
  10.412    namespace has been <a href="#nsdecl">declared</a>  for namespaced selectors (e.g. in CSS, in
  10.413    the style sheet). If a default namespace has been declared, such
  10.414 -  selectors will represent only elements in the default namespace.</p>
  10.415 +  selectors will represent only elements in the default namespace.
  10.416  
  10.417    <p>A type selector containing a namespace prefix that has not been
  10.418    previously <a href="#nsdecl">declared</a> for namespaced selectors is
  10.419 -  an <a href="#conformance">invalid</a> selector.</p>
  10.420 +  an <a href="#conformance">invalid</a> selector.
  10.421  
  10.422    <p>In a namespace-aware client, the name part of element type
  10.423    selectors (the part after the namespace separator, if it is present)
  10.424 @@ -928,26 +944,26 @@
  10.425    href="http://www.w3.org/TR/REC-xml-names/#NT-LocalPart">local part</a>
  10.426    of the element's <a
  10.427    href="http://www.w3.org/TR/REC-xml-names/#ns-qualnames">qualified
  10.428 -  name</a>.</p>
  10.429 -
  10.430 -  <p>In summary:</p>
  10.431 +  name</a>.
  10.432 +
  10.433 +  <p>In summary:
  10.434  
  10.435    <dl>
  10.436 -    <dt><code>ns|E</code></dt>
  10.437 -    <dd>elements with name E in namespace ns</dd>
  10.438 -    <dt><code>*|E</code></dt>
  10.439 +    <dt><code>ns|E</code>
  10.440 +    <dd>elements with name E in namespace ns
  10.441 +    <dt><code>*|E</code>
  10.442      <dd>elements with name E in any namespace, including those without a
  10.443 -    namespace</dd>
  10.444 -    <dt><code>|E</code></dt>
  10.445 -    <dd>elements with name E without a namespace</dd>
  10.446 -    <dt><code>E</code></dt>
  10.447 +    namespace
  10.448 +    <dt><code>|E</code>
  10.449 +    <dd>elements with name E without a namespace
  10.450 +    <dt><code>E</code>
  10.451      <dd>if no default namespace has been <a href="#nsdecl">declared</a>  for selectors, this is
  10.452      equivalent to *|E.  Otherwise it is equivalent to ns|E where ns is
  10.453 -    the default namespace.</dd>
  10.454 +    the default namespace.
  10.455    </dl>
  10.456  
  10.457    <div class="example">
  10.458 -   <p>CSS examples:</p>
  10.459 +   <p>CSS examples:
  10.460  
  10.461     <pre>
  10.462     @namespace foo url(http://www.example.com);
  10.463 @@ -959,19 +975,19 @@
  10.464  
  10.465     <p>The first rule (not counting the <code>@namespace</code> at-rule)
  10.466     will match only <code>h1</code> elements in the
  10.467 -   "http://www.example.com" namespace.</p>
  10.468 +   "http://www.example.com" namespace.
  10.469  
  10.470     <p>The second rule will match all elements in the
  10.471 -   "http://www.example.com" namespace.</p>
  10.472 +   "http://www.example.com" namespace.
  10.473  
  10.474     <p>The third rule will match only <code>h1</code> elements with
  10.475 -   no namespace.</p>
  10.476 +   no namespace.
  10.477  
  10.478     <p>The fourth rule will match <code>h1</code> elements in any
  10.479 -   namespace (including those without any namespace).</p>
  10.480 +   namespace (including those without any namespace).
  10.481  
  10.482     <p>The last rule is equivalent to the fourth rule because no default
  10.483 -   namespace has been defined.</p>
  10.484 +   namespace has been defined.
  10.485  
  10.486    </div>
  10.487  
  10.488 @@ -986,19 +1002,19 @@
  10.489    namespace (including those without a namespace) if no default
  10.490    namespace has been specified for selectors. If a default namespace has
  10.491    been specified, see <a href="#univnmsp">Universal selector and
  10.492 -  Namespaces</a> below.</p>
  10.493 +  Namespaces</a> below.
  10.494  
  10.495    <p>If a universal selector represented by <code>*</code> (i.e. without a
  10.496    namespace prefix) is not the only component of a <i>compound selector</i>
  10.497    or is immediately followed by a <i>pseudo-element</i>, then the <code>*</code> may
  10.498 -  be omitted and the universal selector's presence implied.</p>
  10.499 +  be omitted and the universal selector's presence implied.
  10.500  
  10.501    <div class="example">
  10.502 -   <p>Examples:</p>
  10.503 +   <p>Examples:
  10.504     <ul>
  10.505 -    <li><code>*[hreflang|=en]</code> and <code>[hreflang|=en]</code> are equivalent,</li>
  10.506 -    <li><code>*.warning</code> and <code>.warning</code> are equivalent,</li>
  10.507 -    <li><code>*#myid</code> and <code>#myid</code> are equivalent.</li>
  10.508 +    <li><code>*[hreflang|=en]</code> and <code>[hreflang|=en]</code> are equivalent,
  10.509 +    <li><code>*.warning</code> and <code>.warning</code> are equivalent,
  10.510 +    <li><code>*#myid</code> and <code>#myid</code> are equivalent.
  10.511     </ul>
  10.512    </div>
  10.513  
  10.514 @@ -1008,29 +1024,29 @@
  10.515    <code style="white-space: nowrap">div :first-child</code>
  10.516    and <code style="white-space: nowrap">div:first-child</code>.
  10.517    Here, <code style="white-space: nowrap">div *:first-child</code>
  10.518 -  is more readable.</p>
  10.519 +  is more readable.
  10.520  
  10.521  <h4 id="univnmsp">
  10.522  Universal selector and namespaces</h4>
  10.523  
  10.524    <p>The universal selector allows an optional namespace component. It
  10.525 -  is used as follows:</p>
  10.526 +  is used as follows:
  10.527  
  10.528    <dl>
  10.529 -   <dt><code>ns|*</code></dt>
  10.530 -   <dd>all elements in namespace ns</dd>
  10.531 -   <dt><code>*|*</code></dt>
  10.532 -   <dd>all elements</dd>
  10.533 -   <dt><code>|*</code></dt>
  10.534 -   <dd>all elements without a namespace</dd>
  10.535 -   <dt><code>*</code></dt>
  10.536 +   <dt><code>ns|*</code>
  10.537 +   <dd>all elements in namespace ns
  10.538 +   <dt><code>*|*</code>
  10.539 +   <dd>all elements
  10.540 +   <dt><code>|*</code>
  10.541 +   <dd>all elements without a namespace
  10.542 +   <dt><code>*</code>
  10.543     <dd>if no default namespace has been specified, this is equivalent to *|*.
  10.544 -   Otherwise it is equivalent to ns|* where ns is the default namespace.</dd>
  10.545 +   Otherwise it is equivalent to ns|* where ns is the default namespace.
  10.546    </dl>
  10.547  
  10.548    <p>A universal selector containing a namespace prefix that has not
  10.549    been previously <a href="#nsdecl">declared</a> is an <a
  10.550 -  href="#conformance">invalid</a> selector.</p>
  10.551 +  href="#conformance">invalid</a> selector.
  10.552  
  10.553  
  10.554  <h2 id="attribute-selectors">
  10.555 @@ -1040,7 +1056,7 @@
  10.556    a selector is used as an expression to match against an element,
  10.557    an <dfn>attribute selector</dfn> must be considered to match an element if that
  10.558    element has an attribute that matches the attribute represented by the
  10.559 -  attribute selector.</p>
  10.560 +  attribute selector.
  10.561  
  10.562    <p class="issue">Add comma-separated syntax for
  10.563    <a href="http://lists.w3.org/Archives/Public/www-style/2011Mar/0215.html">multiple-value matching</a>?
  10.564 @@ -1049,22 +1065,22 @@
  10.565  <h3 id="attribute-representation">
  10.566  Attribute presence and value selectors</h3>
  10.567  
  10.568 -  <p>CSS2 introduced four attribute selectors:</p>
  10.569 +  <p>CSS2 introduced four attribute selectors:
  10.570  
  10.571    <dl>
  10.572      <dt><code>[att]</code>
  10.573      <dd>Represents an element with the <code>att</code> attribute, whatever the value of
  10.574 -    the attribute.</dd>
  10.575 -    <dt><code>[att=val]</code></dt>
  10.576 +    the attribute.
  10.577 +    <dt><code>[att=val]</code>
  10.578      <dd>Represents an element with the <code>att</code> attribute whose value is exactly
  10.579 -    "val".</dd>
  10.580 -    <dt><code>[att~=val]</code></dt>
  10.581 +    "val".
  10.582 +    <dt><code>[att~=val]</code>
  10.583      <dd>Represents an element with the <code>att</code> attribute whose value is a <a
  10.584      href="#whitespace">whitespace</a>-separated list of words, one of
  10.585      which is exactly "val". If "val" contains whitespace, it will never
  10.586      represent anything (since the words are <em>separated</em> by
  10.587      spaces). Also if "val" is the empty string, it will never represent
  10.588 -    anything.</dd>
  10.589 +    anything.
  10.590      <dt><code>[att|=val]</code>
  10.591      <dd>Represents an element with the <code>att</code> attribute, its
  10.592      value either being exactly "val" or beginning with "val" immediately
  10.593 @@ -1073,7 +1089,7 @@
  10.594      on the <code>a</code> element in HTML) as described in BCP 47 ([[BCP47]]) or its successor.  For
  10.595      <code>lang</code> (or <code>xml:lang</code>) language subcode
  10.596      matching, please see <a href="#lang-pseudo">the <code>:lang</code>
  10.597 -    pseudo-class</a>.</dd>
  10.598 +    pseudo-class</a>.
  10.599    </dl>
  10.600  
  10.601    <p>Attribute values must be CSS <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifiers</a>
  10.602 @@ -1081,17 +1097,17 @@
  10.603  
  10.604    <div class="example">
  10.605  
  10.606 -    <p>Examples:</p>
  10.607 +    <p>Examples:
  10.608  
  10.609      <p>The following attribute selector represents an <code>h1</code>
  10.610      element that carries the <code>title</code> attribute, whatever its
  10.611 -    value:</p>
  10.612 +    value:
  10.613  
  10.614      <pre>h1[title]</pre>
  10.615  
  10.616      <p>In the following example, the selector represents a
  10.617      <code>span</code> element whose <code>class</code> attribute has
  10.618 -    exactly the value "example":</p>
  10.619 +    exactly the value "example":
  10.620  
  10.621      <pre>span[class="example"]</pre>
  10.622  
  10.623 @@ -1100,7 +1116,7 @@
  10.624      attribute. Here, the selector represents a <code>span</code> element
  10.625      whose <code>hello</code> attribute has exactly the value "Cleveland"
  10.626      and whose <code>goodbye</code> attribute has exactly the value
  10.627 -    "Columbus":</p>
  10.628 +    "Columbus":
  10.629  
  10.630      <pre>span[hello="Cleveland"][goodbye="Columbus"]</pre>
  10.631  
  10.632 @@ -1109,28 +1125,30 @@
  10.633      <code>a</code> element with the value "copyright copyleft
  10.634      copyeditor" on a <code>rel</code> attribute. The second selector
  10.635      would only match an <code>a</code> element with an <code>href</code>
  10.636 -    attribute having the exact value "http://www.w3.org/".</p>
  10.637 -
  10.638 -    <pre>a[rel~="copyright"] { ... }
  10.639 -  a[href="http://www.w3.org/"] { ... }</pre>
  10.640 +    attribute having the exact value "http://www.w3.org/".
  10.641 +
  10.642 +    <pre><!--
  10.643 +    -->a[rel~="copyright"] { ... }&#xa;<!--
  10.644 +    -->a[href="http://www.w3.org/"] { ... }</pre>
  10.645  
  10.646      <p>The following selector represents an <code>a</code> element
  10.647 -    whose <code>hreflang</code> attribute is exactly "fr".</p>
  10.648 +    whose <code>hreflang</code> attribute is exactly "fr".
  10.649  
  10.650      <pre>a[hreflang=fr]</pre>
  10.651  
  10.652      <p>The following selector represents an <code>a</code> element for
  10.653      which the value of the <code>hreflang</code> attribute begins with
  10.654 -    "en", including "en", "en-US", and "en-scouse":</p>
  10.655 +    "en", including "en", "en-US", and "en-scouse":
  10.656  
  10.657      <pre>a[hreflang|="en"]</pre>
  10.658  
  10.659      <p>The following selectors represent a <code>DIALOGUE</code> element
  10.660      whenever it has one of two different values for an attribute
  10.661 -    <code>character</code>:</p>
  10.662 -
  10.663 -    <pre>DIALOGUE[character=romeo]
  10.664 -  DIALOGUE[character=juliet]</pre>
  10.665 +    <code>character</code>:
  10.666 +
  10.667 +    <pre><!--
  10.668 +    -->DIALOGUE[character=romeo]&#xa;<!--
  10.669 +    -->DIALOGUE[character=juliet]</pre>
  10.670  
  10.671    </div>
  10.672  
  10.673 @@ -1138,36 +1156,36 @@
  10.674  Substring matching attribute selectors</h3>
  10.675  
  10.676    <p>Three additional attribute selectors are provided for matching
  10.677 -  substrings in the value of an attribute:</p>
  10.678 +  substrings in the value of an attribute:
  10.679  
  10.680    <dl>
  10.681 -    <dt><code>[att^=val]</code></dt>
  10.682 +    <dt><code>[att^=val]</code>
  10.683      <dd>Represents an element with the <code>att</code> attribute whose value begins
  10.684      with the prefix "val". If "val" is the empty string then the selector does not
  10.685 -    represent anything.</dd>
  10.686 +    represent anything.
  10.687      <dt><code>[att$=val]</code>
  10.688      <dd>Represents an element with the <code>att</code> attribute whose value ends with
  10.689      the suffix "val". If "val" is the empty string then the selector does not represent
  10.690 -    anything.</dd>
  10.691 +    anything.
  10.692      <dt><code>[att*=val]</code>
  10.693      <dd>Represents an element with the <code>att</code> attribute whose value contains
  10.694      at least one instance of the substring "val". If "val" is the empty string then
  10.695 -    the selector does not represent anything.</dd>
  10.696 +    the selector does not represent anything.
  10.697    </dl>
  10.698  
  10.699    <p>Attribute values must be CSS <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifiers</a>
  10.700    or <a href="http://www.w3.org/TR/CSS21/syndata.html#strings">strings</a>. [[!CSS21]]
  10.701  
  10.702    <div class="example">
  10.703 -   <p>Examples:</p>
  10.704 +   <p>Examples:
  10.705     <p>The following selector represents an HTML <code>object</code>, referencing an
  10.706 -   image:</p>
  10.707 +   image:
  10.708     <pre>object[type^="image/"]</pre>
  10.709     <p>The following selector represents an HTML anchor <code>a</code> with an
  10.710 -   <code>href</code> attribute whose value ends with ".html".</p>
  10.711 +   <code>href</code> attribute whose value ends with ".html".
  10.712     <pre>a[href$=".html"]</pre>
  10.713     <p>The following selector represents an HTML paragraph with a <code>title</code>
  10.714 -   attribute whose value contains the substring "hello"</p>
  10.715 +   attribute whose value contains the substring "hello"
  10.716     <pre>p[title*="hello"]</pre>
  10.717    </div>
  10.718  
  10.719 @@ -1211,28 +1229,28 @@
  10.720  
  10.721    <p>An attribute selector with an attribute name containing a namespace
  10.722    prefix that has not been previously <a href="#nsdecl">declared</a> is
  10.723 -  an <a href="#conformance">invalid</a> selector.</p>
  10.724 +  an <a href="#conformance">invalid</a> selector.
  10.725  
  10.726    <div class="example">
  10.727 -    <p>CSS examples:</p>
  10.728 -    <pre>
  10.729 -  @namespace foo "http://www.example.com";
  10.730 -  [foo|att=val] { color: blue }
  10.731 -  [*|att] { color: yellow }
  10.732 -  [|att] { color: green }
  10.733 -  [att] { color: green }</pre>
  10.734 +    <p>CSS examples:
  10.735 +    <pre><!--
  10.736 +    -->@namespace foo "http://www.example.com";&#xa;<!--
  10.737 +    -->[foo|att=val] { color: blue }&#xa;<!--
  10.738 +    -->[*|att] { color: yellow }&#xa;<!--
  10.739 +    -->[|att] { color: green }&#xa;<!--
  10.740 +    -->[att] { color: green }</pre>
  10.741  
  10.742      <p>The first rule will match only elements with the attribute
  10.743      <code>att</code> in the "http://www.example.com" namespace with the
  10.744 -    value "val".</p>
  10.745 +    value "val".
  10.746  
  10.747      <p>The second rule will match only elements with the attribute
  10.748      <code>att</code> regardless of the namespace of the attribute
  10.749 -    (including no namespace).</p>
  10.750 +    (including no namespace).
  10.751  
  10.752      <p>The last two rules are equivalent and will match only elements
  10.753      with the attribute <code>att</code> where the attribute is not
  10.754 -    in a namespace.</p>
  10.755 +    in a namespace.
  10.756  
  10.757    </div>
  10.758  
  10.759 @@ -1244,51 +1262,52 @@
  10.760    In some document formats default attribute values can be defined in a DTD or
  10.761    elsewhere, but these can only be selected by attribute selectors if they
  10.762    appear in the document tree. Selectors should be designed so that they
  10.763 -  work whether or not the default values are included in the document tree.</p>
  10.764 +  work whether or not the default values are included in the document tree.
  10.765  
  10.766    <p>For example, a XML UA may, but is <em>not</em> required to read an "external
  10.767    subset" of the DTD but <em>is</em> required to look for default
  10.768    attribute values in the document's "internal subset." (See, e.g., [[XML10]] for definitions of these subsets.) Depending
  10.769    on the UA, a default attribute value defined in the external subset of the
  10.770 -  DTD might or might not appear in the document tree.</p>
  10.771 +  DTD might or might not appear in the document tree.
  10.772  
  10.773    <p>A UA that recognizes an XML namespace may, but is not required to use its
  10.774    knowledge of that namespace to treat default attribute values as if
  10.775    they were present in the document. (For example, an XHTML UA is not
  10.776    required to use its built-in knowledge of the XHTML DTD. See, e.g., [[XML-NAMES]] for details on namespaces in XML
  10.777 -  1.0.)</p>
  10.778 +  1.0.)
  10.779  
  10.780    <p class="note"><strong>Note:</strong> Typically, implementations
  10.781    choose to ignore external subsets. This corresponds to the behaviour
  10.782 -  of non-validating processors as defined by the XML specification.</p>
  10.783 +  of non-validating processors as defined by the XML specification.
  10.784  
  10.785    <div class="example">
  10.786 -  <p>Example:</p>
  10.787 -
  10.788 -  <p>Consider an element <code>EXAMPLE</code> with an attribute <code>radix</code>
  10.789 -  that has a default value of <code>"decimal"</code>. The DTD fragment might be</p>
  10.790 -
  10.791 -  <pre class="dtd-example">&lt;!ATTLIST EXAMPLE radix (decimal,octal) "decimal"></pre>
  10.792 -
  10.793 -  <p>If the style sheet contains the rules</p>
  10.794 -
  10.795 -  <pre>EXAMPLE[radix=decimal] { /*... default property settings ...*/ }
  10.796 -  EXAMPLE[radix=octal]   { /*... other settings...*/ }</pre>
  10.797 -
  10.798 -  <p>the first rule might not match elements whose <code>radix</code> attribute is
  10.799 -  set by default, i.e. not set explicitly. To catch all cases, the
  10.800 -  attribute selector for the default value must be dropped:</p>
  10.801 -
  10.802 -  <pre>EXAMPLE                { /*... default property settings ...*/ }
  10.803 -  EXAMPLE[radix=octal]   { /*... other settings...*/ }</pre>
  10.804 -
  10.805 -  <p>Here, because the selector <code>EXAMPLE[radix=octal]</code> is
  10.806 -  more specific than the type selector alone, the style declarations in
  10.807 -  the second rule will override those in the first for elements that
  10.808 -  have a <code>radix</code> attribute value of <code>"octal"</code>. Care has to be taken that
  10.809 -  all property declarations that are to apply only to the default case
  10.810 -  are overridden in the non-default cases' style rules.</p>
  10.811 -
  10.812 +    <p>Example:
  10.813 +
  10.814 +    <p>Consider an element <code>EXAMPLE</code> with an attribute <code>radix</code>
  10.815 +    that has a default value of <code>"decimal"</code>. The DTD fragment might be
  10.816 +
  10.817 +    <pre class="dtd-example">&lt;!ATTLIST EXAMPLE radix (decimal,octal) "decimal"></pre>
  10.818 +
  10.819 +    <p>If the style sheet contains the rules
  10.820 +
  10.821 +    <pre><!--
  10.822 +    -->EXAMPLE[radix=decimal] { /*... default property settings ...*/ }&#xa;<!--
  10.823 +    -->EXAMPLE[radix=octal]   { /*... other settings...*/ }</pre>
  10.824 +
  10.825 +    <p>the first rule might not match elements whose <code>radix</code> attribute is
  10.826 +    set by default, i.e. not set explicitly. To catch all cases, the
  10.827 +    attribute selector for the default value must be dropped:
  10.828 +
  10.829 +    <pre><!--
  10.830 +    -->EXAMPLE                { /*... default property settings ...*/ }&#xa;<!--
  10.831 +    -->EXAMPLE[radix=octal]   { /*... other settings...*/ }</pre>
  10.832 +
  10.833 +    <p>Here, because the selector <code>EXAMPLE[radix=octal]</code> is
  10.834 +    more specific than the type selector alone, the style declarations in
  10.835 +    the second rule will override those in the first for elements that
  10.836 +    have a <code>radix</code> attribute value of <code>"octal"</code>. Care has to be taken that
  10.837 +    all property declarations that are to apply only to the default case
  10.838 +    are overridden in the non-default cases' style rules.
  10.839    </div>
  10.840  
  10.841  <h3 id="class-html">
  10.842 @@ -1305,39 +1324,39 @@
  10.843    except that it has a higher <a href="#specificity">specificity</a>.
  10.844  
  10.845    <div class="example">
  10.846 -   <p>CSS examples:</p>
  10.847 +   <p>CSS examples:
  10.848  
  10.849     <p>We can assign style information to all elements with
  10.850 -   <code>class~="pastoral"</code> as follows:</p>
  10.851 +   <code>class~="pastoral"</code> as follows:
  10.852  
  10.853      <pre>*.pastoral { color: green }  /* all elements with class~=pastoral */</pre>
  10.854  
  10.855 -    <p>or just</p>
  10.856 +    <p>or just
  10.857  
  10.858      <pre>.pastoral { color: green }  /* all elements with class~=pastoral */</pre>
  10.859  
  10.860      <p>The following assigns style only to H1 elements with
  10.861 -    <code>class~="pastoral"</code>:</p>
  10.862 +    <code>class~="pastoral"</code>:
  10.863  
  10.864      <pre>H1.pastoral { color: green }  /* H1 elements with class~=pastoral */</pre>
  10.865  
  10.866      <p>Given these rules, the first <code>H1</code> instance below would not have
  10.867 -    green text, while the second would:</p>
  10.868 +    green text, while the second would:
  10.869  
  10.870      <pre>
  10.871 -  &lt;H1&gt;Not green&lt;/H1&gt;
  10.872 -  &lt;H1 class="pastoral"&gt;Very green&lt;/H1&gt;</pre>
  10.873 +  &lt;H1>Not green&lt;/H1>
  10.874 +  &lt;H1 class="pastoral">Very green&lt;/H1></pre>
  10.875  
  10.876      <p>The following rule matches any <code>P</code> element whose <code>class</code>
  10.877      attribute has been assigned a list of <a
  10.878      href="#whitespace">whitespace</a>-separated values that includes both
  10.879 -    <code>pastoral</code> and <code>marine</code>:</p>
  10.880 +    <code>pastoral</code> and <code>marine</code>:
  10.881  
  10.882      <pre>p.pastoral.marine { color: green }</pre>
  10.883  
  10.884      <p>This rule matches when <code>class="pastoral blue aqua
  10.885      marine"</code> but does not match for <code>class="pastoral
  10.886 -    blue"</code>.</p>
  10.887 +    blue"</code>.
  10.888  
  10.889    </div>
  10.890  
  10.891 @@ -1349,14 +1368,14 @@
  10.892    information through the "class" attribute.  Authors should avoid this
  10.893    practice since the structural elements of a document language often
  10.894    have recognized and accepted meanings and author-defined classes may
  10.895 -  not.</p>
  10.896 +  not.
  10.897  
  10.898    <p class="note"><strong>Note:</strong> If an element has multiple
  10.899    class attributes, their values must be concatenated with spaces
  10.900    between the values before searching for the class. As of this time the
  10.901    working group is not aware of any manner in which this situation can
  10.902    be reached, however, so this behavior is explicitly non-normative in
  10.903 -  this specification.</p>
  10.904 +  this specification.
  10.905  
  10.906  <h3 id="id-selectors">
  10.907  ID selectors</h3>
  10.908 @@ -1368,7 +1387,7 @@
  10.909    document language, an ID typed attribute can be used to uniquely
  10.910    identify its element. In HTML all ID attributes are named "id"; XML
  10.911    applications may name ID attributes differently, but the same
  10.912 -  restriction applies.</p>
  10.913 +  restriction applies.
  10.914  
  10.915    <p>An ID-typed attribute of a document language allows authors to
  10.916    assign an identifier to one element instance in the document tree. An
  10.917 @@ -1376,22 +1395,22 @@
  10.918    <code>#</code>) immediately followed by the ID value, which must be an
  10.919    CSS <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifiers</a>.
  10.920    An ID selector represents an element instance that has an
  10.921 -  identifier that matches the identifier in the ID selector.</p>
  10.922 +  identifier that matches the identifier in the ID selector.
  10.923  
  10.924    <p>Selectors does not specify how a UA knows the ID-typed attribute of
  10.925    an element. The UA may, e.g., read a document's DTD, have the
  10.926    information hard-coded or ask the user.
  10.927  
  10.928    <div class="example">
  10.929 -    <p>Examples:</p>
  10.930 +    <p>Examples:
  10.931      <p>The following ID selector represents an <code>h1</code> element
  10.932 -    whose ID-typed attribute has the value "chapter1":</p>
  10.933 +    whose ID-typed attribute has the value "chapter1":
  10.934      <pre>h1#chapter1</pre>
  10.935      <p>The following ID selector represents any element whose ID-typed
  10.936 -    attribute has the value "chapter1":</p>
  10.937 +    attribute has the value "chapter1":
  10.938      <pre>#chapter1</pre>
  10.939      <p>The following selector represents any element whose ID-typed
  10.940 -    attribute has the value "z98y".</p>
  10.941 +    attribute has the value "z98y".
  10.942      <pre>*#z98y</pre>
  10.943    </div>
  10.944  
  10.945 @@ -1403,12 +1422,12 @@
  10.946    attribute for that namespace). If a style sheet author knows or
  10.947    suspects that a UA may not know what the ID of an element is, he
  10.948    should use normal attribute selectors instead:
  10.949 -  <code>[name=p371]</code> instead of <code>#p371</code>.</p>
  10.950 +  <code>[name=p371]</code> instead of <code>#p371</code>.
  10.951  
  10.952    <p>If an element has multiple ID attributes, all of them must be
  10.953    treated as IDs for that element for the purposes of the ID
  10.954    selector. Such a situation could be reached using mixtures of xml:id,
  10.955 -  DOM3 Core, XML DTDs, and namespace-specific knowledge.</p>
  10.956 +  DOM3 Core, XML DTDs, and namespace-specific knowledge.
  10.957  
  10.958  <h2 id="location">
  10.959  Location Pseudo-classes</h2>
  10.960 @@ -1427,26 +1446,26 @@
  10.961    <p>User agents commonly display unvisited links differently from
  10.962    previously visited ones. Selectors
  10.963    provides the pseudo-classes <dfn id='link-pseudo'>:link</dfn> and
  10.964 -  <dfn id='visited-pseudo'>:visited</dfn> to distinguish them:</p>
  10.965 +  <dfn id='visited-pseudo'>:visited</dfn> to distinguish them:
  10.966  
  10.967    <ul>
  10.968      <li>The <code>:link</code> pseudo-class applies to links that have
  10.969 -    not yet been visited.</li>
  10.970 +    not yet been visited.
  10.971      <li>The <code>:visited</code> pseudo-class applies once the link has
  10.972 -    been visited by the user. </li>
  10.973 +    been visited by the user. 
  10.974    </ul>
  10.975  
  10.976    <p>After some amount of time, user agents may choose to return a
  10.977 -  visited link to the (unvisited) ':link' state.</p>
  10.978 -
  10.979 -  <p>The two states are mutually exclusive.</p>
  10.980 +  visited link to the (unvisited) ':link' state.
  10.981 +
  10.982 +  <p>The two states are mutually exclusive.
  10.983  
  10.984    <div class="example">
  10.985  
  10.986 -    <p>Example:</p>
  10.987 +    <p>Example:
  10.988  
  10.989      <p>The following selector represents links carrying class
  10.990 -    <code>footnote</code> and already visited:</p>
  10.991 +    <code>footnote</code> and already visited:
  10.992  
  10.993      <pre>.footnote:visited</pre>
  10.994  
  10.995 @@ -1458,7 +1477,7 @@
  10.996  
  10.997    <p>UAs may therefore treat all links as unvisited links, or implement
  10.998    other measures to preserve the user's privacy while rendering visited
  10.999 -  and unvisited links differently.</p>
 10.1000 +  and unvisited links differently.
 10.1001  
 10.1002  
 10.1003  <h3 id="the-local-pseudo">
 10.1004 @@ -1497,7 +1516,7 @@
 10.1005      <code>:local-link(<var>n</var>)</code>.
 10.1006  
 10.1007    <p class="issue">Is there such a thing as IRL? Because we do want this
 10.1008 -    to work for internationalized URLs, just not URNs.</p>
 10.1009 +    to work for internationalized URLs, just not URNs.
 10.1010  
 10.1011    <div class="example">
 10.1012      <p>So, given the links:
 10.1013 @@ -1537,34 +1556,34 @@
 10.1014  
 10.1015    <p>Some URIs refer to a location within a resource. This kind of URI
 10.1016    ends with a &quot;number sign&quot; (#) followed by an anchor
 10.1017 -  identifier (called the fragment identifier).</p>
 10.1018 +  identifier (called the fragment identifier).
 10.1019  
 10.1020    <p>URIs with fragment identifiers link to a certain element within the
 10.1021    document, known as the target element. For instance, here is a URI
 10.1022    pointing to an anchor named <code>section_2</code> in an HTML
 10.1023 -  document:</p>
 10.1024 +  document:
 10.1025  
 10.1026    <pre>http://example.com/html/top.html#section_2</pre>
 10.1027  
 10.1028    <p>A target element can be represented by the <dfn id='target-pseudo'>:target</dfn>
 10.1029    pseudo-class. If the document's URI has no fragment identifier, then
 10.1030 -  the document has no target element.</p>
 10.1031 +  the document has no target element.
 10.1032  
 10.1033    <div class="example">
 10.1034 -   <p>Example:</p>
 10.1035 -   <pre>p.note:target</pre>
 10.1036 -   <p>This selector represents a <code>p</code> element of class
 10.1037 -   <code>note</code> that is the target element of the referring
 10.1038 -   URI.</p>
 10.1039 +    <p>Example:
 10.1040 +    <pre>p.note:target</pre>
 10.1041 +    <p>This selector represents a <code>p</code> element of class
 10.1042 +    <code>note</code> that is the target element of the referring
 10.1043 +    URI.
 10.1044    </div>
 10.1045  
 10.1046    <div class="example">
 10.1047 -   <p>CSS example:</p>
 10.1048 -   <p>Here, the <code>:target</code> pseudo-class is used to make the
 10.1049 -   target element red and place an image before it, if there is one:</p>
 10.1050 -   <pre>
 10.1051 -  *:target { color : red }
 10.1052 -  *:target::before { content : url(target.png) }</pre>
 10.1053 +    <p>CSS example:
 10.1054 +    <p>Here, the <code>:target</code> pseudo-class is used to make the
 10.1055 +    target element red and place an image before it, if there is one:
 10.1056 +    <pre><!--
 10.1057 +    -->*:target { color : red }&#xa;<!--
 10.1058 +    -->*:target::before { content : url(target.png) }</pre>
 10.1059    </div>
 10.1060  
 10.1061  
 10.1062 @@ -1591,22 +1610,24 @@
 10.1063  
 10.1064    <p>Interactive user agents sometimes change the rendering in response
 10.1065    to user actions. Selectors provides three pseudo-classes for the
 10.1066 -  selection of an element the user is acting on.</p>
 10.1067 +  selection of an element the user is acting on.
 10.1068  
 10.1069    <p>These pseudo-classes are not mutually exclusive. An element may
 10.1070 -  match several pseudo-classes at the same time.</p>
 10.1071 +  match several pseudo-classes at the same time.
 10.1072  
 10.1073    <div class="example">
 10.1074 -    <p>Examples:</p>
 10.1075 -    <pre>a:link    /* unvisited links */
 10.1076 -  a:visited /* visited links */
 10.1077 -  a:hover   /* user hovers */
 10.1078 -  a:active  /* active links */</pre>
 10.1079 -    <p>An example of combining dynamic pseudo-classes:</p>
 10.1080 -    <pre>a:focus
 10.1081 -  a:focus:hover</pre>
 10.1082 +    <p>Examples:
 10.1083 +    <pre><!--
 10.1084 +    -->a:link    /* unvisited links */&#xa;<!--
 10.1085 +    -->a:visited /* visited links */&#xa;<!--
 10.1086 +    -->a:hover   /* user hovers */&#xa;<!--
 10.1087 +    -->a:active  /* active links */</pre>
 10.1088 +    <p>An example of combining dynamic pseudo-classes:
 10.1089 +    <pre><!--
 10.1090 +    -->a:focus&#xa;<!--
 10.1091 +    -->a:focus:hover</pre>
 10.1092      <p>The last selector matches <code>a</code> elements that are in
 10.1093 -    the pseudo-class :focus and in the pseudo-class :hover.</p>
 10.1094 +    the pseudo-class :focus and in the pseudo-class :hover.
 10.1095    </div>
 10.1096  
 10.1097  <h3 id="the-hover-pseudo">
 10.1098 @@ -1630,7 +1651,7 @@
 10.1099    <p class="note"><strong>Note:</strong> Since the ':hover' state can apply to
 10.1100    an element because its child is designated by a pointing device, then it is
 10.1101    possible for ':hover' to apply to an element that is not underneath
 10.1102 -  the pointing device.</p>
 10.1103 +  the pointing device.
 10.1104  
 10.1105    <p>The <code>:hover</code> pseudo-class can apply to any pseudo-element.
 10.1106  
 10.1107 @@ -1645,13 +1666,13 @@
 10.1108      button), and any aliases thereof.
 10.1109  
 10.1110    <p>There may be document language or implementation specific limits on
 10.1111 -  which elements can become <code>:active</code>.</p>
 10.1112 +  which elements can become <code>:active</code>.
 10.1113  
 10.1114    <p>Selectors doesn't define if the parent of an element that is
 10.1115 -  ':active' is also in that state.</p>
 10.1116 +  ':active' is also in that state.
 10.1117  
 10.1118    <p class="note"><strong>Note:</strong> An element can be both
 10.1119 -  ':visited' and ':active' (or ':link' and ':active').</p>
 10.1120 +  ':visited' and ':active' (or ':link' and ':active').
 10.1121  
 10.1122  <h3 id="the-focus-pseudo">
 10.1123  The input focus pseudo-class <code>:focus</code></h3>
 10.1124 @@ -1661,7 +1682,7 @@
 10.1125      input).
 10.1126  
 10.1127    <p>There may be document language or implementation specific limits on
 10.1128 -  which elements can acquire <code>:focus</code>.</p>
 10.1129 +  which elements can acquire <code>:focus</code>.
 10.1130  
 10.1131  <h3 id="drag-pseudos">
 10.1132  The drag-and-drop pseudo-classes</h3>
 10.1133 @@ -1690,7 +1711,7 @@
 10.1134        <pre>:valid-drop-target { box-shadow: 0 0 5px yellow; }</pre>
 10.1135      <p>Meanwhile the '':active-drop-target'' pseudo-class can be used
 10.1136        to designate the drop-zone that will receive the dragged item when dropped.
 10.1137 -      <pre>:active-drop-target { outline: solid red; }</pre>
 10.1138 +    <pre>:active-drop-target { outline: solid red; }</pre>
 10.1139    </div>
 10.1140  
 10.1141    <div class="issue">
 10.1142 @@ -1733,10 +1754,10 @@
 10.1143    <div class="example">
 10.1144      <p>For example, the following rule will highlight whichever paragraph
 10.1145      or list item is being read aloud in a speech rendering of the document:
 10.1146 -    <pre>
 10.1147 -<!-- -->:current(p, li, dt, dd) {
 10.1148 -<!-- -->  background: yellow;
 10.1149 -<!-- -->}</pre>
 10.1150 +    <pre><!--
 10.1151 +    -->:current(p, li, dt, dd) {&#xa;<!--
 10.1152 +    -->  background: yellow;&#xa;<!--
 10.1153 +    -->}</pre>
 10.1154    </div>
 10.1155  
 10.1156  <h3 id="the-past-pseudo">
 10.1157 @@ -1824,32 +1845,33 @@
 10.1158    operation per [[RFC4647]] <cite>Matching of Language Tags</cite> (section 3.3.2).
 10.1159    The matching is performed case-insensitively within the ASCII range.
 10.1160    The language identifier does not need to be a valid language code to
 10.1161 -  perform this comparison.</p>
 10.1162 +  perform this comparison.
 10.1163  
 10.1164    <p class="note"><strong>Note:</strong> It is recommended that
 10.1165    documents and protocols indicate language using codes from BCP 47 [[BCP47]]
 10.1166    or its successor, and by means of <code>xml:lang</code> attributes in the
 10.1167    case of XML-based documents [[XML10]]. See <a
 10.1168    href="http://www.w3.org/International/questions/qa-lang-2or3.html">
 10.1169 -  "FAQ: Two-letter or three-letter language codes."</a></p>
 10.1170 +  "FAQ: Two-letter or three-letter language codes."</a>
 10.1171  
 10.1172    <div class="example">
 10.1173 -    <p>Examples:</p>
 10.1174 +    <p>Examples:
 10.1175      <p>The two following selectors represent an HTML document that is in
 10.1176      Belgian French or German. The two next selectors represent
 10.1177      <code>q</code> quotations in an arbitrary element in Belgian French
 10.1178 -    or German.</p>
 10.1179 -    <pre>html:lang(fr-be)
 10.1180 -  html:lang(de)
 10.1181 -  :lang(fr-be) &gt; q
 10.1182 -  :lang(de) &gt; q</pre>
 10.1183 +    or German.
 10.1184 +    <pre><!--
 10.1185 +    -->html:lang(fr-be)&#xa;<!--
 10.1186 +    -->html:lang(de)&#xa;<!--
 10.1187 +    -->:lang(fr-be) > q&#xa;<!--
 10.1188 +    -->:lang(de) > q</pre>
 10.1189    </div>
 10.1190  
 10.1191    <p class="note">One difference between <code>:lang(C)</code> and the ''|='' operator
 10.1192    is that the ''|='' operator only performs a comparison against a given
 10.1193    attribute on the element, while the <code>:lang(C)</code> pseudo-class
 10.1194    uses the UAs knowledge of the document's semantics to perform the
 10.1195 -  comparison.</p>
 10.1196 +  comparison.
 10.1197  
 10.1198    <div class=example>
 10.1199  
 10.1200 @@ -1857,11 +1879,11 @@
 10.1201      <code>[lang|=fr]</code> (because it has a LANG attribute) but both
 10.1202      the BODY and the P match <code>:lang(fr)</code> (because both are in
 10.1203      French). The P does not match the <code>[lang|=fr]</code> because it
 10.1204 -    does not have a LANG attribute.</p>
 10.1205 -    <pre>
 10.1206 -  &lt;body lang=fr>
 10.1207 -    &lt;p>Je suis fran&ccedil;ais.&lt;/p>
 10.1208 -  &lt;/body></pre>
 10.1209 +    does not have a LANG attribute.
 10.1210 +    <pre><!--
 10.1211 +    -->&lt;body lang=fr>&#xa;<!--
 10.1212 +    -->  &lt;p>Je suis français.&lt;/p>&#xa;<!--
 10.1213 +    -->&lt;/body></pre>
 10.1214    </div>
 10.1215  
 10.1216    <div class=example>
 10.1217 @@ -1879,7 +1901,7 @@
 10.1218      at the beginning.
 10.1219    </div>
 10.1220  
 10.1221 -  <p class="note">Wildcard language matching is new in Level 4.</p>
 10.1222 +  <p class="note">Wildcard language matching is new in Level 4.
 10.1223  
 10.1224  <h2 id="ui-states-pseudos">
 10.1225  The UI states pseudo-classes</h2>
 10.1226 @@ -1889,21 +1911,21 @@
 10.1227  
 10.1228    <p>The <dfn id='enabled-pseudo'>:enabled</dfn> pseudo-class represents user interface elements
 10.1229    that are in an enabled state; such elements have a corresponding disabled
 10.1230 -  state.</p>
 10.1231 +  state.
 10.1232  
 10.1233    <p>Conversely, the <dfn id='disabled-pseudo'>:disabled</dfn> pseudo-class represents user
 10.1234    interface elements that are in a disabled state; such elements have a
 10.1235 -  corresponding enabled state.</p>
 10.1236 +  corresponding enabled state.
 10.1237  
 10.1238    <p>What constitutes an enabled state, a disabled state, and a user interface
 10.1239    element is host-language-dependent. In a typical document most elements will be
 10.1240 -  neither <code>:enabled</code> nor <code>:disabled</code>.</p>
 10.1241 +  neither <code>:enabled</code> nor <code>:disabled</code>.
 10.1242  
 10.1243    <p class="note"><strong>Note:</strong> CSS properties that might affect a user’s ability
 10.1244    to interact with a given user interface element do not affect whether it
 10.1245    matches <code>:enabled</code> or <code>:disabled</code>; e.g., the
 10.1246    <code>display</code> and <code>visibility</code> properties have no effect
 10.1247 -  on the enabled/disabled state of an element.</p>
 10.1248 +  on the enabled/disabled state of an element.
 10.1249  
 10.1250  <h3 id="the-checked-pseudo">
 10.1251  The selected-option pseudo-class <code>:checked</code></h3>
 10.1252 @@ -1940,7 +1962,7 @@
 10.1253    <p>Like the <code>:checked</code> pseudo-class, <code>:indeterminate</code>
 10.1254    applies to all media. Components of a radio-group initialized with no
 10.1255    pre-selected choice, for example, would be <code>:indeterminate</code>
 10.1256 -  even in a static display.</p>
 10.1257 +  even in a static display.
 10.1258  
 10.1259  <h3 id="the-default-pseudo">
 10.1260  The default option pseudo-class <code>:default</code></h3>
 10.1261 @@ -2114,36 +2136,38 @@
 10.1262    and the rest of the tokenization is given by the
 10.1263    <a href="#lex">Lexical scanner</a> in section 10.2:
 10.1264  
 10.1265 -  <pre>nth
 10.1266 -    : S* [ ['-'|'+']? INTEGER? {N} [ S* ['-'|'+'] S* INTEGER ]? |
 10.1267 -           ['-'|'+']? INTEGER | {O}{D}{D} | {E}{V}{E}{N} ] S*
 10.1268 -    ;</pre>
 10.1269 +  <pre><!--
 10.1270 +  -->nth&#xa;<!--
 10.1271 +  -->: S* [ ['-'|'+']? INTEGER? {N} [ S* ['-'|'+'] S* INTEGER ]? |&#xa;<!--
 10.1272 +  -->       ['-'|'+']? INTEGER | {O}{D}{D} | {E}{V}{E}{N} ] S*&#xa;<!--
 10.1273 +  -->;</pre>
 10.1274  
 10.1275    <div class="example">
 10.1276 -  <p>Examples:</p>
 10.1277 -  <pre>tr:nth-child(2n+1) /* represents every odd row of an HTML table */
 10.1278 -  tr:nth-child(odd)  /* same */
 10.1279 -  tr:nth-child(2n+0) /* represents every even row of an HTML table */
 10.1280 -  tr:nth-child(even) /* same */
 10.1281 -
 10.1282 -  /* Alternate paragraph colours in CSS */
 10.1283 -  p:nth-child(4n+1) { color: navy; }
 10.1284 -  p:nth-child(4n+2) { color: green; }
 10.1285 -  p:nth-child(4n+3) { color: maroon; }
 10.1286 -  p:nth-child(4n+4) { color: purple; }</pre>
 10.1287 +    <p>Examples:
 10.1288 +    <pre><!--
 10.1289 +    -->tr:nth-child(2n+1) /* represents every odd row of an HTML table */&#xa;<!--
 10.1290 +    -->tr:nth-child(odd)  /* same */&#xa;<!--
 10.1291 +    -->tr:nth-child(2n+0) /* represents every even row of an HTML table */&#xa;<!--
 10.1292 +    -->tr:nth-child(even) /* same */&#xa;<!--
 10.1293 +    -->&#xa;<!--
 10.1294 +    -->/* Alternate paragraph colours in CSS */&#xa;<!--
 10.1295 +    -->p:nth-child(4n+1) { color: navy; }&#xa;<!--
 10.1296 +    -->p:nth-child(4n+2) { color: green; }&#xa;<!--
 10.1297 +    -->p:nth-child(4n+3) { color: maroon; }&#xa;<!--
 10.1298 +    -->p:nth-child(4n+4) { color: purple; }</pre>
 10.1299    </div>
 10.1300  
 10.1301    <p>When the value <var>b</var> is preceded by a negative sign,
 10.1302    the "+" character in the expression must be removed (it is
 10.1303    effectively replaced by the "-" character indicating the negative
 10.1304 -  value of <var>b</var>).</p>
 10.1305 +  value of <var>b</var>).
 10.1306  
 10.1307    <div class="example">
 10.1308 -  <p>Examples:</p>
 10.1309 -  <pre>
 10.1310 -  :nth-child(10n-1)  /* represents the 9th, 19th, 29th, etc, element */
 10.1311 -  :nth-child(10n+9)  /* Same */
 10.1312 -  :nth-child(10n+-1) /* Syntactically invalid, and would be ignored */</pre>
 10.1313 +    <p>Examples:
 10.1314 +    <pre><!--
 10.1315 +    -->:nth-child(10n-1)  /* represents the 9th, 19th, 29th, etc, element */&#xa;<!--
 10.1316 +    -->:nth-child(10n+9)  /* Same */&#xa;<!--
 10.1317 +    -->:nth-child(10n+-1) /* Syntactically invalid, and would be ignored */</pre>
 10.1318    </div>
 10.1319  
 10.1320    <p>When <var>a</var>=0, the <var>a</var><code>n</code> part need not be
 10.1321 @@ -2153,32 +2177,35 @@
 10.1322    In this case the syntax simplifies to <code>:nth-child(<var>b</var>)</code>.
 10.1323  
 10.1324    <div class="example">
 10.1325 -  <p>Examples:</p>
 10.1326 -  <pre>foo:nth-child(0n+5)   /* represents an element foo that is the 5th child
 10.1327 -                           of its parent element */
 10.1328 -  foo:nth-child(5)      /* same */</pre>
 10.1329 +    <p>Examples:
 10.1330 +    <pre><!--
 10.1331 +    -->foo:nth-child(0n+5)   /* represents an element foo that is the 5th child&#xa;<!--
 10.1332 +    -->                         of its parent element */&#xa;<!--
 10.1333 +    -->foo:nth-child(5)      /* same */</pre>
 10.1334    </div>
 10.1335  
 10.1336    <p>When <var>a</var>=1, or <var>a</var>=-1, the <code>1</code> may be
 10.1337    omitted from the rule.
 10.1338  
 10.1339    <div class="example">
 10.1340 -  <p>Examples:</p>
 10.1341 -  <p>The following selectors are therefore equivalent:</p>
 10.1342 -  <pre>bar:nth-child(1n+0)   /* represents all bar elements, specificity (0,1,1) */
 10.1343 -  bar:nth-child(n+0)    /* same */
 10.1344 -  bar:nth-child(n)      /* same */
 10.1345 -  bar                   /* same but lower specificity (0,0,1) */</pre>
 10.1346 +    <p>Examples:
 10.1347 +    <p>The following selectors are therefore equivalent:
 10.1348 +    <pre><!--
 10.1349 +    -->bar:nth-child(1n+0)   /* represents all bar elements, specificity (0,1,1) */&#xa;<!--
 10.1350 +    -->bar:nth-child(n+0)    /* same */&#xa;<!--
 10.1351 +    -->bar:nth-child(n)      /* same */&#xa;<!--
 10.1352 +    -->bar                   /* same but lower specificity (0,0,1) */</pre>
 10.1353    </div>
 10.1354  
 10.1355    <p>If <var>b</var>=0, then every <var>a</var>th element is picked. In
 10.1356    such a case, the +<var>b</var> (or -<var>b</var>) part may be omitted
 10.1357 -  unless the <var>a</var> part is already omitted.</p>
 10.1358 +  unless the <var>a</var> part is already omitted.
 10.1359  
 10.1360    <div class="example">
 10.1361 -  <p>Examples:</p>
 10.1362 -  <pre>tr:nth-child(2n+0) /* represents every even row of an HTML table */
 10.1363 -  tr:nth-child(2n) /* same */</pre>
 10.1364 +    <p>Examples:
 10.1365 +    <pre><!--
 10.1366 +    -->tr:nth-child(2n+0) /* represents every even row of an HTML table */&#xa;<!--
 10.1367 +    -->tr:nth-child(2n) /* same */</pre>
 10.1368    </div>
 10.1369  
 10.1370    <p>Whitespace is permitted after the "(", before the ")", and on either
 10.1371 @@ -2186,31 +2213,29 @@
 10.1372    <var>b</var> parts when both are present.
 10.1373  
 10.1374    <div class="example">
 10.1375 -  <p>Valid Examples with white space:</p>
 10.1376 -  <pre>
 10.1377 -  :nth-child( 3n + 1 )
 10.1378 -  :nth-child( +3n - 2 )
 10.1379 -  :nth-child( -n+ 6)
 10.1380 -  :nth-child( +6 )
 10.1381 -  </pre>
 10.1382 -  <p>Invalid Examples with white space:</p>
 10.1383 -  <pre>
 10.1384 -  :nth-child(3 n)
 10.1385 -  :nth-child(+ 2n)
 10.1386 -  :nth-child(+ 2)
 10.1387 -  </pre>
 10.1388 +    <p>Valid Examples with white space:
 10.1389 +    <pre><!--
 10.1390 +    -->:nth-child( 3n + 1 )&#xa;<!--
 10.1391 +    -->:nth-child( +3n - 2 )&#xa;<!--
 10.1392 +    -->:nth-child( -n+ 6)&#xa;<!--
 10.1393 +    -->:nth-child( +6 )</pre>
 10.1394 +    <p>Invalid Examples with white space:
 10.1395 +    <pre><!--
 10.1396 +    -->:nth-child(3 n)&#xa;<!--
 10.1397 +    -->:nth-child(+ 2n)&#xa;<!--
 10.1398 +    -->:nth-child(+ 2)</pre>
 10.1399    </div>
 10.1400  
 10.1401    <p>If both <var>a</var> and <var>b</var> are equal to zero, the
 10.1402 -  pseudo-class represents no element in the document tree.</p>
 10.1403 +  pseudo-class represents no element in the document tree.
 10.1404  
 10.1405    <p>The value <var>a</var> can be negative, but only the positive
 10.1406    values of <var>a</var><code>n</code>+<var>b</var>, for
 10.1407    <code>n</code>&ge;0, may represent an element in the document
 10.1408 -  tree.</p>
 10.1409 +  tree.
 10.1410  
 10.1411    <div class="example">
 10.1412 -  <p>Example:</p>
 10.1413 +  <p>Example:
 10.1414    <pre>html|tr:nth-child(-n+6)  /* represents the 6 first rows of XHTML tables */</pre>
 10.1415    </div>
 10.1416  
 10.1417 @@ -2229,11 +2254,12 @@
 10.1418  
 10.1419  
 10.1420    <div class="example">
 10.1421 -  <p>Examples:</p>
 10.1422 -  <pre>tr:nth-last-child(-n+2)    /* represents the two last rows of an HTML table */
 10.1423 -
 10.1424 -  foo:nth-last-child(odd)    /* represents all odd foo elements in their parent element,
 10.1425 -                                counting from the last one */</pre>
 10.1426 +    <p>Examples:
 10.1427 +    <pre><!--
 10.1428 +    -->tr:nth-last-child(-n+2)    /* represents the two last rows of an HTML table */&#xa;<!--
 10.1429 +    -->&#xa;<!--
 10.1430 +    -->foo:nth-last-child(odd)    /* represents all odd foo elements in their parent element,&#xa;<!--
 10.1431 +    -->                              counting from the last one */</pre>
 10.1432    </div>
 10.1433  
 10.1434  
 10.1435 @@ -2251,10 +2277,11 @@
 10.1436  
 10.1437  
 10.1438    <div class="example">
 10.1439 -  <p>CSS example:</p>
 10.1440 -  <p>This allows an author to alternate the position of floated images:</p>
 10.1441 -  <pre>img:nth-of-type(2n+1) { float: right; }
 10.1442 -  img:nth-of-type(2n) { float: left; }</pre>
 10.1443 +    <p>CSS example:
 10.1444 +    <p>This allows an author to alternate the position of floated images:
 10.1445 +    <pre><!--
 10.1446 +    -->img:nth-of-type(2n+1) { float: right; }&#xa;<!--
 10.1447 +    -->img:nth-of-type(2n) { float: left; }</pre>
 10.1448    </div>
 10.1449  
 10.1450  
 10.1451 @@ -2272,14 +2299,14 @@
 10.1452  
 10.1453  
 10.1454    <div class="example">
 10.1455 -   <p>Example:</p>
 10.1456 +   <p>Example:
 10.1457     <p>To represent all <code>h2</code> children of an XHTML
 10.1458     <code>body</code> except the first and last, one could use the
 10.1459 -   following selector:</p>
 10.1460 -   <pre>body &gt; h2:nth-of-type(n+2):nth-last-of-type(n+2)</pre>
 10.1461 +   following selector:
 10.1462 +   <pre>body > h2:nth-of-type(n+2):nth-last-of-type(n+2)</pre>
 10.1463     <p>In this case, one could also use <code>:not()</code>, although the
 10.1464 -   selector ends up being just as long:</p>
 10.1465 -   <pre>body &gt; h2:not(:first-of-type):not(:last-of-type)</pre>
 10.1466 +   selector ends up being just as long:
 10.1467 +   <pre>body > h2:not(:first-of-type):not(:last-of-type)</pre>
 10.1468    </div>
 10.1469  
 10.1470  <h3 id="the-nth-match-pseudo">
 10.1471 @@ -2319,28 +2346,28 @@
 10.1472    represents an element that is the first child of some other element.
 10.1473  
 10.1474    <div class="example">
 10.1475 -    <p>Examples:</p>
 10.1476 +    <p>Examples:
 10.1477      <p>The following selector represents a <code>p</code> element that is
 10.1478 -    the first child of a <code>div</code> element:</p>
 10.1479 -    <pre>div &gt; p:first-child</pre>
 10.1480 +    the first child of a <code>div</code> element:
 10.1481 +    <pre>div > p:first-child</pre>
 10.1482      <p>This selector can represent the <code>p</code> inside the
 10.1483 -    <code>div</code> of the following fragment:</p>
 10.1484 -    <pre>
 10.1485 -  &lt;p&gt; The last P before the note.&lt;/p&gt;
 10.1486 -  &lt;div class="note"&gt;
 10.1487 -     &lt;p&gt; The first P inside the note.&lt;/p&gt;
 10.1488 -  &lt;/div&gt;</pre>but cannot represent the second <code>p</code> in the following
 10.1489 -  fragment:
 10.1490 -    <pre>
 10.1491 -  &lt;p&gt; The last P before the note.&lt;/p&gt;
 10.1492 -  &lt;div class="note"&gt;
 10.1493 -     &lt;h2&gt; Note &lt;/h2&gt;
 10.1494 -     &lt;p&gt; The first P inside the note.&lt;/p&gt;
 10.1495 -  &lt;/div&gt;</pre>
 10.1496 -    <p>The following two selectors are usually equivalent:</p>
 10.1497 -    <pre>
 10.1498 -  * &gt; a:first-child /* a is first child of any element */
 10.1499 -  a:first-child /* Same (assuming a is not the root element) */</pre>
 10.1500 +    <code>div</code> of the following fragment:
 10.1501 +    <pre><!--
 10.1502 +    -->&lt;p> The last P before the note.&lt;/p>&#xa;<!--
 10.1503 +    -->&lt;div class="note">&#xa;<!--
 10.1504 +       -->&lt;p> The first P inside the note.&lt;/p>&#xa;<!--
 10.1505 +    -->&lt;/div></pre>
 10.1506 +    but cannot represent the second <code>p</code> in the following fragment:
 10.1507 +    <pre><!--
 10.1508 +    -->&lt;p> The last P before the note.&lt;/p>&#xa;<!--
 10.1509 +    -->&lt;div class="note">&#xa;<!--
 10.1510 +       -->&lt;h2> Note &lt;/h2>&#xa;<!--
 10.1511 +       -->&lt;p> The first P inside the note.&lt;/p>&#xa;<!--
 10.1512 +    -->&lt;/div></pre>
 10.1513 +    <p>The following two selectors are usually equivalent:
 10.1514 +    <pre><!--
 10.1515 +    -->* > a:first-child /* a is first child of any element */&#xa;<!--
 10.1516 +    -->a:first-child /* Same (assuming a is not the root element) */</pre>
 10.1517    </div>
 10.1518  
 10.1519  <h3 id="the-last-child-pseudo">
 10.1520 @@ -2350,10 +2377,10 @@
 10.1521    represents an element that is the last child of some other element.
 10.1522  
 10.1523    <div class="example">
 10.1524 -   <p>Example:</p>
 10.1525 +   <p>Example:
 10.1526     <p>The following selector represents a list item <code>li</code> that
 10.1527     is the last child of an ordered list <code>ol</code>.
 10.1528 -   <pre>ol &gt; li:last-child</pre>
 10.1529 +   <pre>ol > li:last-child</pre>
 10.1530    </div>
 10.1531  
 10.1532  <h3 id="the-first-of-type-pseudo">
 10.1533 @@ -2364,26 +2391,26 @@
 10.1534    children of its parent element.
 10.1535  
 10.1536    <div class="example">
 10.1537 -  <p>Example:</p>
 10.1538 -  <p>The following selector represents a definition title
 10.1539 -  <code>dt</code> inside a definition list <code>dl</code>, this
 10.1540 -  <code>dt</code> being the first of its type in the list of children of
 10.1541 -  its parent element.</p>
 10.1542 -  <pre>dl dt:first-of-type</pre>
 10.1543 -  <p>It is a valid description for the first two <code>dt</code>
 10.1544 -  elements in the following example but not for the third one:</p>
 10.1545 -  <pre>
 10.1546 -  &lt;dl&gt;
 10.1547 -   &lt;dt&gt;gigogne&lt;/dt&gt;
 10.1548 -   &lt;dd&gt;
 10.1549 -    &lt;dl&gt;
 10.1550 -     &lt;dt&gt;fus&eacute;e&lt;/dt&gt;
 10.1551 -     &lt;dd&gt;multistage rocket&lt;/dd&gt;
 10.1552 -     &lt;dt&gt;table&lt;/dt&gt;
 10.1553 -     &lt;dd&gt;nest of tables&lt;/dd&gt;
 10.1554 -    &lt;/dl&gt;
 10.1555 -   &lt;/dd&gt;
 10.1556 -  &lt;/dl&gt;</pre>
 10.1557 +    <p>Example:
 10.1558 +    <p>The following selector represents a definition title
 10.1559 +    <code>dt</code> inside a definition list <code>dl</code>, this
 10.1560 +    <code>dt</code> being the first of its type in the list of children of
 10.1561 +    its parent element.
 10.1562 +    <pre>dl dt:first-of-type</pre>
 10.1563 +    <p>It is a valid description for the first two <code>dt</code>
 10.1564 +    elements in the following example but not for the third one:
 10.1565 +    <pre><!--
 10.1566 +    -->&lt;dl>&#xa;<!--
 10.1567 +     -->&lt;dt>gigogne&lt;/dt>&#xa;<!--
 10.1568 +     -->&lt;dd>&#xa;<!--
 10.1569 +      -->&lt;dl>&#xa;<!--
 10.1570 +       -->&lt;dt>fus&eacute;e&lt;/dt>&#xa;<!--
 10.1571 +       -->&lt;dd>multistage rocket&lt;/dd>&#xa;<!--
 10.1572 +       -->&lt;dt>table&lt;/dt>&#xa;<!--
 10.1573 +       -->&lt;dd>nest of tables&lt;/dd>&#xa;<!--
 10.1574 +      -->&lt;/dl>&#xa;<!--
 10.1575 +     -->&lt;/dd>&#xa;<!--
 10.1576 +    -->&lt;/dl></pre>
 10.1577    </div>
 10.1578  
 10.1579  <h3 id="the-last-of-type-pseudo">
 10.1580 @@ -2392,13 +2419,13 @@
 10.1581    <p>Same as <code>:nth-last-of-type(1)</code>. The
 10.1582    <dfn id='last-of-type-pseudo'>:last-of-type</dfn> pseudo-class represents an element that is
 10.1583    the last sibling of its type in the list of children of its parent
 10.1584 -  element.</p>
 10.1585 +  element.
 10.1586  
 10.1587    <div class="example">
 10.1588 -   <p>Example:</p>
 10.1589 +   <p>Example:
 10.1590     <p>The following selector represents the last data cell
 10.1591 -   <code>td</code> of a table row <code>tr</code>.</p>
 10.1592 -   <pre>tr &gt; td:last-of-type</pre>
 10.1593 +   <code>td</code> of a table row <code>tr</code>.
 10.1594 +   <pre>tr > td:last-of-type</pre>
 10.1595    </div>
 10.1596  
 10.1597  <h3 id="the-only-child-pseudo">
 10.1598 @@ -2409,7 +2436,7 @@
 10.1599    element has no other element children. Same as
 10.1600    <code>:first-child:last-child</code> or
 10.1601    <code>:nth-child(1):nth-last-child(1)</code>, but with a lower
 10.1602 -  specificity.</p>
 10.1603 +  specificity.
 10.1604  
 10.1605  <h3 id="the-only-of-type-pseudo">
 10.1606  <code>:only-of-type</code> pseudo-class</h3>
 10.1607 @@ -2419,7 +2446,7 @@
 10.1608    element has no other element children with the same expanded element
 10.1609    name. Same as <code>:first-of-type:last-of-type</code> or
 10.1610    <code>:nth-of-type(1):nth-last-of-type(1)</code>, but with a lower
 10.1611 -  specificity.</p>
 10.1612 +  specificity.
 10.1613  
 10.1614  
 10.1615  <h3 id="the-empty-pseudo">
 10.1616 @@ -2431,17 +2458,17 @@
 10.1617    nodes, and entity references) whose data has a non-zero length must be
 10.1618    considered as affecting emptiness;
 10.1619    comments, processing instructions, and other nodes must not affect whether
 10.1620 -  an element is considered empty or not.</p>
 10.1621 +  an element is considered empty or not.
 10.1622  
 10.1623    <div class="example">
 10.1624 -   <p>Examples:</p>
 10.1625 -   <p><code>p:empty</code> is a valid representation of the following fragment:</p>
 10.1626 -   <pre>&lt;p&gt;&lt;/p&gt;</pre>
 10.1627 +   <p>Examples:
 10.1628 +   <p><code>p:empty</code> is a valid representation of the following fragment:
 10.1629 +   <pre>&lt;p>&lt;/p></pre>
 10.1630     <p><code>foo:empty</code> is not a valid representation for the
 10.1631 -   following fragments:</p>
 10.1632 -   <pre>&lt;foo&gt;bar&lt;/foo&gt;</pre>
 10.1633 -   <pre>&lt;foo&gt;&lt;bar&gt;bla&lt;/bar&gt;&lt;/foo&gt;</pre>
 10.1634 -   <pre>&lt;foo&gt;this is not &lt;bar&gt;:empty&lt;/bar&gt;&lt;/foo&gt;</pre>
 10.1635 +   following fragments:
 10.1636 +   <pre>&lt;foo>bar&lt;/foo></pre>
 10.1637 +   <pre>&lt;foo>&lt;bar>bla&lt;/bar>&lt;/foo></pre>
 10.1638 +   <pre>&lt;foo>this is not &lt;bar>:empty&lt;/bar>&lt;/foo></pre>
 10.1639    </div>
 10.1640  
 10.1641  <h2 id="combinators">
 10.1642 @@ -2460,28 +2487,28 @@
 10.1643    arbitrary descendant of some ancestor element <code>A</code>.
 10.1644  
 10.1645    <div class="example">
 10.1646 -   <p>Examples:</p>
 10.1647 -   <p>For example, consider the following selector:</p>
 10.1648 -   <pre>h1 em</pre>
 10.1649 -   <p>It represents an <code>em</code> element being the descendant of
 10.1650 -   an <code>h1</code> element. It is a correct and valid, but partial,
 10.1651 -   description of the following fragment:</p>
 10.1652 -   <pre>
 10.1653 -  &lt;h1&gt;This &lt;span class="myclass"&gt;headline
 10.1654 -  is &lt;em&gt;very&lt;/em&gt; important&lt;/span&gt;&lt;/h1&gt;</pre>
 10.1655 -   <p>The following selector:</p>
 10.1656 -   <pre>div * p</pre>
 10.1657 -   <p>represents a <code>p</code> element that is a grandchild or later
 10.1658 -   descendant of a <code>div</code> element. Note the whitespace on
 10.1659 -   either side of the "*" is not part of the universal selector; the
 10.1660 -   whitespace is a combinator indicating that the <code>div</code> must be the
 10.1661 -   ancestor of some element, and that that element must be an ancestor
 10.1662 -   of the <code>p</code>.</p>
 10.1663 -   <p>The following selector, which combines descendant combinators and
 10.1664 -   <a href="#attribute-selectors">attribute selectors</a>, represents an
 10.1665 -   element that (1) has the <code>href</code> attribute set and (2) is
 10.1666 -   inside a <code>p</code> that is itself inside a <code>div</code>:</p>
 10.1667 -   <pre>div p *[href]</pre>
 10.1668 +    <p>Examples:
 10.1669 +    <p>For example, consider the following selector:
 10.1670 +    <pre>h1 em</pre>
 10.1671 +    <p>It represents an <code>em</code> element being the descendant of
 10.1672 +    an <code>h1</code> element. It is a correct and valid, but partial,
 10.1673 +    description of the following fragment:
 10.1674 +    <pre><!--
 10.1675 +    -->&lt;h1>This &lt;span class="myclass">headline&#xa;<!--
 10.1676 +    -->is &lt;em>very&lt;/em> important&lt;/span>&lt;/h1></pre>
 10.1677 +    <p>The following selector:
 10.1678 +    <pre>div * p</pre>
 10.1679 +    <p>represents a <code>p</code> element that is a grandchild or later
 10.1680 +    descendant of a <code>div</code> element. Note the whitespace on
 10.1681 +    either side of the "*" is not part of the universal selector; the
 10.1682 +    whitespace is a combinator indicating that the <code>div</code> must be the
 10.1683 +    ancestor of some element, and that that element must be an ancestor
 10.1684 +    of the <code>p</code>.
 10.1685 +    <p>The following selector, which combines descendant combinators and
 10.1686 +    <a href="#attribute-selectors">attribute selectors</a>, represents an
 10.1687 +    element that (1) has the <code>href</code> attribute set and (2) is
 10.1688 +    inside a <code>p</code> that is itself inside a <code>div</code>:
 10.1689 +    <pre>div p *[href]</pre>
 10.1690    </div>
 10.1691  
 10.1692  <h3 id="child-combinators">
 10.1693 @@ -2489,29 +2516,29 @@
 10.1694  
 10.1695    <p>A <dfn>child combinator</dfn> describes a childhood relationship
 10.1696    between two elements. A child combinator is made of the
 10.1697 -  &quot;greater-than sign&quot; (U+003E, <code>&gt;</code>) character and
 10.1698 +  &quot;greater-than sign&quot; (U+003E, <code>></code>) character and
 10.1699    separates two <i>compound selectors</i>.
 10.1700  
 10.1701  
 10.1702    <div class="example">
 10.1703 -   <p>Examples:</p>
 10.1704 +   <p>Examples:
 10.1705     <p>The following selector represents a <code>p</code> element that is
 10.1706 -   child of <code>body</code>:</p>
 10.1707 -   <pre>body &gt; p</pre>
 10.1708 +   child of <code>body</code>:
 10.1709 +   <pre>body > p</pre>
 10.1710     <p>The following example combines descendant combinators and child
 10.1711 -   combinators.</p>
 10.1712 -   <pre>div ol&gt;li p</pre><!-- LEAVE THOSE SPACES OUT! see below -->
 10.1713 +   combinators.
 10.1714 +   <pre>div ol>li p</pre><!-- LEAVE THOSE SPACES OUT! see below -->
 10.1715     <p>It represents a <code>p</code> element that is a descendant of an
 10.1716     <code>li</code> element; the <code>li</code> element must be the
 10.1717     child of an <code>ol</code> element; the <code>ol</code> element must
 10.1718     be a descendant of a <code>div</code>. Notice that the optional white
 10.1719 -   space around the "&gt;" combinator has been left out.</p>
 10.1720 +   space around the ">" combinator has been left out.
 10.1721    </div>
 10.1722  
 10.1723    <p>For information on selecting the first child of an element, please
 10.1724    see the section on the <code><a
 10.1725    href="#structural-pseudos">:first-child</a></code> pseudo-class
 10.1726 -  above.</p>
 10.1727 +  above.
 10.1728  
 10.1729  <h3 id="adjacent-sibling-combinators">
 10.1730  Next-sibling combinator</h3>
 10.1731 @@ -2527,14 +2554,14 @@
 10.1732    are ignored when considering the adjacency of elements.
 10.1733  
 10.1734    <div class="example">
 10.1735 -   <p>Examples:</p>
 10.1736 +   <p>Examples:
 10.1737     <p>The following selector represents a <code>p</code> element
 10.1738 -   immediately following a <code>math</code> element:</p>
 10.1739 +   immediately following a <code>math</code> element:
 10.1740     <pre>math + p</pre>
 10.1741     <p>The following selector is conceptually similar to the one in the
 10.1742     previous example, except that it adds an attribute selector &mdash; it
 10.1743     adds a constraint to the <code>h1</code> element, that it must have
 10.1744 -   <code>class="opener"</code>:</p>
 10.1745 +   <code>class="opener"</code>:
 10.1746     <pre>h1.opener + h2</pre>
 10.1747    </div>
 10.1748  
 10.1749 @@ -2547,17 +2574,17 @@
 10.1750    The elements represented by the two <i>compound selectors</i> share
 10.1751    the same parent in the document tree and the element represented by
 10.1752    the first compound selector precedes (not necessarily immediately) the element
 10.1753 -  represented by the second one.</p>
 10.1754 +  represented by the second one.
 10.1755  
 10.1756    <div class="example">
 10.1757 -   <p>Example:</p>
 10.1758 +   <p>Example:
 10.1759     <pre>h1 ~ pre</pre>
 10.1760     <p>represents a <code>pre</code> element following an <code>h1</code>. It
 10.1761 -   is a correct and valid, but partial, description of:</p>
 10.1762 +   is a correct and valid, but partial, description of:
 10.1763     <pre>
 10.1764 -  &lt;h1&gt;Definition of the function a&lt;/h1&gt;
 10.1765 -  &lt;p&gt;Function a(x) has to be applied to all figures in the table.&lt;/p&gt;
 10.1766 -  &lt;pre&gt;function a(x) = 12x/13.5&lt;/pre&gt;</pre>
 10.1767 +  &lt;h1>Definition of the function a&lt;/h1>
 10.1768 +  &lt;p>Function a(x) has to be applied to all figures in the table.&lt;/p>
 10.1769 +  &lt;pre>function a(x) = 12x/13.5&lt;/pre></pre>
 10.1770    </div>
 10.1771  
 10.1772  <h3 id="idref-combinators">
 10.1773 @@ -2579,16 +2606,18 @@
 10.1774      Attribute matching for reference combinators follow the same rules as for <a href="http://www.w3.org/TR/css3-selectors/#attribute-selectors">attribute selectors</a>.
 10.1775  
 10.1776    <div class="example">
 10.1777 -    <p>The following example highlights an <code>&lt;input&gt;</code> element
 10.1778 +    <p>The following example highlights an <code>&lt;input></code> element
 10.1779        when its
 10.1780 -      <a href="http://www.w3.org/TR/html40/interact/forms.html#h-17.9"><code>&lt;label&gt;</code></a>
 10.1781 -      is focused or hovered-over:</p>
 10.1782 -    <pre>label:matches(:hover, :focus) /for/ input,       /* association by "for" attribute */
 10.1783 -<!--  -->label:matches(:hover, :focus):not([for]) input { /* association by containment */
 10.1784 -<!--  -->  box-shadow: yellow 0 0 10px; }</pre>
 10.1785 +      <a href="http://www.w3.org/TR/html40/interact/forms.html#h-17.9"><code>&lt;label></code></a>
 10.1786 +      is focused or hovered-over:
 10.1787 +    <pre><!--
 10.1788 +    -->label:matches(:hover, :focus) /for/ input,       /* association by "for" attribute */&#xa;<!--
 10.1789 +    -->label:matches(:hover, :focus):not([for]) input { /* association by containment */&#xa;<!--
 10.1790 +      -->box-shadow: yellow 0 0 10px; &#xa;<!--
 10.1791 +    -->}</pre>
 10.1792    </div>
 10.1793  
 10.1794 -  <p class="issue">This could also be implemented as a functional pseudo-class.</p>
 10.1795 +  <p class="issue">This could also be implemented as a functional pseudo-class.
 10.1796  
 10.1797  <h2 id="column-selectors">
 10.1798  Grid-Structural Selectors</h2>
 10.1799 @@ -2618,16 +2647,16 @@
 10.1800    it is represented by a selector indicating membership in any of those columns.
 10.1801  
 10.1802    <div class="example">
 10.1803 -    <p>The following example makes cells C, E, and G yellow.</p>
 10.1804 +    <p>The following example makes cells C, E, and G yellow.
 10.1805      <pre>col.selected || td { background: yellow; }</pre>
 10.1806 -    <pre>
 10.1807 -<!-- -->&lt;table>
 10.1808 -<!-- -->  &lt;col span="2">
 10.1809 -<!-- -->  &lt;col class="selected">
 10.1810 -<!-- -->  &lt;tr>&lt;td>A &lt;td>B &lt;td>C
 10.1811 -<!-- -->  &lt;tr>&lt;td span="2">D &lt;td>E
 10.1812 -<!-- -->  &lt;tr>&lt;td>F &lt;td span="2">G
 10.1813 -<!-- -->&lt;/table></pre>
 10.1814 +    <pre><!--
 10.1815 +    -->&lt;table>&#xa;<!--
 10.1816 +    -->  &lt;col span="2">&#xa;<!--
 10.1817 +    -->  &lt;col class="selected">&#xa;<!--
 10.1818 +    -->  &lt;tr>&lt;td>A &lt;td>B &lt;td>C&#xa;<!--
 10.1819 +    -->  &lt;tr>&lt;td span="2">D &lt;td>E&#xa;<!--
 10.1820 +    -->  &lt;tr>&lt;td>F &lt;td span="2">G&#xa;<!--
 10.1821 +    -->&lt;/table></pre>
 10.1822    </div>
 10.1823  
 10.1824  <h3 id="the-nth-column-pseudo">
 10.1825 @@ -2670,13 +2699,13 @@
 10.1826  <h2 id="specificity">
 10.1827  Calculating a selector's specificity</h2>
 10.1828  
 10.1829 -  <p>A selector's specificity is calculated as follows:</p>
 10.1830 +  <p>A selector's specificity is calculated as follows:
 10.1831  
 10.1832    <ul>
 10.1833 -    <li>count the number of ID selectors in the selector (= a)</li>
 10.1834 -    <li>count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)</li>
 10.1835 -    <li>count the number of type selectors and pseudo-elements in the selector (= c)</li>
 10.1836 -    <li>ignore the universal selector</li>
 10.1837 +    <li>count the number of ID selectors in the selector (= a)
 10.1838 +    <li>count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)
 10.1839 +    <li>count the number of type selectors and pseudo-elements in the selector (= c)
 10.1840 +    <li>ignore the universal selector
 10.1841    </ul>
 10.1842  
 10.1843    <p>The specificity of a <a href="#negation">negation</a> or
 10.1844 @@ -2688,34 +2717,34 @@
 10.1845      specificity, if possible. See <a href="http://lists.w3.org/Archives/Public/www-style/2010Sep/0534.html">dbaron's message</a>.
 10.1846  
 10.1847    <p>Concatenating the three numbers a-b-c (in a number system with a
 10.1848 -  large base) gives the specificity.</p>
 10.1849 +  large base) gives the specificity.
 10.1850  
 10.1851    <div class="example">
 10.1852 -  <p>Examples:</p>
 10.1853 -  <pre>
 10.1854 -  *               /* a=0 b=0 c=0 -&gt; specificity =   0 */
 10.1855 -  LI              /* a=0 b=0 c=1 -&gt; specificity =   1 */
 10.1856 -  UL LI           /* a=0 b=0 c=2 -&gt; specificity =   2 */
 10.1857 -  UL OL+LI        /* a=0 b=0 c=3 -&gt; specificity =   3 */
 10.1858 -  H1 + *[REL=up]  /* a=0 b=1 c=1 -&gt; specificity =  11 */
 10.1859 -  UL OL LI.red    /* a=0 b=1 c=3 -&gt; specificity =  13 */
 10.1860 -  LI.red.level    /* a=0 b=2 c=1 -&gt; specificity =  21 */
 10.1861 -  #x34y           /* a=1 b=0 c=0 -&gt; specificity = 100 */
 10.1862 -  #s12:not(FOO)   /* a=1 b=0 c=1 -&gt; specificity = 101 */
 10.1863 -  </pre>
 10.1864 +    <p>Examples:
 10.1865 +    id="the-"&#xa;<!--
 10.1866 +    -->*               /* a=0 b=0 c=0 -> specificity =   0 */&#xa;<!--
 10.1867 +    -->LI              /* a=0 b=0 c=1 -> specificity =   1 */&#xa;<!--
 10.1868 +    -->UL LI           /* a=0 b=0 c=2 -> specificity =   2 */&#xa;<!--
 10.1869 +    -->UL OL+LI        /* a=0 b=0 c=3 -> specificity =   3 */&#xa;<!--
 10.1870 +    -->H1 + *[REL=up]  /* a=0 b=1 c=1 -> specificity =  11 */&#xa;<!--
 10.1871 +    -->UL OL LI.red    /* a=0 b=1 c=3 -> specificity =  13 */&#xa;<!--
 10.1872 +    -->LI.red.level    /* a=0 b=2 c=1 -> specificity =  21 */&#xa;<!--
 10.1873 +    -->#x34y           /* a=1 b=0 c=0 -> specificity = 100 */&#xa;<!--
 10.1874 +    -->#s12:not(FOO)   /* a=1 b=0 c=1 -> specificity = 101 */
 10.1875 +    </pre>
 10.1876    </div>
 10.1877  
 10.1878    <p class="note"><strong>Note:</strong> Repeated occurrances of the
 10.1879 -  same simple selector are allowed and do increase specificity.</p>
 10.1880 +  same simple selector are allowed and do increase specificity.
 10.1881  
 10.1882    <p class="note"><strong>Note:</strong> the specificity of the styles
 10.1883    specified in an HTML <code>style</code> attribute is described in CSS
 10.1884 -  2.1. [[!CSS21]].</p>
 10.1885 +  2.1. [[!CSS21]].
 10.1886  
 10.1887  <h2 id="formal-syntax">
 10.1888  Formal Syntax</h2>
 10.1889  
 10.1890 -<p class="issue">This section needs to be updated.</p>
 10.1891 +<p class="issue">This section needs to be updated.
 10.1892  
 10.1893  <h3 id="grammar">
 10.1894  Grammar</h3>
 10.1895 @@ -2725,93 +2754,94 @@
 10.1896    it directly, since it doesn't express the parsing conventions). The
 10.1897    format of the productions is optimized for human consumption and some
 10.1898    shorthand notations beyond Yacc (see [[!YACC]])
 10.1899 -  are used:</p>
 10.1900 +  are used:
 10.1901  
 10.1902    <ul>
 10.1903      <li><b>*</b>: 0 or more
 10.1904      <li><b>+</b>: 1 or more
 10.1905      <li><b>?</b>: 0 or 1
 10.1906      <li><b>|</b>: separates alternatives
 10.1907 -    <li><b>[ ]</b>: grouping </li>
 10.1908 +    <li><b>[ ]</b>: grouping 
 10.1909    </ul>
 10.1910  
 10.1911 -  <p>The productions are:</p>
 10.1912 -
 10.1913 -  <pre>selectors_group
 10.1914 -    : selector [ COMMA S* selector ]*
 10.1915 -    ;
 10.1916 -
 10.1917 -  selector
 10.1918 -    : compound_selector [ combinator simple_selector_sequence ]*
 10.1919 -    ;
 10.1920 -
 10.1921 -  combinator
 10.1922 -    /* combinators can be surrounded by whitespace */
 10.1923 -    : PLUS S* | GREATER S* | TILDE S* | S+
 10.1924 -    ;
 10.1925 -
 10.1926 -  simple_selector_sequence
 10.1927 -    : [ type_selector | universal ]
 10.1928 -      [ HASH | class | attrib | pseudo | negation ]*
 10.1929 -    | [ HASH | class | attrib | pseudo | negation ]+
 10.1930 -    ;
 10.1931 -
 10.1932 -  type_selector
 10.1933 -    : [ namespace_prefix ]? element_name
 10.1934 -    ;
 10.1935 -
 10.1936 -  namespace_prefix
 10.1937 -    : [ IDENT | '*' ]? '|'
 10.1938 -    ;
 10.1939 -
 10.1940 -  element_name
 10.1941 -    : IDENT
 10.1942 -    ;
 10.1943 -
 10.1944 -  universal
 10.1945 -    : [ namespace_prefix ]? '*'
 10.1946 -    ;
 10.1947 -
 10.1948 -  class
 10.1949 -    : '.' IDENT
 10.1950 -    ;
 10.1951 -
 10.1952 -  attrib
 10.1953 -    : '[' S* [ namespace_prefix ]? IDENT S*
 10.1954 -          [ [ PREFIXMATCH |
 10.1955 -              SUFFIXMATCH |
 10.1956 -              SUBSTRINGMATCH |
 10.1957 -              '=' |
 10.1958 -              INCLUDES |
 10.1959 -              DASHMATCH ] S* [ IDENT | STRING ] S* [IDENT S*]?
 10.1960 -          ]? ']'
 10.1961 -    ;
 10.1962 -
 10.1963 -  pseudo
 10.1964 -    /* '::' starts a pseudo-element, ':' a pseudo-class */
 10.1965 -    /* Exceptions: :first-line, :first-letter, :before and :after. */
 10.1966 -    /* Note that pseudo-elements are restricted to one per selector and */
 10.1967 -    /* occur only in the last compound_selector. */
 10.1968 -    : ':' ':'? [ IDENT | functional_pseudo ]
 10.1969 -    ;
 10.1970 -
 10.1971 -  functional_pseudo
 10.1972 -    : FUNCTION S* expression ')'
 10.1973 -    ;
 10.1974 -
 10.1975 -  expression
 10.1976 -    /* In CSS3, the expressions are identifiers, strings, */
 10.1977 -    /* or of the form "an+b" */
 10.1978 -    : [ [ PLUS | '-' | DIMENSION | NUMBER | STRING | IDENT ] S* ]+
 10.1979 -    ;
 10.1980 -
 10.1981 -  negation
 10.1982 -    : NOT S* negation_arg S* ')'
 10.1983 -    ;
 10.1984 -
 10.1985 -  negation_arg
 10.1986 -    : type_selector | universal | HASH | class | attrib | pseudo
 10.1987 -    ;</pre>
 10.1988 +  <p>The productions are:
 10.1989 +
 10.1990 +  <pre>
 10.1991 +    selectors_group
 10.1992 +      : selector [ COMMA S* selector ]*
 10.1993 +      ;
 10.1994 +
 10.1995 +    selector
 10.1996 +      : compound_selector [ combinator simple_selector_sequence ]*
 10.1997 +      ;
 10.1998 +
 10.1999 +    combinator
 10.2000 +      /* combinators can be surrounded by whitespace */
 10.2001 +      : PLUS S* | GREATER S* | TILDE S* | S+
 10.2002 +      ;
 10.2003 +
 10.2004 +    simple_selector_sequence
 10.2005 +      : [ type_selector | universal ]
 10.2006 +        [ HASH | class | attrib | pseudo | negation ]*
 10.2007 +      | [ HASH | class | attrib | pseudo | negation ]+
 10.2008 +      ;
 10.2009 +
 10.2010 +    type_selector
 10.2011 +      : [ namespace_prefix ]? element_name
 10.2012 +      ;
 10.2013 +
 10.2014 +    namespace_prefix
 10.2015 +      : [ IDENT | '*' ]? '|'
 10.2016 +      ;
 10.2017 +
 10.2018 +    element_name
 10.2019 +      : IDENT
 10.2020 +      ;
 10.2021 +
 10.2022 +    universal
 10.2023 +      : [ namespace_prefix ]? '*'
 10.2024 +      ;
 10.2025 +
 10.2026 +    class
 10.2027 +      : '.' IDENT
 10.2028 +      ;
 10.2029 +
 10.2030 +    attrib
 10.2031 +      : '[' S* [ namespace_prefix ]? IDENT S*
 10.2032 +            [ [ PREFIXMATCH |
 10.2033 +                SUFFIXMATCH |
 10.2034 +                SUBSTRINGMATCH |
 10.2035 +                '=' |
 10.2036 +                INCLUDES |
 10.2037 +                DASHMATCH ] S* [ IDENT | STRING ] S* [IDENT S*]?
 10.2038 +            ]? ']'
 10.2039 +      ;
 10.2040 +
 10.2041 +    pseudo
 10.2042 +      /* '::' starts a pseudo-element, ':' a pseudo-class */
 10.2043 +      /* Exceptions: :first-line, :first-letter, :before and :after. */
 10.2044 +      /* Note that pseudo-elements are restricted to one per selector and */
 10.2045 +      /* occur only in the last compound_selector. */
 10.2046 +      : ':' ':'? [ IDENT | functional_pseudo ]
 10.2047 +      ;
 10.2048 +
 10.2049 +    functional_pseudo
 10.2050 +      : FUNCTION S* expression ')'
 10.2051 +      ;
 10.2052 +
 10.2053 +    expression
 10.2054 +      /* In CSS3, the expressions are identifiers, strings, */
 10.2055 +      /* or of the form "an+b" */
 10.2056 +      : [ [ PLUS | '-' | DIMENSION | NUMBER | STRING | IDENT ] S* ]+
 10.2057 +      ;
 10.2058 +
 10.2059 +    negation
 10.2060 +      : NOT S* negation_arg S* ')'
 10.2061 +      ;
 10.2062 +
 10.2063 +    negation_arg
 10.2064 +      : type_selector | universal | HASH | class | attrib | pseudo
 10.2065 +      ;</pre>
 10.2066  
 10.2067  
 10.2068  <h3 id="lex">
 10.2069 @@ -2819,76 +2849,76 @@
 10.2070  
 10.2071    <p>The following is the tokenizer, written in Flex (see
 10.2072    [[!FLEX]]) notation. The tokenizer is
 10.2073 -  case-insensitive.</p>
 10.2074 +  case-insensitive.
 10.2075  
 10.2076    <p>The two occurrences of "\377" represent the highest character
 10.2077    number that current versions of Flex can deal with (decimal 255). They
 10.2078    should be read as "\4177777" (decimal 1114111), which is the highest
 10.2079 -  possible code point in Unicode/ISO-10646. [[!UNICODE]]</p>
 10.2080 -
 10.2081 -  <pre>
 10.2082 -  %option case-insensitive
 10.2083 -
 10.2084 -  ident     [-]?{nmstart}{nmchar}*
 10.2085 -  name      {nmchar}+
 10.2086 -  nmstart   [_a-z]|{nonascii}|{escape}
 10.2087 -  nonascii  [^\0-\177]
 10.2088 -  unicode   \\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])?
 10.2089 -  escape    {unicode}|\\[^\n\r\f0-9a-f]
 10.2090 -  nmchar    [_a-z0-9-]|{nonascii}|{escape}
 10.2091 -  num       [0-9]+|[0-9]*\.[0-9]+
 10.2092 -  string    {string1}|{string2}
 10.2093 -  string1   \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*\"
 10.2094 -  string2   \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*\'
 10.2095 -  invalid   {invalid1}|{invalid2}
 10.2096 -  invalid1  \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*
 10.2097 -  invalid2  \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*
 10.2098 -  nl        \n|\r\n|\r|\f
 10.2099 -  w         [ \t\r\n\f]*
 10.2100 -
 10.2101 -  D         d|\\0{0,4}(44|64)(\r\n|[ \t\r\n\f])?
 10.2102 -  E         e|\\0{0,4}(45|65)(\r\n|[ \t\r\n\f])?
 10.2103 -  N         n|\\0{0,4}(4e|6e)(\r\n|[ \t\r\n\f])?|\\n
 10.2104 -  O         o|\\0{0,4}(4f|6f)(\r\n|[ \t\r\n\f])?|\\o
 10.2105 -  T         t|\\0{0,4}(54|74)(\r\n|[ \t\r\n\f])?|\\t
 10.2106 -  V         v|\\0{0,4}(58|78)(\r\n|[ \t\r\n\f])?|\\v
 10.2107 -
 10.2108 -  %%
 10.2109 -
 10.2110 -  [ \t\r\n\f]+     return S;
 10.2111 -
 10.2112 -  "~="             return INCLUDES;
 10.2113 -  "|="             return DASHMATCH;
 10.2114 -  "^="             return PREFIXMATCH;
 10.2115 -  "$="             return SUFFIXMATCH;
 10.2116 -  "*="             return SUBSTRINGMATCH;
 10.2117 -  {ident}          return IDENT;
 10.2118 -  {string}         return STRING;
 10.2119 -  {ident}"("       return FUNCTION;
 10.2120 -  {num}            return NUMBER;
 10.2121 -  "#"{name}        return HASH;
 10.2122 -  {w}"+"           return PLUS;
 10.2123 -  {w}"&gt;"           return GREATER;
 10.2124 -  {w}","           return COMMA;
 10.2125 -  {w}"~"           return TILDE;
 10.2126 -  ":"{N}{O}{T}"("  return NOT;
 10.2127 -  @{ident}         return ATKEYWORD;
 10.2128 -  {invalid}        return INVALID;
 10.2129 -  {num}%           return PERCENTAGE;
 10.2130 -  {num}{ident}     return DIMENSION;
 10.2131 -  "&lt;!--"           return CDO;
 10.2132 -  "--&gt;"            return CDC;
 10.2133 -
 10.2134 -  \/\*[^*]*\*+([^/*][^*]*\*+)*\/                    /* ignore comments */
 10.2135 -
 10.2136 -  .                return *yytext;</pre>
 10.2137 +  possible code point in Unicode/ISO-10646. [[!UNICODE]]
 10.2138 +
 10.2139 +  <pre><!--
 10.2140 +  -->%option case-insensitive&#xa;<!--
 10.2141 +  -->&#xa;<!--
 10.2142 +  -->ident     [-]?{nmstart}{nmchar}*&#xa;<!--
 10.2143 +  -->name      {nmchar}+&#xa;<!--
 10.2144 +  -->nmstart   [_a-z]|{nonascii}|{escape}&#xa;<!--
 10.2145 +  -->nonascii  [^\0-\177]&#xa;<!--
 10.2146 +  -->unicode   \\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])?&#xa;<!--
 10.2147 +  -->escape    {unicode}|\\[^\n\r\f0-9a-f]&#xa;<!--
 10.2148 +  -->nmchar    [_a-z0-9-]|{nonascii}|{escape}&#xa;<!--
 10.2149 +  -->num       [0-9]+|[0-9]*\.[0-9]+&#xa;<!--
 10.2150 +  -->string    {string1}|{string2}&#xa;<!--
 10.2151 +  -->string1   \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*\"&#xa;<!--
 10.2152 +  -->string2   \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*\'&#xa;<!--
 10.2153 +  -->invalid   {invalid1}|{invalid2}&#xa;<!--
 10.2154 +  -->invalid1  \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*&#xa;<!--
 10.2155 +  -->invalid2  \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*&#xa;<!--
 10.2156 +  -->nl        \n|\r\n|\r|\f&#xa;<!--
 10.2157 +  -->w         [ \t\r\n\f]*&#xa;<!--
 10.2158 +  -->&#xa;<!--
 10.2159 +  -->D         d|\\0{0,4}(44|64)(\r\n|[ \t\r\n\f])?&#xa;<!--
 10.2160 +  -->E         e|\\0{0,4}(45|65)(\r\n|[ \t\r\n\f])?&#xa;<!--
 10.2161 +  -->N         n|\\0{0,4}(4e|6e)(\r\n|[ \t\r\n\f])?|\\n&#xa;<!--
 10.2162 +  -->O         o|\\0{0,4}(4f|6f)(\r\n|[ \t\r\n\f])?|\\o&#xa;<!--
 10.2163 +  -->T         t|\\0{0,4}(54|74)(\r\n|[ \t\r\n\f])?|\\t&#xa;<!--
 10.2164 +  -->V         v|\\0{0,4}(58|78)(\r\n|[ \t\r\n\f])?|\\v&#xa;<!--
 10.2165 +  -->&#xa;<!--
 10.2166 +  -->%%&#xa;<!--
 10.2167 +  -->&#xa;<!--
 10.2168 +  -->[ \t\r\n\f]+     return S;&#xa;<!--
 10.2169 +  -->&#xa;<!--
 10.2170 +  -->"~="             return INCLUDES;&#xa;<!--
 10.2171 +  -->"|="             return DASHMATCH;&#xa;<!--
 10.2172 +  -->"^="             return PREFIXMATCH;&#xa;<!--
 10.2173 +  -->"$="             return SUFFIXMATCH;&#xa;<!--
 10.2174 +  -->"*="             return SUBSTRINGMATCH;&#xa;<!--
 10.2175 +  -->{ident}          return IDENT;&#xa;<!--
 10.2176 +  -->{string}         return STRING;&#xa;<!--
 10.2177 +  -->{ident}"("       return FUNCTION;&#xa;<!--
 10.2178 +  -->{num}            return NUMBER;&#xa;<!--
 10.2179 +  -->"#"{name}        return HASH;&#xa;<!--
 10.2180 +  -->{w}"+"           return PLUS;&#xa;<!--
 10.2181 +  -->{w}">"           return GREATER;&#xa;<!--
 10.2182 +  -->{w}","           return COMMA;&#xa;<!--
 10.2183 +  -->{w}"~"           return TILDE;&#xa;<!--
 10.2184 +  -->":"{N}{O}{T}"("  return NOT;&#xa;<!--
 10.2185 +  -->@{ident}         return ATKEYWORD;&#xa;<!--
 10.2186 +  -->{invalid}        return INVALID;&#xa;<!--
 10.2187 +  -->{num}%           return PERCENTAGE;&#xa;<!--
 10.2188 +  -->{num}{ident}     return DIMENSION;&#xa;<!--
 10.2189 +  -->"&lt;!--"           return CDO;&#xa;<!--
 10.2190 +  -->"-->"            return CDC;&#xa;<!--
 10.2191 +  -->&#xa;<!--
 10.2192 +  -->\/\*[^*]*\*+([^/*][^*]*\*+)*\/                    /* ignore comments */&#xa;<!--
 10.2193 +  -->&#xa;<!--
 10.2194 +  -->.                return *yytext;</pre>
 10.2195  
 10.2196  <h2 id="profiling">
 10.2197  Profiles</h2>
 10.2198  
 10.2199    <p>Each specification using Selectors must define the subset of
 10.2200    Selectors it allows and excludes, and describe the local meaning of
 10.2201 -  all the components of that subset.</p>
 10.2202 +  all the components of that subset.
 10.2203  
 10.2204  <h3 id="css-profiles">
 10.2205  CSS Profiles</h3>
 10.2206 @@ -2936,7 +2966,7 @@
 10.2207          :active, :hover, :focus, :lang() and :first-child pseudo-classes
 10.2208         <br>descendant combinator<br>child combinator<br>adjacent-sibling
 10.2209          combinator<br>::first-line and ::first-letter pseudo-elements<br>::before
 10.2210 -        and ::after pseudo-elements</td></tr>
 10.2211 +        and ::after pseudo-elements
 10.2212      <tr>
 10.2213        <th>Excludes
 10.2214        <td>namespaces, case-insensitive attribute selectors
 10.2215 @@ -2948,7 +2978,7 @@
 10.2216  <h3 id="stts-profile">
 10.2217  STTS Profiles</h3>
 10.2218  
 10.2219 -  <p><em>This section is non-normative.</em></p>
 10.2220 +  <p><em>This section is non-normative.</em>
 10.2221  
 10.2222    <p>Selectors can be used in STTS 3 in two different manners:
 10.2223    <ol>
 10.2224 @@ -2961,13 +2991,13 @@
 10.2225      <caption>STTS3 Selectors Profile</caption>
 10.2226      <tr>
 10.2227        <th>Specification</th>
 10.2228 -        <td><a href="http://www.w3.org/TR/NOTE-STTS3">STTS 3</a></td>
 10.2229 -      </tr>
 10.2230 +        <td><a href="http://www.w3.org/TR/NOTE-STTS3">STTS 3</a>
 10.2231 +      
 10.2232      <tr>
 10.2233        <th>Accepts</th>
 10.2234        <td>type selectors<br>universal selectors<br>attribute selectors<br>class
 10.2235          selectors<br>ID selectors<br>level 3 structural pseudo-classes<br>
 10.2236 -        all combinators except reference combinator<br>namespaces</td></tr>
 10.2237 +        all combinators except reference combinator<br>namespaces
 10.2238      <tr>
 10.2239        <th>Excludes
 10.2240        <td>namespaces, case-insensitive attribute selectors
 10.2241 @@ -2991,20 +3021,20 @@
 10.2242    letters in this specification.
 10.2243  
 10.2244    <p>All of the text of this specification is normative except sections
 10.2245 -  explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p>
 10.2246 +  explicitly marked as non-normative, examples, and notes. [[!RFC2119]]
 10.2247  
 10.2248    <p>Examples in this specification are introduced with the words “for example”
 10.2249    or are set apart from the normative text with <code>class="example"</code>,
 10.2250    like this:
 10.2251  
 10.2252    <div class="example">
 10.2253 -    <p>This is an example of an informative example.</p>
 10.2254 +    <p>This is an example of an informative example.
 10.2255    </div>
 10.2256  
 10.2257    <p>Informative notes begin with the word “Note” and are set apart from the
 10.2258    normative text with <code>class="note"</code>, like this:
 10.2259  
 10.2260 -  <p class="note">Note, this is an informative note.</p>
 10.2261 +  <p class="note">Note, this is an informative note.
 10.2262  
 10.2263  <h3 id="conformance-classes">
 10.2264  Conformance Classes</h3>
 10.2265 @@ -3014,10 +3044,10 @@
 10.2266    <dl>
 10.2267      <dt><dfn title="selector instance!!as conformance class">selector instance</dfn>
 10.2268        <dd>A written selector.
 10.2269 -    <dt><dfn>interpreter</dfn></dt>
 10.2270 +    <dt><dfn>interpreter</dfn>
 10.2271        <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
 10.2272        that interprets the semantics of a selector.
 10.2273 -    <dt><dfn id="authoring-tool">authoring tool</dfn></dt>
 10.2274 +    <dt><dfn id="authoring-tool">authoring tool</dfn>
 10.2275        <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
 10.2276        that writes a style sheet.
 10.2277    </dl>
 10.2278 @@ -3043,7 +3073,7 @@
 10.2279  
 10.2280    <p>Specifications reusing Selectors must define how to handle invalid
 10.2281    selectors. (In the case of CSS, the entire rule in which the selector is
 10.2282 -  used is effectively dropped.)</p>
 10.2283 +  used is effectively dropped.)
 10.2284  
 10.2285  <h3 id="partial">
 10.2286  Partial Implementations</h3>
 10.2287 @@ -3051,7 +3081,7 @@
 10.2288    <p>So that authors can exploit the forward-compatible parsing rules to
 10.2289    trigger fallback behavior, UAs <strong>must</strong>
 10.2290    treat as <a href="#invalid">invalid</a> any selectors for which they have
 10.2291 -  no usable level of support.</p>
 10.2292 +  no usable level of support.
 10.2293  
 10.2294  <h3 id="experimental">
 10.2295  Experimental Implementations</h3>
 10.2296 @@ -3064,7 +3094,7 @@
 10.2297    avoids any incompatibilities with future changes in the draft. Once a
 10.2298    specification reaches the Candidate Recommendation stage, implementors
 10.2299    should implement the non-prefixed syntax for any feature they consider to
 10.2300 -  be correctly implemented according to spec.</p>
 10.2301 +  be correctly implemented according to spec.
 10.2302  
 10.2303  <!--
 10.2304    <h2 id="Tests">Tests</h2>
 10.2305 @@ -3073,7 +3103,7 @@
 10.2306    href="http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/">a test
 10.2307    suite</a> allowing user agents to verify their basic conformance to
 10.2308    the specification. This test suite does not pretend to be exhaustive
 10.2309 -  and does not cover all possible combined cases of Selectors.</p>
 10.2310 +  and does not cover all possible combined cases of Selectors.
 10.2311  -->
 10.2312  
 10.2313  <h2 id="acknowledgements">

mercurial