changeset
Regen
Mon, 13 Aug 2012 11:03:27 -0700
- author
- fantasai <fantasai.cvs@inkedblade.net>
- date
- Mon, 13 Aug 2012 11:03:27 -0700
- changeset 6435
- 453166a25b3e
- parent 6434
- b60d734933bd
- child 6436
- f5af127f3c3e
Regen
| selectors4/Overview.html | file | annotate | diff | comparison | revisions |
1.1 --- a/selectors4/Overview.html Sun Aug 12 18:14:40 2012 -0700 1.2 +++ b/selectors4/Overview.html Mon Aug 13 11:03:27 2012 -0700 1.3 @@ -1,9 +1,4228 @@ 1.4 -<HTML> 1.5 -<HEAD><TITLE>302 Found</TITLE></HEAD> 1.6 -<BODY BGCOLOR="#cc9999" TEXT="#000000" LINK="#2020ff" VLINK="#4040cc"> 1.7 -<H2>302 Found</H2> 1.8 -The actual URL is '/member-bin/process.cgi/'. 1.9 -<HR> 1.10 -<ADDRESS><A HREF="http://www.acme.com/software/thttpd/">thttpd/2.25b 29dec2003</A></ADDRESS> 1.11 -</BODY> 1.12 -</HTML> 1.13 +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> 1.14 + 1.15 +<html lang=en> 1.16 + <head> 1.17 + <title>Selectors Level 4</title> 1.18 + <link href="../default.css" rel=stylesheet type="text/css"> 1.19 + 1.20 + <style type="text/css"> 1.21 + .tprofile td, th { vertical-align: baseline; padding: 0 0.5em; } 1.22 + .tprofile th { text-align: right; } 1.23 + </style> 1.24 + <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet 1.25 + type="text/css"> 1.26 + 1.27 + <body> 1.28 + <div class=head> <!--begin-logo--> 1.29 + <p><a href="http://www.w3.org/"><img alt=W3C height=48 1.30 + src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo--> 1.31 + 1.32 + <h1 id=title>Selectors Level 4</h1> 1.33 + 1.34 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 13 August 2012</h2> 1.35 + 1.36 + <dl> 1.37 + <dt>This version: <!-- 1.38 + <dd><a href="http://www.w3.org/TR/2012/ED-selectors4-20120813/"> 1.39 + http://www.w3.org/TR/2012/WD-selectors4-20120813/</a> 1.40 + 1.41 + <dt>Editor's draft: 1.42 +--> 1.43 + 1.44 + 1.45 + <dd><a href="http://dev.w3.org/csswg/selectors4/"> 1.46 + http://dev.w3.org/csswg/selectors4/</a> 1.47 + 1.48 + <dt>Latest version of Selectors Level 4: 1.49 + 1.50 + <dd><a href="http://www.w3.org/TR/selectors4/"> 1.51 + http://www.w3.org/TR/selectors4/</a> 1.52 + 1.53 + <dt>Latest Selectors specification: 1.54 + 1.55 + <dd><a href="http://www.w3.org/TR/selectors/"> 1.56 + http://www.w3.org/TR/selectors/</a> 1.57 + 1.58 + <dt>Previous version: 1.59 + 1.60 + <dd><a href="http://www.w3.org/TR/2011/WD-selectors4-20110929/"> 1.61 + http://www.w3.org/TR/2011/WD-selectors4-20110929/</a> 1.62 + 1.63 + <dt>Editors: 1.64 + 1.65 + <dd class=vcard><a class="url fn" 1.66 + href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a> 1.67 + (Mozilla) 1.68 + 1.69 + <dt>Previous Editors: 1.70 + 1.71 + <dd class=vcard><a class="url fn" href="http://www.tantek.com/" 1.72 + lang=tr>Tantek Çelik</a> (Microsoft) 1.73 + 1.74 + <dd class=vcard><span class=fn>Daniel Glazman</span> (Disruptive 1.75 + Innovations SARL) 1.76 + 1.77 + <dd class=vcard><span class=fn>Ian Hickson</span> (Opera Softare ASA) 1.78 + 1.79 + <dd class=vcard><span class=fn>Peter Linss</span> (Netscape/AOL) 1.80 + 1.81 + <dd class=vcard><span class=fn>John Williams</span> (Quark, Inc.) 1.82 + </dl> 1.83 + <!--begin-copyright--> 1.84 + <p class=copyright><a 1.85 + href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 1.86 + rel=license>Copyright</a> © 2012 <a href="http://www.w3.org/"><abbr 1.87 + title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a 1.88 + href="http://www.csail.mit.edu/"><abbr 1.89 + title="Massachusetts Institute of Technology">MIT</abbr></a>, <a 1.90 + href="http://www.ercim.eu/"><abbr 1.91 + title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, 1.92 + <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a 1.93 + href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, 1.94 + <a 1.95 + href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> 1.96 + and <a 1.97 + href="http://www.w3.org/Consortium/Legal/copyright-documents">document 1.98 + use</a> rules apply.</p> 1.99 + <!--end-copyright--> 1.100 + <hr title="Separator for header"> 1.101 + </div> 1.102 + 1.103 + <h2 class="no-num no-toc" id=abstract> Abstract</h2> 1.104 + 1.105 + <p><a href="#selector"><em>Selectors</em></a> are patterns that match 1.106 + against elements in a tree, and as such form one of several technologies 1.107 + that can be used to select nodes in an XML document. Selectors have been 1.108 + optimized for use with HTML and XML, and are designed to be usable in 1.109 + performance-critical code. They are a core component of <abbr 1.110 + title="Cascading Style Sheets">CSS</abbr> (Cascading Style Sheets), which 1.111 + uses Selectors to bind style properties to elements in the document. 1.112 + 1.113 + <p>Selectors Level 4 describes the selectors that already exist in <a 1.114 + href="#SELECT" rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>, and further 1.115 + introduces new selectors for CSS and other languages that may need them. 1.116 + 1.117 + <h2 class="no-num no-toc" id=status>Status of this Document</h2> 1.118 + <!--begin-status--> 1.119 + 1.120 + <p>This is a public copy of the editors' draft. It is provided for 1.121 + discussion only and may change at any moment. Its publication here does 1.122 + not imply endorsement of its contents by W3C. Don't cite this document 1.123 + other than as work in progress. 1.124 + 1.125 + <p>The (<a 1.126 + href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public 1.127 + mailing list <a 1.128 + href="mailto:www-style@w3.org?Subject=%5Bselectors4%5D%20PUT%20SUBJECT%20HERE"> 1.129 + www-style@w3.org</a> (see <a 1.130 + href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for 1.131 + discussion of this specification. When sending e-mail, please put the text 1.132 + “selectors4” in the subject, preferably like this: 1.133 + “[<!---->selectors4<!---->] <em>…summary of comment…</em>” 1.134 + 1.135 + <p>This document was produced by the <a href="/Style/CSS/members">CSS 1.136 + Working Group</a> (part of the <a href="/Style/">Style Activity</a>). 1.137 + 1.138 + <p>This document was produced by a group operating under the <a 1.139 + href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent 1.140 + Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status" 1.141 + rel=disclosure>public list of any patent disclosures</a> made in 1.142 + connection with the deliverables of the group; that page also includes 1.143 + instructions for disclosing a patent. An individual who has actual 1.144 + knowledge of a patent which the individual believes contains <a 1.145 + href="/Consortium/Patent-Policy-20040205/#def-essential">Essential 1.146 + Claim(s)</a> must disclose the information in accordance with <a 1.147 + href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the 1.148 + W3C Patent Policy</a>.</p> 1.149 + <!--end-status--> 1.150 + 1.151 + <p><strong>This module is an early-stage Working Draft. If you are looking 1.152 + for a stable Selectors specification, use <a 1.153 + href="http://www.w3.org/TR/css3-selectors/">Selectors 3</a>.</strong> Read 1.154 + the <a href="http://www.w3.org/TR/CSS/">CSS Snapshot</a> for an overview 1.155 + of the CSS development process. See the <a href="#overview">Selectors 1.156 + Overview</a> for a summary of additions to level 3. 1.157 + 1.158 + <p>This is the first public Working Draft of this new specification. 1.159 + 1.160 + <h2 class="no-num no-toc" id=contents>Table of Contents</h2> 1.161 + <!--begin-toc--> 1.162 + 1.163 + <ul class=toc> 1.164 + <li><a href="#context"><span class=secno>1. </span> Introduction</a> 1.165 + <ul class=toc> 1.166 + <li><a href="#placement"><span class=secno>1.1. </span>Module 1.167 + Interactions</a> 1.168 + </ul> 1.169 + 1.170 + <li><a href="#overview"><span class=secno>2. </span> Selectors 1.171 + Overview</a> 1.172 + 1.173 + <li><a href="#syntax"><span class=secno>3. </span> Selector Syntax and 1.174 + Structure</a> 1.175 + <ul class=toc> 1.176 + <li><a href="#structure"><span class=secno>3.1. </span> Structure and 1.177 + Terminology</a> 1.178 + 1.179 + <li><a href="#subject"><span class=secno>3.2. </span> Determining the 1.180 + Subject of a Selector</a> 1.181 + 1.182 + <li><a href="#scoping"><span class=secno>3.3. </span> Scoped 1.183 + Selectors</a> 1.184 + 1.185 + <li><a href="#pseudo-classes"><span class=secno>3.4. </span> 1.186 + Pseudo-classes</a> 1.187 + 1.188 + <li><a href="#pseudo-elements"><span class=secno>3.5. 1.189 + </span>Pseudo-elements</a> 1.190 + 1.191 + <li><a href="#case-sensitive"><span class=secno>3.6. </span> Characters 1.192 + and case sensitivity</a> 1.193 + 1.194 + <li><a href="#namespaces"><span class=secno>3.7. </span> Namespaces</a> 1.195 + 1.196 + <li><a href="#invalid"><span class=secno>3.8. </span> Invalid Selectors 1.197 + and Error Handling</a> 1.198 + </ul> 1.199 + 1.200 + <li><a href="#logical-combination"><span class=secno>4. </span> Logical 1.201 + Combinations</a> 1.202 + <ul class=toc> 1.203 + <li><a href="#grouping"><span class=secno>4.1. </span> Selector 1.204 + Lists</a> 1.205 + 1.206 + <li><a href="#the-matches-pseudo"><span class=secno>4.2. </span> The 1.207 + Matches-Any Pseudo-class: <code>:matches()</code></a> 1.208 + 1.209 + <li><a href="#the-negation-pseudo"><span class=secno>4.3. </span> The 1.210 + Negation Pseudo-class: <code>:not()</code></a> 1.211 + </ul> 1.212 + 1.213 + <li><a href="#elemental-selectors"><span class=secno>5. </span> Elemental 1.214 + selectors</a> 1.215 + <ul class=toc> 1.216 + <li><a href="#type-selectors"><span class=secno>5.1. </span> Type (tag 1.217 + name) selector</a> 1.218 + <ul class=toc> 1.219 + <li><a href="#typenmsp"><span class=secno>5.1.1. </span> Type 1.220 + selectors and namespaces</a> 1.221 + </ul> 1.222 + 1.223 + <li><a href="#universal-selector"><span class=secno>5.2. </span> 1.224 + Universal selector </a> 1.225 + <ul class=toc> 1.226 + <li><a href="#univnmsp"><span class=secno>5.2.1. </span> Universal 1.227 + selector and namespaces</a> 1.228 + </ul> 1.229 + </ul> 1.230 + 1.231 + <li><a href="#attribute-selectors"><span class=secno>6. </span> Attribute 1.232 + selectors</a> 1.233 + <ul class=toc> 1.234 + <li><a href="#attribute-representation"><span class=secno>6.1. </span> 1.235 + Attribute presence and value selectors</a> 1.236 + 1.237 + <li><a href="#attribute-substrings"><span class=secno>6.2. </span> 1.238 + Substring matching attribute selectors</a> 1.239 + 1.240 + <li><a href="#attribute-case"><span class=secno>6.3. </span> 1.241 + Case-sensitivity</a> 1.242 + 1.243 + <li><a href="#attrnmsp"><span class=secno>6.4. </span> Attribute 1.244 + selectors and namespaces</a> 1.245 + 1.246 + <li><a href="#def-values"><span class=secno>6.5. </span> Default 1.247 + attribute values in DTDs</a> 1.248 + 1.249 + <li><a href="#class-html"><span class=secno>6.6. </span> Class 1.250 + selectors</a> 1.251 + 1.252 + <li><a href="#id-selectors"><span class=secno>6.7. </span> ID 1.253 + selectors</a> 1.254 + </ul> 1.255 + 1.256 + <li><a href="#location"><span class=secno>7. </span> Location 1.257 + Pseudo-classes</a> 1.258 + <ul class=toc> 1.259 + <li><a href="#the-any-link-pseudo"><span class=secno>7.1. </span> The 1.260 + hyperlink pseudo-class: <code>:any-link</code></a> 1.261 + 1.262 + <li><a href="#the-link-pseudos"><span class=secno>7.2. </span> The link 1.263 + history pseudo-classes: <code>:link</code> and 1.264 + <code>:visited</code></a> 1.265 + 1.266 + <li><a href="#the-local-pseudo"><span class=secno>7.3. </span> The local 1.267 + link pseudo-class <code>:local-link</code></a> 1.268 + 1.269 + <li><a href="#the-target-pseudo"><span class=secno>7.4. </span> The 1.270 + target pseudo-class <code>:target</code></a> 1.271 + 1.272 + <li><a href="#the-scope-pseudo"><span class=secno>7.5. </span> The 1.273 + contextual reference element pseudo-class <code>:scope</code></a> 1.274 + </ul> 1.275 + 1.276 + <li><a href="#useraction-pseudos"><span class=secno>8. </span> User Action 1.277 + Pseudo-classes</a> 1.278 + <ul class=toc> 1.279 + <li><a href="#the-hover-pseudo"><span class=secno>8.1. </span> The 1.280 + pointer hover pseudo-class <code>:hover</code></a> 1.281 + 1.282 + <li><a href="#the-active-pseudo"><span class=secno>8.2. </span> The 1.283 + activation pseudo-class <code>:active</code></a> 1.284 + 1.285 + <li><a href="#the-focus-pseudo"><span class=secno>8.3. </span> The input 1.286 + focus pseudo-class <code>:focus</code></a> 1.287 + 1.288 + <li><a href="#drag-pseudos"><span class=secno>8.4. </span> The 1.289 + drag-and-drop pseudo-class ‘<code 1.290 + class=css>:valid-drop-target</code>’</a> 1.291 + </ul> 1.292 + 1.293 + <li><a href="#time-pseudos"><span class=secno>9. </span> Time-dimensional 1.294 + Pseudo-classes</a> 1.295 + <ul class=toc> 1.296 + <li><a href="#the-current-pseudo"><span class=secno>9.1. </span> The 1.297 + current-element pseudo-class <code>:current</code></a> 1.298 + 1.299 + <li><a href="#the-past-pseudo"><span class=secno>9.2. </span> The 1.300 + past-element pseudo-class <code>:past</code></a> 1.301 + 1.302 + <li><a href="#the-future-pseudo"><span class=secno>9.3. </span> The 1.303 + future-element pseudo-class <code>:future</code></a> 1.304 + </ul> 1.305 + 1.306 + <li><a href="#linguistic-pseudos"><span class=secno>10. </span> Linguistic 1.307 + Pseudo-classes</a> 1.308 + <ul class=toc> 1.309 + <li><a href="#the-dir-pseudo"><span class=secno>10.1. </span> The 1.310 + directionality pseudo-class <code>:dir()</code></a> 1.311 + 1.312 + <li><a href="#the-lang-pseudo"><span class=secno>10.2. </span> The 1.313 + language pseudo-class <code>:lang()</code></a> 1.314 + </ul> 1.315 + 1.316 + <li><a href="#ui-states-pseudos"><span class=secno>11. </span> The UI 1.317 + states pseudo-classes</a> 1.318 + <ul class=toc> 1.319 + <li><a href="#enableddisabled"><span class=secno>11.1. </span> The 1.320 + <code>:enabled</code> and <code>:disabled</code> pseudo-classes</a> 1.321 + 1.322 + <li><a href="#the-checked-pseudo"><span class=secno>11.2. </span> The 1.323 + selected-option pseudo-class <code>:checked</code></a> 1.324 + 1.325 + <li><a href="#the-indeterminate-pseudo"><span class=secno>11.3. </span> 1.326 + The indeterminate-value pseudo-class <code>:indeterminate</code></a> 1.327 + 1.328 + <li><a href="#the-default-pseudo"><span class=secno>11.4. </span> The 1.329 + default option pseudo-class <code>:default</code></a> 1.330 + 1.331 + <li><a href="#validity-pseudos"><span class=secno>11.5. </span> The 1.332 + validity pseudo-classes: <code>:valid</code>, <code>:invalid</code>, 1.333 + and <code>:user-error</code></a> 1.334 + 1.335 + <li><a href="#range-pseudos"><span class=secno>11.6. </span> The range 1.336 + pseudo-classes <code>:in-range</code> and 1.337 + <code>:out-of-range</code></a> 1.338 + 1.339 + <li><a href="#opt-pseudos"><span class=secno>11.7. </span> The 1.340 + optionality pseudo-classes <code>:required</code> and 1.341 + <code>:optional</code></a> 1.342 + 1.343 + <li><a href="#rw-pseudos"><span class=secno>11.8. </span> The mutability 1.344 + pseudo-classes <code>:read-only</code> and <code>:read-write</code></a> 1.345 + 1.346 + </ul> 1.347 + 1.348 + <li><a href="#structural-pseudos"><span class=secno>12. </span> 1.349 + Tree-Structural pseudo-classes</a> 1.350 + <ul class=toc> 1.351 + <li><a href="#the-root-pseudo"><span class=secno>12.1. </span> 1.352 + <code>:root</code> pseudo-class</a> 1.353 + 1.354 + <li><a href="#the-nth-child-pseudo"><span class=secno>12.2. </span> 1.355 + <code>:nth-child()</code> pseudo-class</a> 1.356 + 1.357 + <li><a href="#the-nth-last-child-pseudo"><span class=secno>12.3. </span> 1.358 + <code>:nth-last-child()</code> pseudo-class</a> 1.359 + 1.360 + <li><a href="#the-nth-of-type-pseudo"><span class=secno>12.4. </span> 1.361 + <code>:nth-of-type()</code> pseudo-class</a> 1.362 + 1.363 + <li><a href="#the-nth-last-of-type-pseudo"><span class=secno>12.5. 1.364 + </span> <code>:nth-last-of-type()</code> pseudo-class</a> 1.365 + 1.366 + <li><a href="#the-nth-match-pseudo"><span class=secno>12.6. </span> 1.367 + <code>:nth-match()</code> pseudo-class</a> 1.368 + 1.369 + <li><a href="#the-nth-last-match-pseudo"><span class=secno>12.7. </span> 1.370 + <code>:nth-last-match()</code> pseudo-class</a> 1.371 + 1.372 + <li><a href="#the-first-child-pseudo"><span class=secno>12.8. </span> 1.373 + <code>:first-child</code> pseudo-class</a> 1.374 + 1.375 + <li><a href="#the-last-child-pseudo"><span class=secno>12.9. </span> 1.376 + <code>:last-child</code> pseudo-class</a> 1.377 + 1.378 + <li><a href="#the-first-of-type-pseudo"><span class=secno>12.10. </span> 1.379 + <code>:first-of-type</code> pseudo-class</a> 1.380 + 1.381 + <li><a href="#the-last-of-type-pseudo"><span class=secno>12.11. </span> 1.382 + <code>:last-of-type</code> pseudo-class</a> 1.383 + 1.384 + <li><a href="#the-only-child-pseudo"><span class=secno>12.12. </span> 1.385 + <code>:only-child</code> pseudo-class</a> 1.386 + 1.387 + <li><a href="#the-only-of-type-pseudo"><span class=secno>12.13. </span> 1.388 + <code>:only-of-type</code> pseudo-class</a> 1.389 + 1.390 + <li><a href="#the-empty-pseudo"><span class=secno>12.14. </span> 1.391 + <code>:empty</code> pseudo-class</a> 1.392 + </ul> 1.393 + 1.394 + <li><a href="#combinators"><span class=secno>13. </span> Combinators</a> 1.395 + <ul class=toc> 1.396 + <li><a href="#descendant-combinators"><span class=secno>13.1. </span> 1.397 + Descendant combinator</a> 1.398 + 1.399 + <li><a href="#child-combinators"><span class=secno>13.2. </span> Child 1.400 + combinator</a> 1.401 + 1.402 + <li><a href="#adjacent-sibling-combinators"><span class=secno>13.3. 1.403 + </span> Next-sibling combinator</a> 1.404 + 1.405 + <li><a href="#general-sibling-combinators"><span class=secno>13.4. 1.406 + </span> Following-sibling combinator</a> 1.407 + 1.408 + <li><a href="#idref-combinators"><span class=secno>13.5. </span> 1.409 + Reference combinators</a> 1.410 + </ul> 1.411 + 1.412 + <li><a href="#column-selectors"><span class=secno>14. </span> 1.413 + Grid-Structural Selectors</a> 1.414 + <ul class=toc> 1.415 + <li><a href="#column-combinator"><span class=secno>14.1. </span> Column 1.416 + combinator</a> 1.417 + 1.418 + <li><a href="#the-nth-column-pseudo"><span class=secno>14.2. </span> 1.419 + <code>:nth-column()</code> pseudo-class</a> 1.420 + 1.421 + <li><a href="#the-nth-last-column-pseudo"><span class=secno>14.3. 1.422 + </span> <code>:nth-last-column()</code> pseudo-class</a> 1.423 + </ul> 1.424 + 1.425 + <li><a href="#specificity"><span class=secno>15. </span> Calculating a 1.426 + selector's specificity</a> 1.427 + 1.428 + <li><a href="#formal-syntax"><span class=secno>16. </span> Formal 1.429 + Syntax</a> 1.430 + <ul class=toc> 1.431 + <li><a href="#grammar"><span class=secno>16.1. </span> Grammar</a> 1.432 + 1.433 + <li><a href="#lex"><span class=secno>16.2. </span> Lexical scanner</a> 1.434 + </ul> 1.435 + 1.436 + <li><a href="#profiling"><span class=secno>17. </span> Profiles</a> 1.437 + <ul class=toc> 1.438 + <li><a href="#css-profiles"><span class=secno>17.1. </span> CSS 1.439 + Profiles</a> 1.440 + 1.441 + <li><a href="#stts-profile"><span class=secno>17.2. </span> STTS 1.442 + Profiles</a> 1.443 + </ul> 1.444 + 1.445 + <li><a href="#conformance"><span class=secno>18. </span> Conformance</a> 1.446 + <ul class=toc> 1.447 + <li><a href="#conventions"><span class=secno>18.1. </span>Document 1.448 + Conventions</a> 1.449 + 1.450 + <li><a href="#conformance-classes"><span class=secno>18.2. </span> 1.451 + Conformance Classes</a> 1.452 + 1.453 + <li><a href="#partial"><span class=secno>18.3. </span> Partial 1.454 + Implementations</a> 1.455 + 1.456 + <li><a href="#experimental"><span class=secno>18.4. </span> Experimental 1.457 + Implementations</a> 1.458 + </ul> 1.459 + 1.460 + <li><a href="#acknowledgements"><span class=secno>19. </span> 1.461 + Acknowledgements</a> 1.462 + 1.463 + <li><a href="#references"><span class=secno>20. </span> References</a> 1.464 + <ul class=toc> 1.465 + <li><a href="#normative-references"><span class=secno>20.1. </span> 1.466 + Normative References</a> 1.467 + 1.468 + <li><a href="#informative-references"><span class=secno>20.2. </span> 1.469 + Informative References</a> 1.470 + </ul> 1.471 + </ul> 1.472 + <!--end-toc--> 1.473 + 1.474 + <h2 id=context><span class=secno>1. </span> Introduction</h2> 1.475 + 1.476 + <p><em>This section is not normative.</em> 1.477 + 1.478 + <p> A selector is a boolean predicate that takes an element in a tree 1.479 + structure and answers whether the element matches the selector or not. 1.480 + 1.481 + <p> These expressions can be used directly on an element to test whether it 1.482 + matches some criteria, such as in the <code>Element.matches()</code> 1.483 + function defined in <a href="#SELECTORS-API2" 1.484 + rel=biblioentry>[SELECTORS-API2]<!--{{SELECTORS-API2}}--></a>, or 1.485 + alternately, can be applied to an entire tree of elements to filter it 1.486 + into a set of elements that match the criteria, such as in the selector in 1.487 + a CSS style rule. 1.488 + 1.489 + <p>Selectors Levels 1, 2, and 3 are defined as the subsets of selector 1.490 + functionality defined in the <a 1.491 + href="http://www.w3.org/TR/REC-CSS1">CSS1</a>, <a 1.492 + href="http://www.w3.org/TR/CSS21/">CSS2.1</a>, and <a 1.493 + href="http://www.w3.org/TR/css3-selectors/">Selectors Level 3</a> 1.494 + specifications, respectively. This module defines Selectors Level 4. 1.495 + 1.496 + <h3 id=placement><span class=secno>1.1. </span>Module Interactions</h3> 1.497 + 1.498 + <p>This module replaces the definitions for, and extends the set of 1.499 + selectors defined for CSS in <a href="#SELECT" 1.500 + rel=biblioentry>[SELECT]<!--{{SELECT}}--></a> and <a href="#CSS21" 1.501 + rel=biblioentry>[CSS21]<!--{{CSS21}}--></a>. 1.502 + 1.503 + <p>Pseudo-element selectors, which define abstract elements in a rendering 1.504 + tree, are not part of this specification: their generic syntax is 1.505 + described here, but, due to their close integration with the rendering 1.506 + model and irrelevance to other uses such as DOM queries, they will be 1.507 + defined in other modules. 1.508 + 1.509 + <h2 id=overview><span class=secno>2. </span> Selectors Overview</h2> 1.510 + 1.511 + <p><em>This section is non-normative, as it merely summarizes the following 1.512 + sections.</em> 1.513 + 1.514 + <p>A Selector represents a structure. This structure can be used as a 1.515 + condition (e.g. in a CSS rule) that determines which elements a selector 1.516 + matches in the document tree, or as a flat description of the HTML or XML 1.517 + fragment corresponding to that structure. 1.518 + 1.519 + <p>Selectors may range from simple element names to rich contextual 1.520 + representations. 1.521 + 1.522 + <p>The following table summarizes the Selector syntax: 1.523 + 1.524 + <table class=data><col class=pattern><col class=meaning><col 1.525 + class=section><col class=level> 1.526 + <thead> 1.527 + <tr> 1.528 + <th>Pattern 1.529 + 1.530 + <th>Meaning 1.531 + 1.532 + <th>Section 1.533 + 1.534 + <th>Level 1.535 + 1.536 + <tbody> 1.537 + <tr> 1.538 + <td><code>*</code> 1.539 + 1.540 + <td>any element 1.541 + 1.542 + <td><a href="#universal-selector">Universal selector</a> 1.543 + 1.544 + <td>2 1.545 + 1.546 + <tr> 1.547 + <td><code>E</code> 1.548 + 1.549 + <td>an element of type E 1.550 + 1.551 + <td><a href="#type-selectors">Type (tag name) selector</a> 1.552 + 1.553 + <td>1 1.554 + 1.555 + <tbody> 1.556 + <tr> 1.557 + <td><code>E:not(<var>s1</var>, <var>s2</var>)</code> 1.558 + 1.559 + <td>an E element that does not match either <a 1.560 + href="#compound"><i>compound selector</i></a> <var>s1</var> or <a 1.561 + href="#compound"><i>compound selector</i></a> <var>s2</var> 1.562 + 1.563 + <td><a href="#negation">Negation pseudo-class</a> 1.564 + 1.565 + <td>3/4 1.566 + 1.567 + <tr> 1.568 + <td><code>E:matches(<var>s1</var>, <var>s2</var>)</code> 1.569 + 1.570 + <td>an E element that matches <a href="#compound"><i>compound 1.571 + selector</i></a> <var>s1</var> and/or <a href="#compound"><i>compound 1.572 + selector</i></a> <var>s2</var> 1.573 + 1.574 + <td><a href="#matches">Matches-any pseudo-class</a> 1.575 + 1.576 + <td>4 1.577 + 1.578 + <tbody> 1.579 + <tr> 1.580 + <td><code>E.warning</code> 1.581 + 1.582 + <td>an E element belonging to the class <code>warning</code> (the 1.583 + document language specifies how class is determined). 1.584 + 1.585 + <td><a href="#class-html">Class selectors</a> 1.586 + 1.587 + <td>1 1.588 + 1.589 + <tr> 1.590 + <td><code>E#myid</code> 1.591 + 1.592 + <td>an E element with ID equal to <code>myid</code>. 1.593 + 1.594 + <td><a href="#id-selectors">ID selectors</a> 1.595 + 1.596 + <td>1 1.597 + 1.598 + <tr> 1.599 + <td><code>E[foo]</code> 1.600 + 1.601 + <td>an E element with a <code>foo</code> attribute 1.602 + 1.603 + <td><a href="#attribute-selectors">Attribute selectors</a> 1.604 + 1.605 + <td>2 1.606 + 1.607 + <tr> 1.608 + <td><code>E[foo="bar"]</code> 1.609 + 1.610 + <td>an E element whose <code>foo</code> attribute value is exactly equal 1.611 + to <code>bar</code> 1.612 + 1.613 + <td><a href="#attribute-selectors">Attribute selectors</a> 1.614 + 1.615 + <td>2 1.616 + 1.617 + <tr> 1.618 + <td><code>E[foo="bar" i]</code> 1.619 + 1.620 + <td>an E element whose <code>foo</code> attribute value is exactly equal 1.621 + to any (ASCII-range) case-permutation of <code>bar</code> 1.622 + 1.623 + <td><a href="#attribute-case">Attribute selectors: Case-sensitivity</a> 1.624 + 1.625 + <td>4 1.626 + 1.627 + <tr> 1.628 + <td><code>E[foo~="bar"]</code> 1.629 + 1.630 + <td>an E element whose <code>foo</code> attribute value is a list of 1.631 + whitespace-separated values, one of which is exactly equal to 1.632 + <code>bar</code> 1.633 + 1.634 + <td><a href="#attribute-selectors">Attribute selectors</a> 1.635 + 1.636 + <td>2 1.637 + 1.638 + <tr> 1.639 + <td><code>E[foo^="bar"]</code> 1.640 + 1.641 + <td>an E element whose <code>foo</code> attribute value begins exactly 1.642 + with the string "bar" 1.643 + 1.644 + <td><a href="#attribute-selectors">Attribute selectors</a> 1.645 + 1.646 + <td>3 1.647 + 1.648 + <tr> 1.649 + <td><code>E[foo$="bar"]</code> 1.650 + 1.651 + <td>an E element whose <code>foo</code> attribute value ends exactly 1.652 + with the string <code>bar</code> 1.653 + 1.654 + <td><a href="#attribute-selectors">Attribute selectors</a> 1.655 + 1.656 + <td>3 1.657 + 1.658 + <tr> 1.659 + <td><code>E[foo*="bar"]</code> 1.660 + 1.661 + <td>an E element whose <code>foo</code> attribute value contains the 1.662 + substring <code>bar</code> 1.663 + 1.664 + <td><a href="#attribute-selectors">Attribute selectors</a> 1.665 + 1.666 + <td>3 1.667 + 1.668 + <tr> 1.669 + <td><code>E[foo|="en"]</code> 1.670 + 1.671 + <td>an E element whose <code>foo</code> attribute value is a 1.672 + hyphen-separated list of values beginning with <code>en</code> 1.673 + 1.674 + <td><a href="#attribute-selectors">Attribute selectors</a> 1.675 + 1.676 + <td>2 1.677 + 1.678 + <tbody> 1.679 + <tr> 1.680 + <td><code>E:dir(ltr)</code> 1.681 + 1.682 + <td>an element of type E in with left-to-right directionality (the 1.683 + document language specifies how directionality is determined) 1.684 + 1.685 + <td><a href="#dir-pseudo">The :dir() pseudo-class</a> 1.686 + 1.687 + <td>4 1.688 + 1.689 + <tr> 1.690 + <td><code>E:lang(zh, *-hant)</code> 1.691 + 1.692 + <td>an element of type E tagged as being either in Chinese (any dialect 1.693 + or writing system) or othewise written with traditional Chinese 1.694 + characters 1.695 + 1.696 + <td><a href="#lang-pseudo">The :lang() pseudo-class</a> 1.697 + 1.698 + <td>2/4 1.699 + 1.700 + <tbody> 1.701 + <tr> 1.702 + <td><code>E:any-link</code> 1.703 + 1.704 + <td>an E element being the source anchor of a hyperlink 1.705 + 1.706 + <td><a href="#any-link-pseudo">The hyperlink pseudo-class</a> 1.707 + 1.708 + <td>4 1.709 + 1.710 + <tr> 1.711 + <td><code>E:link</code> 1.712 + 1.713 + <td>an E element being the source anchor of a hyperlink of which the 1.714 + target is not yet visited 1.715 + 1.716 + <td><a href="#link">The link history pseudo-classes</a> 1.717 + 1.718 + <td>1 1.719 + 1.720 + <tr> 1.721 + <td><code>E:visited</code> 1.722 + 1.723 + <td>an E element being the source anchor of a hyperlink of which the 1.724 + target is already visited 1.725 + 1.726 + <td><a href="#link">The link history pseudo-classes</a> 1.727 + 1.728 + <td>1 1.729 + 1.730 + <tr> 1.731 + <td><code>E:local-link</code> 1.732 + 1.733 + <td>an E element being the source anchor of a hyperlink of which the 1.734 + target is the current document 1.735 + 1.736 + <td><a href="#local-pseudo">The local link pseudo-class</a> 1.737 + 1.738 + <td>4 1.739 + 1.740 + <tr> 1.741 + <td><code>E:local-link(0)</code> 1.742 + 1.743 + <td>an E element being the source anchor of a hyperlink of which the 1.744 + target is within the current domain 1.745 + 1.746 + <td><a href="#local-pseudo">The local link pseudo-class</a> 1.747 + 1.748 + <td>4 1.749 + 1.750 + <tr> 1.751 + <td><code>E:target</code> 1.752 + 1.753 + <td>an E element being the target of the referring URI 1.754 + 1.755 + <td><a href="#target-pseudo">The target pseudo-class</a> 1.756 + 1.757 + <td>3 1.758 + 1.759 + <tr> 1.760 + <td><code>E:scope</code> 1.761 + 1.762 + <td>an E element being a designated contextual reference element 1.763 + 1.764 + <td><a href="#scope-pseudo">The scope pseudo-class</a> 1.765 + 1.766 + <td>4 1.767 + 1.768 + <tbody> 1.769 + <tr> 1.770 + <td><code>E:current</code> 1.771 + 1.772 + <td>an E element that is currently presented in a time-dimensional 1.773 + canvas 1.774 + 1.775 + <td><a href="#time-pseudos">Time-dimensional Pseudo-classes</a> 1.776 + 1.777 + <td>4 1.778 + 1.779 + <tr> 1.780 + <td><code>E:current(<var>s</var>)</code> 1.781 + 1.782 + <td>an E element that is the deepest <a 1.783 + href="#current-pseudo"><code>:current</code></a> element that matches 1.784 + selector <var>s</var> 1.785 + 1.786 + <td><a href="#time-pseudos">Time-dimensional Pseudo-classes</a> 1.787 + 1.788 + <td>4 1.789 + 1.790 + <tr> 1.791 + <td><code>E:past</code> 1.792 + 1.793 + <td>an E element that is in the past in a time-dimensional canvas 1.794 + 1.795 + <td><a href="#time-pseudos">Time-dimensional Pseudo-classes</a> 1.796 + 1.797 + <td>4 1.798 + 1.799 + <tr> 1.800 + <td><code>E:future</code> 1.801 + 1.802 + <td>an E element that is in the future in a time-dimensional canvas 1.803 + 1.804 + <td><a href="#time-pseudos">Time-dimensional Pseudo-classes</a> 1.805 + 1.806 + <td>4 1.807 + 1.808 + <tbody> 1.809 + <tr> 1.810 + <td><code>E:active</code> 1.811 + 1.812 + <td>an E element that is in an activated state 1.813 + 1.814 + <td><a href="#useraction-pseudos">The user action pseudo-classes</a> 1.815 + 1.816 + <td>1 1.817 + 1.818 + <tr> 1.819 + <td><code>E:hover</code> 1.820 + 1.821 + <td>an E element that is under the cursor, or that has a descendant 1.822 + under the cursor 1.823 + 1.824 + <td><a href="#useraction-pseudos">The user action pseudo-classes</a> 1.825 + 1.826 + <td>2 1.827 + 1.828 + <tr> 1.829 + <td><code>E:focus</code> 1.830 + 1.831 + <td>an E element that has user input focus 1.832 + 1.833 + <td><a href="#useraction-pseudos">The user action pseudo-classes</a> 1.834 + 1.835 + <td>2 1.836 + 1.837 + <tr> 1.838 + <td><code>E:enabled<br> 1.839 + E:disabled</code> 1.840 + 1.841 + <td>a user interface element E that is enabled or disabled, respectively 1.842 + 1.843 + 1.844 + <td><a href="#enableddisabled">The :enabled and :disabled 1.845 + pseudo-classes</a> 1.846 + 1.847 + <td>3 1.848 + 1.849 + <tr> 1.850 + <td><code>E:checked</code> 1.851 + 1.852 + <td>a user interface element E that is checked/selected (for instance a 1.853 + radio-button or checkbox) 1.854 + 1.855 + <td><a href="#checked">The selected-option pseudo-class</a> 1.856 + 1.857 + <td>3 1.858 + 1.859 + <tr> 1.860 + <td><code>E:indeterminate</code> 1.861 + 1.862 + <td>a user interface element E that is in an indeterminate state 1.863 + (neither checked nor unchecked) 1.864 + 1.865 + <td><a href="#indeterminate">The indeterminate-value pseudo-class</a> 1.866 + 1.867 + <td>4 1.868 + 1.869 + <tr> 1.870 + <td><code>E:default</code> 1.871 + 1.872 + <td>a user interface element E that 1.873 + 1.874 + <td><a href="#default-pseudo">The default option pseudo-class 1.875 + :default</a> 1.876 + 1.877 + <td>3-UI/4 1.878 + 1.879 + <tr> 1.880 + <td><code>E:in-range</code><br> 1.881 + <code>E:out-of-range</code> 1.882 + 1.883 + <td>a user interface element E that 1.884 + 1.885 + <td><a href="#range-pseudos">The validity pseudo-classes</a> 1.886 + 1.887 + <td>3-UI/4 1.888 + 1.889 + <tr> 1.890 + <td><code>E:required</code><br> 1.891 + <code>E:optional</code> 1.892 + 1.893 + <td>a user interface element E that 1.894 + 1.895 + <td><a href="#opt-pseudos">The optionality pseudo-classes</a> 1.896 + 1.897 + <td>3-UI/4 1.898 + 1.899 + <tr> 1.900 + <td><code>E:read-only</code><br> 1.901 + <code>E:read-write</code> 1.902 + 1.903 + <td>a user interface element E that 1.904 + 1.905 + <td><a href="#rw-pseudos">The mutability pseudo-classes</a> 1.906 + 1.907 + <td>3-UI/4 1.908 + 1.909 + <tbody> 1.910 + <tr> 1.911 + <td><code>E:root</code> 1.912 + 1.913 + <td>an E element, root of the document 1.914 + 1.915 + <td><a href="#structural-pseudos">Structural pseudo-classes</a> 1.916 + 1.917 + <td>3 1.918 + 1.919 + <tr> 1.920 + <td><code>E:empty</code> 1.921 + 1.922 + <td>an E element that has no children (not even text nodes) 1.923 + 1.924 + <td><a href="#structural-pseudos">Structural pseudo-classes</a> 1.925 + 1.926 + <td>3 1.927 + 1.928 + <tr> 1.929 + <td><code>E:first-child</code> 1.930 + 1.931 + <td>an E element, first child of its parent 1.932 + 1.933 + <td><a href="#structural-pseudos">Structural pseudo-classes</a> 1.934 + 1.935 + <td>2 1.936 + 1.937 + <tr> 1.938 + <td><code>E:nth-child(<var>n</var>)</code> 1.939 + 1.940 + <td>an E element, the <var>n</var>-th child of its parent 1.941 + 1.942 + <td><a href="#structural-pseudos">Structural pseudo-classes</a> 1.943 + 1.944 + <td>3 1.945 + 1.946 + <tr> 1.947 + <td><code>E:last-child</code> 1.948 + 1.949 + <td>an E element, last child of its parent 1.950 + 1.951 + <td><a href="#structural-pseudos">Structural pseudo-classes</a> 1.952 + 1.953 + <td>3 1.954 + 1.955 + <tr> 1.956 + <td><code>E:nth-last-child(<var>n</var>)</code> 1.957 + 1.958 + <td>an E element, the <var>n</var>-th child of its parent, counting from 1.959 + the last one 1.960 + 1.961 + <td><a href="#structural-pseudos">Structural pseudo-classes</a> 1.962 + 1.963 + <td>3 1.964 + 1.965 + <tr> 1.966 + <td><code>E:only-child</code> 1.967 + 1.968 + <td>an E element, only child of its parent 1.969 + 1.970 + <td><a href="#structural-pseudos">Structural pseudo-classes</a> 1.971 + 1.972 + <td>3 1.973 + 1.974 + <tr> 1.975 + <td><code>E:first-of-type</code> 1.976 + 1.977 + <td>an E element, first sibling of its type 1.978 + 1.979 + <td><a href="#structural-pseudos">Structural pseudo-classes</a> 1.980 + 1.981 + <td>3 1.982 + 1.983 + <tr> 1.984 + <td><code>E:nth-of-type(<var>n</var>)</code> 1.985 + 1.986 + <td>an E element, the <var>n</var>-th sibling of its type 1.987 + 1.988 + <td><a href="#structural-pseudos">Structural pseudo-classes</a> 1.989 + 1.990 + <td>3 1.991 + 1.992 + <tr> 1.993 + <td><code>E:last-of-type</code> 1.994 + 1.995 + <td>an E element, last sibling of its type 1.996 + 1.997 + <td><a href="#structural-pseudos">Structural pseudo-classes</a> 1.998 + 1.999 + <td>3 1.1000 + 1.1001 + <tr> 1.1002 + <td><code>E:nth-last-of-type(<var>n</var>)</code> 1.1003 + 1.1004 + <td>an E element, the <var>n</var>-th sibling of its type, counting from 1.1005 + the last one 1.1006 + 1.1007 + <td><a href="#structural-pseudos">Structural pseudo-classes</a> 1.1008 + 1.1009 + <td>3 1.1010 + 1.1011 + <tr> 1.1012 + <td><code>E:only-of-type</code> 1.1013 + 1.1014 + <td>an E element, only sibling of its type 1.1015 + 1.1016 + <td><a href="#structural-pseudos">Structural pseudo-classes</a> 1.1017 + 1.1018 + <td>3 1.1019 + 1.1020 + <tr> 1.1021 + <td><code>E:nth-match(<var>n</var> of <a 1.1022 + href="#selector"><var>selector</var></a>)</code> 1.1023 + 1.1024 + <td>an E element, the <var>n</var>-th sibling matching <a 1.1025 + href="#selector"><var>selector</var></a> 1.1026 + 1.1027 + <td><a href="#structural-pseudos">Structural pseudo-classes</a> 1.1028 + 1.1029 + <td>4 1.1030 + 1.1031 + <tr> 1.1032 + <td><code>E:nth-last-match(<var>n</var> of <a 1.1033 + href="#selector"><var>selector</var></a>)</code> 1.1034 + 1.1035 + <td>an E element, the <var>n</var>-th sibling matching <a 1.1036 + href="#selector"><var>selector</var></a>, counting from the last one 1.1037 + 1.1038 + <td><a href="#structural-pseudos">Structural pseudo-classes</a> 1.1039 + 1.1040 + <td>4 1.1041 + 1.1042 + <tbody> 1.1043 + <tr> 1.1044 + <td><code>E:column(<a href="#selector"><var>selector</var></a>)</code> 1.1045 + 1.1046 + <td>an E element that represents a cell in a grid/table belonging to a 1.1047 + column represented by an element that matches <a 1.1048 + href="#selector"><var>selector</var></a> 1.1049 + 1.1050 + <td><a href="#table-pseudos">Grid-Structural pseudo-classes</a> 1.1051 + 1.1052 + <td>4 1.1053 + 1.1054 + <tr> 1.1055 + <td><code>E:nth-column(<var>n</var>)</code> 1.1056 + 1.1057 + <td>an E element that represents a cell belonging to the <var>n</var>th 1.1058 + column in a grid/table 1.1059 + 1.1060 + <td><a href="#table-pseudos">Grid-Structural pseudo-classes</a> 1.1061 + 1.1062 + <td>4 1.1063 + 1.1064 + <tr> 1.1065 + <td><code>E:nth-last-column(<var>n</var>)</code> 1.1066 + 1.1067 + <td>an E element that represents a cell belonging to the <var>n</var>th 1.1068 + column in a grid/table, counting from the last one 1.1069 + 1.1070 + <td><a href="#table-pseudos">Grid-Structural pseudo-classes</a> 1.1071 + 1.1072 + <td>4 1.1073 + 1.1074 + <tbody> 1.1075 + <tr> 1.1076 + <td><code>E F</code> 1.1077 + 1.1078 + <td>an F element descendant of an E element 1.1079 + 1.1080 + <td><a href="#descendant-combinators">Descendant combinator</a> 1.1081 + 1.1082 + <td>1 1.1083 + 1.1084 + <tr> 1.1085 + <td><code>E > F</code> 1.1086 + 1.1087 + <td>an F element child of an E element 1.1088 + 1.1089 + <td><a href="#child-combinators">Child combinator</a> 1.1090 + 1.1091 + <td>2 1.1092 + 1.1093 + <tr> 1.1094 + <td><code>E + F</code> 1.1095 + 1.1096 + <td>an F element immediately preceded by an E element 1.1097 + 1.1098 + <td><a href="#adjacent-sibling-combinators">Next-sibling combinator</a> 1.1099 + 1.1100 + <td>2 1.1101 + 1.1102 + <tr> 1.1103 + <td><code>E ~ F</code> 1.1104 + 1.1105 + <td>an F element preceded by an E element 1.1106 + 1.1107 + <td><a href="#general-sibling-combinators">Following-sibling 1.1108 + combinator</a> 1.1109 + 1.1110 + <td>3 1.1111 + 1.1112 + <tr> 1.1113 + <td><code>E /foo/ F</code> 1.1114 + 1.1115 + <td>an F element ID-referenced by an E element's <code>foo</code> 1.1116 + attribute 1.1117 + 1.1118 + <td><a href="#idref-combinators">Reference combinator</a> 1.1119 + 1.1120 + <td>4 1.1121 + 1.1122 + <tr> 1.1123 + <td><code>E! > F</code> 1.1124 + 1.1125 + <td>an E element parent of an F element 1.1126 + 1.1127 + <td><a href="#subject">Determining the subject of a selector</a> + <a 1.1128 + href="#child-combinators">Child combinator</a> 1.1129 + 1.1130 + <td>4 1.1131 + </table> 1.1132 + 1.1133 + <p>The meaning of each selector is derived from the table above by 1.1134 + prepending "matches" to the contents of each cell in the "Meaning" column. 1.1135 + 1.1136 + <p class=note>Some Level 4 selectors (noted above as "3-UI") were 1.1137 + introduced in <a href="#CSS3UI" 1.1138 + rel=biblioentry>[CSS3UI]<!--{{CSS3UI}}--></a>. 1.1139 + 1.1140 + <h2 id=syntax><span class=secno>3. </span> Selector Syntax and Structure</h2> 1.1141 + 1.1142 + <h3 id=structure><span class=secno>3.1. </span> Structure and Terminology</h3> 1.1143 + 1.1144 + <p>The term <dfn id=selector>selector</dfn> can refer to a <a 1.1145 + href="#simple"><i>simple selector</i></a>, <a href="#compound"><i>compound 1.1146 + selector</i></a>, <a href="#complex"><i>complex selector</i></a>, or <a 1.1147 + href="#selector-list"><i>selector list</i></a>. 1.1148 + 1.1149 + <p>A <dfn id=complex>complex selector</dfn> is a chain of one or more <a 1.1150 + href="#compound"><i>compound selectors</i></a> separated by <a 1.1151 + href="#combinator"><i>combinators</i></a>. 1.1152 + 1.1153 + <p>A <dfn id=compound>compound selector</dfn> is a chain of <a 1.1154 + href="#simple"><i>simple selectors</i></a> that are not separated by a <a 1.1155 + href="#combinator"><i>combinator</i></a>. It always begins with a <a 1.1156 + href="#type-selector"><i>type selector</i></a> or a (possibly implied) <a 1.1157 + href="#universal-selector0"><i>universal selector</i></a>. No other type 1.1158 + selector or universal selector is allowed in the sequence. 1.1159 + 1.1160 + <p> A <dfn id=simple>simple selector</dfn> is either a <a 1.1161 + href="#type-selector"><i>type selector</i></a>, <a 1.1162 + href="#universal-selector0"><i>universal selector</i></a>, <a 1.1163 + href="#attribute-selector"><i>attribute selector</i></a>, <a 1.1164 + href="#class-selector"><i>class selector</i></a>, <a 1.1165 + href="#id-selector"><i>ID selector</i></a>, or <a 1.1166 + href="#pseudo-class"><i>pseudo-class</i></a>. 1.1167 + 1.1168 + <p>A <dfn id=combinator>combinator</dfn> is punctuation that represents a 1.1169 + particular kind of relationship between the <a 1.1170 + href="#compound"><i>compound selectors</i></a> on either side. Combinators 1.1171 + in Selectors level 4 include: whitespace, "greater-than sign" 1.1172 + (U+003E, <code>></code>), "plus sign" (U+002B, 1.1173 + <code>+</code>) and "tilde" (U+007E, <code>~</code>). <a 1.1174 + href="#whitespace">White space</a> may appear between a combinator and the 1.1175 + simple selectors around it. 1.1176 + 1.1177 + <p>An empty selector, containing no <a href="#compound"><i>compound 1.1178 + selector</i></a>, is an <a href="#invalid">invalid selector</a>. 1.1179 + 1.1180 + <h3 id=subject><span class=secno>3.2. </span> Determining the Subject of a 1.1181 + Selector</h3> 1.1182 + 1.1183 + <p>The elements of a document tree that are represented by a selector are 1.1184 + the <dfn id=subjects>subjects</dfn> of the selector. 1.1185 + 1.1186 + <p>By default, the subjects of a selector are the elements represented by 1.1187 + the last <a href="#compound"><i>compound selector</i></a> in the selector. 1.1188 + Thus a selector consisting of a single <a href="#compound"><i>compound 1.1189 + selector</i></a> represents any element satisfying its requirements 1.1190 + Prepending another <a href="#compound"><i>compound selector</i></a> and a 1.1191 + combinator to a sequence imposes additional matching constraints, so the 1.1192 + subjects of the selector are always a subset of the elements represented 1.1193 + by the last <a href="#compound"><i>compound selector</i></a>. 1.1194 + 1.1195 + <p>The subject of the selector can be explicitly identified by appending an 1.1196 + exclamation mark (!) to one of the <a href="#compound"><i>compound 1.1197 + selectors</i></a> in a selector. Although the element structure that the 1.1198 + selector represents is the same with or without the exclamation mark, 1.1199 + indicating the subject in this way can change which <a 1.1200 + href="#compound"><i>compound selector</i></a> represents the subject in 1.1201 + that structure. 1.1202 + 1.1203 + <div class=example> 1.1204 + <p>For example, the following selector represents a list item 1.1205 + <code>LI</code> unique child of an ordered list <code>OL</code>: 1.1206 + 1.1207 + <pre>OL > LI:only-child</pre> 1.1208 + 1.1209 + <p>However the following one represents an ordered list <code>OL</code> 1.1210 + having a unique child, that child being a <code>LI</code>: 1.1211 + 1.1212 + <pre>OL! > LI:only-child</pre> 1.1213 + 1.1214 + <p>The tree structures represented by these two selectors are the same, 1.1215 + but the subjects of the selectors are not. 1.1216 + </div> 1.1217 + 1.1218 + <h3 id=scoping><span class=secno>3.3. </span> Scoped Selectors</h3> 1.1219 + 1.1220 + <p>Some host applications may choose to <dfn id=scope>scope</dfn> selectors 1.1221 + to a particular subtree of the document. There are two methods of doing 1.1222 + this: 1.1223 + 1.1224 + <dl> 1.1225 + <dt><dfn id=scope-contained>scope-contained</dfn> selectors 1.1226 + 1.1227 + <dd> With this method of scoping, selectors match as if the <a 1.1228 + href="#scoping-element"><i>scoping element</i></a> were the root of the 1.1229 + document: all <a href="#compound"><i>compound selectors</i></a> must 1.1230 + match elements within the scope. (The <a 1.1231 + href="#roo-pseudo"><code>:root</code></a> pseudo-class, however, still 1.1232 + only matches the actual root of the document.) 1.1233 + 1.1234 + <dt><dfn id=scope-constrained>scope-constrained</dfn> selectors 1.1235 + 1.1236 + <dd> With this method of scoping, a selector matches if the <i>subject</i> 1.1237 + of the selector is within the scope, even if other components of the 1.1238 + selector are outside the scope. 1.1239 + </dl> 1.1240 + 1.1241 + <p>The root of the scoping subtree is called the <dfn 1.1242 + id=scoping-element>scoping element</dfn> and is in-scope. When scoped 1.1243 + selectors are used, it forms the <a 1.1244 + href="#contextual-reference-element-set"><i>contextual reference element 1.1245 + set</i></a> and can be selected with the <a 1.1246 + href="#scope-pseudo"><code>:scope</code></a> pseudo-class. 1.1247 + 1.1248 + <div class=example> 1.1249 + <p> For example, the <code>document.querySelector()</code> function 1.1250 + defined in <a href="#SELECTORS-API2" 1.1251 + rel=biblioentry>[SELECTORS-API2]<!--{{SELECTORS-API2}}--></a> allows the 1.1252 + author to define a <a 1.1253 + href="#scope-constrained"><i>scope-constrained</i></a> selector. 1.1254 + 1.1255 + <p> On the other hand, the <code>document.find()</code> function defined 1.1256 + in <a href="#SELECTORS-API2" 1.1257 + rel=biblioentry>[SELECTORS-API2]<!--{{SELECTORS-API2}}--></a> and the 1.1258 + selectors within an <a href="#HTML5" 1.1259 + rel=biblioentry>[HTML5]<!--{{HTML5}}--></a> scoped stylesheet, define <a 1.1260 + href="#scope-contained"><i>scope-contained</i></a> selectors. 1.1261 + </div> 1.1262 + 1.1263 + <h3 id=pseudo-classes><span class=secno>3.4. </span> Pseudo-classes</h3> 1.1264 + 1.1265 + <p>The <dfn id=pseudo-class>pseudo-class</dfn> concept is introduced to 1.1266 + permit selection based on information that lies outside of the document 1.1267 + tree or that cannot be expressed using the other simple selectors. 1.1268 + 1.1269 + <p>A <a href="#pseudo-class"><i>pseudo-class</i></a> always consists of a 1.1270 + "colon" (<code>:</code>) followed by the name of the <a 1.1271 + href="#pseudo-class"><i>pseudo-class</i></a> and, for functional 1.1272 + pseudo-classes, by a value between parentheses. White space is optionally 1.1273 + allowed between the parentheses and the argument, but not between the 1.1274 + pseudo-class name and the parentheses. 1.1275 + 1.1276 + <p><a href="#pseudo-class"><i>Pseudo-classes</i></a> are allowed in all <a 1.1277 + href="#compound"><i>compound selectors</i></a> contained in a selector. <a 1.1278 + href="#pseudo-class"><i>Pseudo-classes</i></a> are allowed anywhere in a 1.1279 + <a href="#compound"><i>compound selector</i></a> after the leading type 1.1280 + selector or (possibly omitted) universal selector. <a 1.1281 + href="#pseudo-class"><i>Pseudo-class</i></a> names are case-insensitive. 1.1282 + Some <a href="#pseudo-class"><i>pseudo-classes</i></a> are mutually 1.1283 + exclusive (such that a <a href="#compound"><i>compound selector</i></a> 1.1284 + containing them, while valid, will never match anything), while others can 1.1285 + apply simultaneously to the same element. <a 1.1286 + href="#pseudo-class"><i>Pseudo-classes</i></a> may be dynamic, in the 1.1287 + sense that an element can acquire or lose a pseudo-class while a user 1.1288 + interacts with the document. 1.1289 + 1.1290 + <p>Dynamic <a href="#pseudo-class"><i>pseudo-classes</i></a> classify 1.1291 + elements on characteristics other than their name, attributes, or content, 1.1292 + but rather on characteristics that cannot be deduced from the document 1.1293 + tree. They do not appear in or modify the document source or document 1.1294 + tree. 1.1295 + 1.1296 + <h3 id=pseudo-elements><span class=secno>3.5. </span>Pseudo-elements</h3> 1.1297 + 1.1298 + <p><dfn id=pseudo-elements0>Pseudo-elements</dfn> create abstractions about 1.1299 + the document tree beyond those specified by the document language. For 1.1300 + instance, document languages do not offer mechanisms to access the first 1.1301 + letter or first line of an element's content. <a 1.1302 + href="#pseudo-elements0"><i>Pseudo-elements</i></a> allow authors to refer 1.1303 + to this otherwise inaccessible information. <a 1.1304 + href="#pseudo-elements0"><i>Pseudo-elements</i></a> may also provide 1.1305 + authors a way to refer to content that does not exist in the source 1.1306 + document (e.g., the <code>::before</code> and <code>::after</code> <a 1.1307 + href="#pseudo-elements0"><i>pseudo-elements</i></a> give access to 1.1308 + generated content in CSS <a href="#CSS21" 1.1309 + rel=biblioentry>[CSS21]<!--{{CSS21}}--></a>). 1.1310 + 1.1311 + <p>A <i>pseudo-element</i> is made of two colons (<code>::</code>) followed 1.1312 + by the name of the <i>pseudo-element</i>. 1.1313 + 1.1314 + <p>This <code>::</code> notation was chosen in order to establish a 1.1315 + discrimination between <a href="#pseudo-class"><i>pseudo-classes</i></a> 1.1316 + (which subclass existing elements) and <a 1.1317 + href="#pseudo-elements0"><i>pseudo-elements</i></a> (which are elements 1.1318 + not represented in the document tree). However, for compatibility with 1.1319 + existing style sheets, user agents must also accept the previous one-colon 1.1320 + notation for <a href="#pseudo-elements0"><i>pseudo-elements</i></a> 1.1321 + introduced in CSS levels 1 and 2 (namely, <code>:first-line</code>, 1.1322 + <code>:first-letter</code>, <code>:before</code> and <code>:after</code>). 1.1323 + This compatibility notation is not allowed any other <a 1.1324 + href="#pseudo-elements0"><i>pseudo-elements</i></a>. 1.1325 + 1.1326 + <p>Only one <i>pseudo-element</i> may appear per selector, and only if the 1.1327 + subject of the selector is the last <a href="#compound"><i>compound 1.1328 + selector</i></a> in the selector. If present the <i>pseudo-element</i> 1.1329 + must appear after the <a href="#compound"><i>compound selector</i></a> 1.1330 + that represents the <a href="#subject">subjects</a> of the selector. 1.1331 + 1.1332 + <p class=note>A future version of this specification may allow multiple 1.1333 + pseudo-elements per selector. 1.1334 + 1.1335 + <p>Syntactically, a <i>pseudo-element</i> may be followed by any 1.1336 + combination of the <a href="#useraction-pseudos">user action 1.1337 + pseudo-classes</a>. Whether these pseudo-classes can match on the 1.1338 + <i>pseudo-element</i> depends on the <a 1.1339 + href="#pseudo-class"><i>pseudo-class</i></a> and <i>pseudo-element</i>”s 1.1340 + definition: unless otherwise-specified, none of these <a 1.1341 + href="#pseudo-class"><i>pseudo-classes</i></a> will match on the 1.1342 + <i>pseudo-element</i>. 1.1343 + 1.1344 + <div class=example> 1.1345 + <p>For example, the <a href="#hover-pseudo"><code>:hover</code></a> 1.1346 + pseudo-class specifies that it can apply to any pseudo-element, i.e. 1.1347 + <code>::first-line:hover</code> will match when the first line is 1.1348 + hovered. However, since neither <a 1.1349 + href="#focus-pseudo"><code>:focus</code></a> nor 1.1350 + <code>::first-line</code> define that <a 1.1351 + href="#focus-pseudo"><code>:focus</code></a> can apply to 1.1352 + <code>::first-line</code>, the selector <code>::first-line:focus</code> 1.1353 + will never match anything. 1.1354 + </div> 1.1355 + 1.1356 + <h3 id=case-sensitive><span class=secno>3.6. </span> Characters and case 1.1357 + sensitivity</h3> 1.1358 + 1.1359 + <p>All Selectors syntax is case-insensitive within the ASCII range (i.e. 1.1360 + [a-z] and [A-Z] are equivalent), except for parts that are not under the 1.1361 + control of Selectors. The case sensitivity of document language element 1.1362 + names, attribute names, and attribute values in selectors depends on the 1.1363 + document language. For example, in HTML, element names are 1.1364 + case-insensitive, but in XML, they are case-sensitive. Case sensitivity of 1.1365 + namespace prefixes is defined in <a href="#CSS3NAMESPACE" 1.1366 + rel=biblioentry>[CSS3NAMESPACE]<!--{{!CSS3NAMESPACE}}--></a>. 1.1367 + 1.1368 + <p><dfn id=whitespace>White space</dfn> in Selectors consists of the 1.1369 + characters SPACE (U+0020), TAB (U+0009), LINE FEED (U+000A), CARRIAGE 1.1370 + RETURN (U+000D), and FORM FEED (U+000C) can occur in whitespace. Other 1.1371 + space-like characters, such as EM SPACE (U+2003) and IDEOGRAPHIC SPACE 1.1372 + (U+3000), are never part of white space. 1.1373 + 1.1374 + <p>Characters in Selectors can be escaped with a backslash according to the 1.1375 + same <a href="http://www.w3.org/TR/CSS21/syndata.html#characters">escaping 1.1376 + rules</a> as CSS. <a href="#CSS21" 1.1377 + rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. 1.1378 + 1.1379 + <h3 id=namespaces><span class=secno>3.7. </span> Namespaces</h3> 1.1380 + 1.1381 + <p>Certain selectors support namespace prefixes. The mechanism by which 1.1382 + namespace prefixes are <dfn id=nsdecl>declared</dfn> should be specified 1.1383 + by the language that uses Selectors. If the language does not specify a 1.1384 + namespace prefix declaration mechanism, then no prefixes are declared. In 1.1385 + CSS, namespace prefixes are declared with the <a 1.1386 + href="http://www.w3.org/TR/css3-namespace/#declaration"><code>@namespace</code></a> 1.1387 + rule. <a href="#CSS3NAMESPACE" 1.1388 + rel=biblioentry>[CSS3NAMESPACE]<!--{{!CSS3NAMESPACE}}--></a> 1.1389 + 1.1390 + <h3 id=invalid><span class=secno>3.8. </span> Invalid Selectors and Error 1.1391 + Handling</h3> 1.1392 + 1.1393 + <p>Invalidity is caused by a parsing error, e.g. an unrecognized token or a 1.1394 + token which is not allowed at the current parsing point. 1.1395 + 1.1396 + <p>User agents must observe the rules for handling parsing errors: 1.1397 + 1.1398 + <ul> 1.1399 + <li>a simple selector containing an <a href="#namespaces">undeclared 1.1400 + namespace prefix</a> is invalid 1.1401 + 1.1402 + <li>a selector containing an invalid simple selector, an invalid 1.1403 + combinator or an invalid token is invalid. 1.1404 + 1.1405 + <li>a selector list containing an invalid selector is invalid. 1.1406 + </ul> 1.1407 + 1.1408 + <p>An invalid selector represents nothing. 1.1409 + 1.1410 + <p class=issue>It's been <a 1.1411 + href="http://lists.w3.org/Archives/Public/www-style/2010Nov/0203.html">requested</a> 1.1412 + that the last rule be dropped in favor of Media Queries-style 1.1413 + error-handling. 1.1414 + 1.1415 + <h2 id=logical-combination><span class=secno>4. </span> Logical 1.1416 + Combinations</h2> 1.1417 + 1.1418 + <h3 id=grouping><span class=secno>4.1. </span> Selector Lists</h3> 1.1419 + 1.1420 + <p>A comma-separated list of selectors represents the union of all elements 1.1421 + selected by each of the individual selectors in the <dfn 1.1422 + id=selector-list>selector list</dfn>. (A comma is U+002C.) For example, in 1.1423 + CSS when several selectors share the same declarations, they may be 1.1424 + grouped into a comma-separated list. White space may appear before and/or 1.1425 + after the comma. 1.1426 + 1.1427 + <div class=example> 1.1428 + <p>CSS example:</p> 1.1429 + 1.1430 + <p>In this example, we condense three rules with identical declarations 1.1431 + into one. Thus,</p> 1.1432 + 1.1433 + <pre>h1 { font-family: sans-serif } 1.1434 + h2 { font-family: sans-serif } 1.1435 + h3 { font-family: sans-serif }</pre> 1.1436 + 1.1437 + <p>is equivalent to:</p> 1.1438 + 1.1439 + <pre>h1, h2, h3 { font-family: sans-serif }</pre> 1.1440 + </div> 1.1441 + 1.1442 + <p><strong>Warning</strong>: the equivalence is true in this example 1.1443 + because all the selectors are valid selectors. If just one of these 1.1444 + selectors were invalid, the entire group of selectors would be invalid. 1.1445 + This would invalidate the rule for all three heading elements, whereas in 1.1446 + the former case only one of the three individual heading rules would be 1.1447 + invalidated. 1.1448 + 1.1449 + <div class=example> 1.1450 + <p>Invalid CSS example:</p> 1.1451 + 1.1452 + <pre>h1 { font-family: sans-serif } 1.1453 + h2..foo { font-family: sans-serif } 1.1454 + h3 { font-family: sans-serif }</pre> 1.1455 + 1.1456 + <p>is not equivalent to:</p> 1.1457 + 1.1458 + <pre>h1, h2..foo, h3 { font-family: sans-serif }</pre> 1.1459 + 1.1460 + <p>because the above selector (<code>h1, h2..foo, h3</code>) is entirely 1.1461 + invalid and the entire style rule is dropped. (When the selectors are not 1.1462 + grouped, only the rule for <code>h2..foo</code> is dropped.)</p> 1.1463 + </div> 1.1464 + 1.1465 + <h3 id=the-matches-pseudo><span class=secno>4.2. </span> The Matches-Any 1.1466 + Pseudo-class: <a href="#matches-pseudo"><code>:matches()</code></a></h3> 1.1467 + 1.1468 + <p>The matches-any pseudo-class, <dfn id=matches-pseudo>:matches()</dfn>, 1.1469 + is a functional notation taking a <a href="#grouping">selector list</a> as 1.1470 + its argument. It represents an element that is represented by its 1.1471 + argument. 1.1472 + 1.1473 + <p>In Selectors Level 4, only <a href="#compound">compound selectors</a> 1.1474 + are allowed within <a href="#matches-pseudo"><code>:matches()</code></a>: 1.1475 + <a href="#combinator">combinators</a> are not allowed. Additionally, <a 1.1476 + href="#matches-pseudo"><code>:matches()</code></a> may not be nested 1.1477 + within itself or within <a 1.1478 + href="#negation-pseudo"><code>:not()</code></a>: 1.1479 + <code>:matches(:matches(...))</code> and <code>:not(:matches(...))</code> 1.1480 + are invalid. 1.1481 + 1.1482 + <p>Pseudo-elements cannot be represented by the matches-any pseudo-class; 1.1483 + they are not valid within <a 1.1484 + href="#matches-pseudo"><code>:matches()</code></a>. 1.1485 + 1.1486 + <p>Default namespace declarations do not affect the subject of any selector 1.1487 + within a matches-any pseudo-class unless the argument is an explicit 1.1488 + universal selector or a type selector. 1.1489 + 1.1490 + <div class=example> 1.1491 + <p>For example, following selector matches any element that is being 1.1492 + hovered or focused, regardless of its namespace. In particular, it is not 1.1493 + limited to only matching elements in the default namespace that are being 1.1494 + hovered or focused.</p> 1.1495 + 1.1496 + <pre>*|*:matches(:hover, :focus)</pre> 1.1497 + 1.1498 + <p>The following selector, however, represents only hovered or focused 1.1499 + elements that are in the default namespace, because it uses an explicit 1.1500 + universal selector within the <a 1.1501 + href="#matches-pseudo"><code>:matches()</code></a> notation:</p> 1.1502 + 1.1503 + <pre>*|*:matches(*:hover, *:focus)</pre> 1.1504 + </div> 1.1505 + 1.1506 + <h3 id=the-negation-pseudo><span class=secno>4.3. </span> The Negation 1.1507 + Pseudo-class: <a href="#negation-pseudo"><code>:not()</code></a></h3> 1.1508 + 1.1509 + <p>The negation pseudo-class, <dfn id=negation-pseudo>:not()</dfn>, is a 1.1510 + functional notation taking a <a href="#grouping">selector list</a> as an 1.1511 + argument. It represents an element that is not represented by its 1.1512 + argument. 1.1513 + 1.1514 + <p>In Selectors Level 4, only <a href="#compound">compound selectors</a> 1.1515 + are allowed within <a href="#matches-pseudo"><code>:matches()</code></a>: 1.1516 + <a href="#combinator">combinators</a> are not allowed. Additionally, 1.1517 + negations may not be nested within itself or within <a 1.1518 + href="#matches-pseudo"><code>:matches()</code></a>: 1.1519 + <code>:not(:not(...))</code> and <code>:matches(:not(...))</code> are 1.1520 + invalid. 1.1521 + 1.1522 + <p class=note>In Selectors Level 3, only a single <a href="#simple">simple 1.1523 + selector</a> was allowed as the argument to <a 1.1524 + href="#negation-pseudo"><code>:not()</code></a>. 1.1525 + 1.1526 + <p>Pseudo-elements cannot be represented by the negation pseudo-class; they 1.1527 + are not valid within <a href="#negation-pseudo"><code>:not()</code></a>. 1.1528 + 1.1529 + <div class=example> 1.1530 + <p>For example, the following selector matches all <code>button</code> 1.1531 + elements in an HTML document that are not disabled.</p> 1.1532 + 1.1533 + <pre>button:not([DISABLED])</pre> 1.1534 + 1.1535 + <p>The following selector represents all but <code>FOO</code> elements.</p> 1.1536 + 1.1537 + <pre>*:not(FOO)</pre> 1.1538 + 1.1539 + <p>The following compound selector represents all HTML elements except 1.1540 + links.</p> 1.1541 + 1.1542 + <pre>html|*:not(:link):not(:visited)</pre> 1.1543 + </div> 1.1544 + 1.1545 + <p>Default namespace declarations do not affect the subject of any selector 1.1546 + within a negation pseudo-class unless the argument is an explicit 1.1547 + universal selector or a type selector. (See <a 1.1548 + href="#matches"><code>:matches()</code></a> for examples. 1.1549 + 1.1550 + <p class=note><strong>Note</strong>: the :not() pseudo allows useless 1.1551 + selectors to be written. For instance <a 1.1552 + href="#negation-pseudo"><code>:not(*|*)</code></a>, which represents no 1.1553 + element at all, or <code>foo:not(bar)</code>, which is equivalent to 1.1554 + <code>foo</code> but with a higher specificity. 1.1555 + 1.1556 + <h2 id=elemental-selectors><span class=secno>5. </span> Elemental selectors</h2> 1.1557 + 1.1558 + <h3 id=type-selectors><span class=secno>5.1. </span> Type (tag name) 1.1559 + selector</h3> 1.1560 + 1.1561 + <p>A <dfn id=type-selector>type selector</dfn> is the name of a document 1.1562 + language element type written using the syntax of <a 1.1563 + href="http://www.w3.org/TR/css3-namespace/#css-qnames">CSS qualified 1.1564 + names</a> <a href="#CSS3NAMESPACE" 1.1565 + rel=biblioentry>[CSS3NAMESPACE]<!--{{!CSS3NAMESPACE}}--></a>. A type 1.1566 + selector represents an instance of the element type in the document tree. 1.1567 + 1.1568 + <div class=example> 1.1569 + <p>Example:</p> 1.1570 + 1.1571 + <p>The following selector represents an <code>h1</code> element in the 1.1572 + document tree:</p> 1.1573 + 1.1574 + <pre>h1</pre> 1.1575 + </div> 1.1576 + 1.1577 + <h4 id=typenmsp><span class=secno>5.1.1. </span> Type selectors and 1.1578 + namespaces</h4> 1.1579 + 1.1580 + <p>Type selectors allow an optional namespace component: a namespace prefix 1.1581 + that has been previously <a href="#nsdecl">declared</a> may be prepended 1.1582 + to the element name separated by the namespace separator "vertical 1.1583 + bar" (U+007C, <code>|</code>). (See, e.g., <a href="#XML-NAMES" 1.1584 + rel=biblioentry>[XML-NAMES]<!--{{XML-NAMES}}--></a> for the use of 1.1585 + namespaces in XML.) 1.1586 + 1.1587 + <p>The namespace component may be left empty (no prefix before the 1.1588 + namespace separator) to indicate that the selector is only to represent 1.1589 + elements with no namespace. 1.1590 + 1.1591 + <p>An asterisk may be used for the namespace prefix, indicating that the 1.1592 + selector represents elements in any namespace (including elements with no 1.1593 + namespace). 1.1594 + 1.1595 + <p>Element type selectors that have no namespace component (no namespace 1.1596 + separator) represent elements without regard to the element's namespace 1.1597 + (equivalent to "<code>*|</code>") unless a default namespace has been <a 1.1598 + href="#nsdecl">declared</a> for namespaced selectors (e.g. in CSS, in the 1.1599 + style sheet). If a default namespace has been declared, such selectors 1.1600 + will represent only elements in the default namespace. 1.1601 + 1.1602 + <p>A type selector containing a namespace prefix that has not been 1.1603 + previously <a href="#nsdecl">declared</a> for namespaced selectors is an 1.1604 + <a href="#conformance">invalid</a> selector. 1.1605 + 1.1606 + <p>In a namespace-aware client, the name part of element type selectors 1.1607 + (the part after the namespace separator, if it is present) will only match 1.1608 + against the <a 1.1609 + href="http://www.w3.org/TR/REC-xml-names/#NT-LocalPart">local part</a> of 1.1610 + the element's <a 1.1611 + href="http://www.w3.org/TR/REC-xml-names/#ns-qualnames">qualified 1.1612 + name</a>. 1.1613 + 1.1614 + <p>In summary: 1.1615 + 1.1616 + <dl> 1.1617 + <dt><code>ns|E</code> 1.1618 + 1.1619 + <dd>elements with name E in namespace ns 1.1620 + 1.1621 + <dt><code>*|E</code> 1.1622 + 1.1623 + <dd>elements with name E in any namespace, including those without a 1.1624 + namespace 1.1625 + 1.1626 + <dt><code>|E</code> 1.1627 + 1.1628 + <dd>elements with name E without a namespace 1.1629 + 1.1630 + <dt><code>E</code> 1.1631 + 1.1632 + <dd>if no default namespace has been <a href="#nsdecl">declared</a> for 1.1633 + selectors, this is equivalent to *|E. Otherwise it is equivalent to ns|E 1.1634 + where ns is the default namespace. 1.1635 + </dl> 1.1636 + 1.1637 + <div class=example> 1.1638 + <p>CSS examples:</p> 1.1639 + 1.1640 + <pre> 1.1641 + @namespace foo url(http://www.example.com); 1.1642 + foo|h1 { color: blue } /* first rule */ 1.1643 + foo|* { color: yellow } /* second rule */ 1.1644 + |h1 { color: red } /* ...*/ 1.1645 + *|h1 { color: green } 1.1646 + h1 { color: green }</pre> 1.1647 + 1.1648 + <p>The first rule (not counting the <code>@namespace</code> at-rule) will 1.1649 + match only <code>h1</code> elements in the "http://www.example.com" 1.1650 + namespace.</p> 1.1651 + 1.1652 + <p>The second rule will match all elements in the "http://www.example.com" 1.1653 + namespace.</p> 1.1654 + 1.1655 + <p>The third rule will match only <code>h1</code> elements with no 1.1656 + namespace.</p> 1.1657 + 1.1658 + <p>The fourth rule will match <code>h1</code> elements in any namespace 1.1659 + (including those without any namespace).</p> 1.1660 + 1.1661 + <p>The last rule is equivalent to the fourth rule because no default 1.1662 + namespace has been defined.</p> 1.1663 + </div> 1.1664 + 1.1665 + <h3 id=universal-selector><span class=secno>5.2. </span> Universal selector 1.1666 + </h3> 1.1667 + 1.1668 + <p>The <dfn id=universal-selector0>universal selector</dfn>, written as a 1.1669 + <a href="http://www.w3.org/TR/css3-namespace/#css-qnames">CSS qualified 1.1670 + name</a> <a href="#CSS3NAMESPACE" 1.1671 + rel=biblioentry>[CSS3NAMESPACE]<!--{{!CSS3NAMESPACE}}--></a> with an 1.1672 + asterisk (<code>*</code> U+002A) as the local name, represents the 1.1673 + qualified name of any element type. It represents any single element in 1.1674 + the document tree in any namespace (including those without a namespace) 1.1675 + if no default namespace has been specified for selectors. If a default 1.1676 + namespace has been specified, see <a href="#univnmsp">Universal selector 1.1677 + and Namespaces</a> below. 1.1678 + 1.1679 + <p>If a universal selector represented by <code>*</code> (i.e. without a 1.1680 + namespace prefix) is not the only component of a <a 1.1681 + href="#compound"><i>compound selector</i></a> or is immediately followed 1.1682 + by a <i>pseudo-element</i>, then the <code>*</code> may be omitted and the 1.1683 + universal selector's presence implied. 1.1684 + 1.1685 + <div class=example> 1.1686 + <p>Examples:</p> 1.1687 + 1.1688 + <ul> 1.1689 + <li><code>*[hreflang|=en]</code> and <code>[hreflang|=en]</code> are 1.1690 + equivalent, 1.1691 + 1.1692 + <li><code>*.warning</code> and <code>.warning</code> are equivalent, 1.1693 + 1.1694 + <li><code>*#myid</code> and <code>#myid</code> are equivalent. 1.1695 + </ul> 1.1696 + </div> 1.1697 + 1.1698 + <p class=note><strong>Note:</strong> it is recommended that the 1.1699 + <code>*</code> not be omitted, because it decreases the potential 1.1700 + confusion between, for example, <code style="white-space: nowrap">div 1.1701 + :first-child</code> and <code 1.1702 + style="white-space: nowrap">div:first-child</code>. Here, <code 1.1703 + style="white-space: nowrap">div *:first-child</code> is more readable. 1.1704 + 1.1705 + <h4 id=univnmsp><span class=secno>5.2.1. </span> Universal selector and 1.1706 + namespaces</h4> 1.1707 + 1.1708 + <p>The universal selector allows an optional namespace component. It is 1.1709 + used as follows: 1.1710 + 1.1711 + <dl> 1.1712 + <dt><code>ns|*</code> 1.1713 + 1.1714 + <dd>all elements in namespace ns 1.1715 + 1.1716 + <dt><code>*|*</code> 1.1717 + 1.1718 + <dd>all elements 1.1719 + 1.1720 + <dt><code>|*</code> 1.1721 + 1.1722 + <dd>all elements without a namespace 1.1723 + 1.1724 + <dt><code>*</code> 1.1725 + 1.1726 + <dd>if no default namespace has been specified, this is equivalent to *|*. 1.1727 + Otherwise it is equivalent to ns|* where ns is the default namespace. 1.1728 + </dl> 1.1729 + 1.1730 + <p>A universal selector containing a namespace prefix that has not been 1.1731 + previously <a href="#nsdecl">declared</a> is an <a 1.1732 + href="#conformance">invalid</a> selector. 1.1733 + 1.1734 + <h2 id=attribute-selectors><span class=secno>6. </span> Attribute selectors</h2> 1.1735 + 1.1736 + <p>Selectors allow the representation of an element's attributes. When a 1.1737 + selector is used as an expression to match against an element, an <dfn 1.1738 + id=attribute-selector>attribute selector</dfn> must be considered to match 1.1739 + an element if that element has an attribute that matches the attribute 1.1740 + represented by the attribute selector. 1.1741 + 1.1742 + <p class=issue>Add comma-separated syntax for <a 1.1743 + href="http://lists.w3.org/Archives/Public/www-style/2011Mar/0215.html">multiple-value 1.1744 + matching</a>? e.g. [rel ~= next, prev, up, first, last] 1.1745 + 1.1746 + <h3 id=attribute-representation><span class=secno>6.1. </span> Attribute 1.1747 + presence and value selectors</h3> 1.1748 + 1.1749 + <p>CSS2 introduced four attribute selectors: 1.1750 + 1.1751 + <dl> 1.1752 + <dt><code>[att]</code> 1.1753 + 1.1754 + <dd>Represents an element with the <code>att</code> attribute, whatever 1.1755 + the value of the attribute. 1.1756 + 1.1757 + <dt><code>[att=val]</code> 1.1758 + 1.1759 + <dd>Represents an element with the <code>att</code> attribute whose value 1.1760 + is exactly "val". 1.1761 + 1.1762 + <dt><code>[att~=val]</code> 1.1763 + 1.1764 + <dd>Represents an element with the <code>att</code> attribute whose value 1.1765 + is a <a href="#whitespace">whitespace</a>-separated list of words, one of 1.1766 + which is exactly "val". If "val" contains whitespace, it will never 1.1767 + represent anything (since the words are <em>separated</em> by spaces). 1.1768 + Also if "val" is the empty string, it will never represent anything. 1.1769 + 1.1770 + <dt><code>[att|=val]</code> 1.1771 + 1.1772 + <dd>Represents an element with the <code>att</code> attribute, its value 1.1773 + either being exactly "val" or beginning with "val" immediately followed 1.1774 + by "-" (U+002D). This is primarily intended to allow language subcode 1.1775 + matches (e.g., the <code>hreflang</code> attribute on the <code>a</code> 1.1776 + element in HTML) as described in BCP 47 (<a href="#BCP47" 1.1777 + rel=biblioentry>[BCP47]<!--{{BCP47}}--></a>) or its successor. For <a 1.1778 + href="#lang-pseudo"><code>lang</code></a> (or <code>xml:lang</code>) 1.1779 + language subcode matching, please see <a href="#lang-pseudo">the 1.1780 + <code>:lang</code> pseudo-class</a>. 1.1781 + </dl> 1.1782 + 1.1783 + <p>Attribute values must be CSS <a 1.1784 + href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifiers</a> 1.1785 + or <a href="http://www.w3.org/TR/CSS21/syndata.html#strings">strings</a>. 1.1786 + <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 1.1787 + 1.1788 + <div class=example> 1.1789 + <p>Examples:</p> 1.1790 + 1.1791 + <p>The following attribute selector represents an <code>h1</code> element 1.1792 + that carries the <code>title</code> attribute, whatever its value:</p> 1.1793 + 1.1794 + <pre>h1[title]</pre> 1.1795 + 1.1796 + <p>In the following example, the selector represents a <code>span</code> 1.1797 + element whose <code>class</code> attribute has exactly the value 1.1798 + "example":</p> 1.1799 + 1.1800 + <pre>span[class="example"]</pre> 1.1801 + 1.1802 + <p>Multiple attribute selectors can be used to represent several 1.1803 + attributes of an element, or several conditions on the same attribute. 1.1804 + Here, the selector represents a <code>span</code> element whose 1.1805 + <code>hello</code> attribute has exactly the value "Cleveland" and whose 1.1806 + <code>goodbye</code> attribute has exactly the value "Columbus":</p> 1.1807 + 1.1808 + <pre>span[hello="Cleveland"][goodbye="Columbus"]</pre> 1.1809 + 1.1810 + <p>The following CSS rules illustrate the differences between "=" and 1.1811 + "~=". The first selector would match, for example, an <code>a</code> 1.1812 + element with the value "copyright copyleft copyeditor" on a 1.1813 + <code>rel</code> attribute. The second selector would only match an 1.1814 + <code>a</code> element with an <code>href</code> attribute having the 1.1815 + exact value "http://www.w3.org/".</p> 1.1816 + 1.1817 + <pre>a[rel~="copyright"] { ... } 1.1818 + a[href="http://www.w3.org/"] { ... }</pre> 1.1819 + 1.1820 + <p>The following selector represents an <code>a</code> element whose 1.1821 + <code>hreflang</code> attribute is exactly "fr".</p> 1.1822 + 1.1823 + <pre>a[hreflang=fr]</pre> 1.1824 + 1.1825 + <p>The following selector represents an <code>a</code> element for which 1.1826 + the value of the <code>hreflang</code> attribute begins with "en", 1.1827 + including "en", "en-US", and "en-scouse":</p> 1.1828 + 1.1829 + <pre>a[hreflang|="en"]</pre> 1.1830 + 1.1831 + <p>The following selectors represent a <code>DIALOGUE</code> element 1.1832 + whenever it has one of two different values for an attribute 1.1833 + <code>character</code>:</p> 1.1834 + 1.1835 + <pre>DIALOGUE[character=romeo] 1.1836 + DIALOGUE[character=juliet]</pre> 1.1837 + </div> 1.1838 + 1.1839 + <h3 id=attribute-substrings><span class=secno>6.2. </span> Substring 1.1840 + matching attribute selectors</h3> 1.1841 + 1.1842 + <p>Three additional attribute selectors are provided for matching 1.1843 + substrings in the value of an attribute: 1.1844 + 1.1845 + <dl> 1.1846 + <dt><code>[att^=val]</code> 1.1847 + 1.1848 + <dd>Represents an element with the <code>att</code> attribute whose value 1.1849 + begins with the prefix "val". If "val" is the empty string then the 1.1850 + selector does not represent anything. 1.1851 + 1.1852 + <dt><code>[att$=val]</code> 1.1853 + 1.1854 + <dd>Represents an element with the <code>att</code> attribute whose value 1.1855 + ends with the suffix "val". If "val" is the empty string then the 1.1856 + selector does not represent anything. 1.1857 + 1.1858 + <dt><code>[att*=val]</code> 1.1859 + 1.1860 + <dd>Represents an element with the <code>att</code> attribute whose value 1.1861 + contains at least one instance of the substring "val". If "val" is the 1.1862 + empty string then the selector does not represent anything. 1.1863 + </dl> 1.1864 + 1.1865 + <p>Attribute values must be CSS <a 1.1866 + href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifiers</a> 1.1867 + or <a href="http://www.w3.org/TR/CSS21/syndata.html#strings">strings</a>. 1.1868 + <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 1.1869 + 1.1870 + <div class=example> 1.1871 + <p>Examples:</p> 1.1872 + 1.1873 + <p>The following selector represents an HTML <code>object</code>, 1.1874 + referencing an image:</p> 1.1875 + 1.1876 + <pre>object[type^="image/"]</pre> 1.1877 + 1.1878 + <p>The following selector represents an HTML anchor <code>a</code> with an 1.1879 + <code>href</code> attribute whose value ends with ".html".</p> 1.1880 + 1.1881 + <pre>a[href$=".html"]</pre> 1.1882 + 1.1883 + <p>The following selector represents an HTML paragraph with a 1.1884 + <code>title</code> attribute whose value contains the substring "hello"</p> 1.1885 + 1.1886 + <pre>p[title*="hello"]</pre> 1.1887 + </div> 1.1888 + 1.1889 + <h3 id=attribute-case><span class=secno>6.3. </span> Case-sensitivity</h3> 1.1890 + 1.1891 + <p>By default case-sensitivity of attribute names and values in selectors 1.1892 + depends on the document language. To match attribute values 1.1893 + case-insensitively regardless of document language rules, the attribute 1.1894 + selector may include the identifier <code>i</code> before the closing 1.1895 + bracket (<code>]</code>). When this flag is present, UAs must match the 1.1896 + attribute's value case-insensitively within the ASCII range. 1.1897 + 1.1898 + <div class=example> 1.1899 + <p>The following rule will style the <code>frame</code> attribute when it 1.1900 + has a value of <code>hsides</code>, whether that value is represented as 1.1901 + <code>hsides</code>, <code>HSIDES</code>, <code>hSides</code>, etc. even 1.1902 + in an XML environment where attribute values are case-sensitive. 1.1903 + f<!-- -->[frame=hsides i] { border-style: solid none; } 1.1904 + </div> 1.1905 + <!-- plinss notes we may eventually want to choose other normalizations 1.1906 + for attribute matching; but since there's no normalization scheme 1.1907 + that really seems needed at this point, this issue is deferred to 1.1908 + a later level --> 1.1909 + 1.1910 + <h3 id=attrnmsp><span class=secno>6.4. </span> Attribute selectors and 1.1911 + namespaces</h3> 1.1912 + 1.1913 + <p>The attribute name in an attribute selector is given as a <a 1.1914 + href="http://www.w3.org/TR/css3-namespace/#css-qnames">CSS qualified 1.1915 + name</a>: a namespace prefix that has been previously <a 1.1916 + href="#nsdecl">declared</a> may be prepended to the attribute name 1.1917 + separated by the namespace separator "vertical bar" 1.1918 + (<code>|</code>). In keeping with the Namespaces in the XML 1.1919 + recommendation, default namespaces do not apply to attributes, therefore 1.1920 + attribute selectors without a namespace component apply only to attributes 1.1921 + that have no namespace (equivalent to "<code>|attr</code>"). An asterisk 1.1922 + may be used for the namespace prefix indicating that the selector is to 1.1923 + match all attribute names without regard to the attribute's namespace. 1.1924 + 1.1925 + <p>An attribute selector with an attribute name containing a namespace 1.1926 + prefix that has not been previously <a href="#nsdecl">declared</a> is an 1.1927 + <a href="#conformance">invalid</a> selector. 1.1928 + 1.1929 + <div class=example> 1.1930 + <p>CSS examples:</p> 1.1931 + 1.1932 + <pre> 1.1933 + @namespace foo "http://www.example.com"; 1.1934 + [foo|att=val] { color: blue } 1.1935 + [*|att] { color: yellow } 1.1936 + [|att] { color: green } 1.1937 + [att] { color: green }</pre> 1.1938 + 1.1939 + <p>The first rule will match only elements with the attribute 1.1940 + <code>att</code> in the "http://www.example.com" namespace with the value 1.1941 + "val".</p> 1.1942 + 1.1943 + <p>The second rule will match only elements with the attribute 1.1944 + <code>att</code> regardless of the namespace of the attribute (including 1.1945 + no namespace).</p> 1.1946 + 1.1947 + <p>The last two rules are equivalent and will match only elements with the 1.1948 + attribute <code>att</code> where the attribute is not in a namespace.</p> 1.1949 + </div> 1.1950 + 1.1951 + <h3 id=def-values><span class=secno>6.5. </span> Default attribute values 1.1952 + in DTDs</h3> 1.1953 + 1.1954 + <p>Attribute selectors represent attribute values in the document tree. How 1.1955 + that document tree is constructed is outside the scope of Selectors. In 1.1956 + some document formats default attribute values can be defined in a DTD or 1.1957 + elsewhere, but these can only be selected by attribute selectors if they 1.1958 + appear in the document tree. Selectors should be designed so that they 1.1959 + work whether or not the default values are included in the document tree. 1.1960 + 1.1961 + <p>For example, a XML UA may, but is <a 1.1962 + href="#negation-pseudo"><em>not</em></a> required to read an "external 1.1963 + subset" of the DTD but <em>is</em> required to look for default attribute 1.1964 + values in the document's "internal subset." (See, e.g., <a href="#XML10" 1.1965 + rel=biblioentry>[XML10]<!--{{XML10}}--></a> for definitions of these 1.1966 + subsets.) Depending on the UA, a default attribute value defined in the 1.1967 + external subset of the DTD might or might not appear in the document tree. 1.1968 + 1.1969 + <p>A UA that recognizes an XML namespace may, but is not required to use 1.1970 + its knowledge of that namespace to treat default attribute values as if 1.1971 + they were present in the document. (For example, an XHTML UA is not 1.1972 + required to use its built-in knowledge of the XHTML DTD. See, e.g., <a 1.1973 + href="#XML-NAMES" rel=biblioentry>[XML-NAMES]<!--{{XML-NAMES}}--></a> for 1.1974 + details on namespaces in XML 1.0.) 1.1975 + 1.1976 + <p class=note><strong>Note:</strong> Typically, implementations choose to 1.1977 + ignore external subsets. This corresponds to the behaviour of 1.1978 + non-validating processors as defined by the XML specification. 1.1979 + 1.1980 + <div class=example> 1.1981 + <p>Example:</p> 1.1982 + 1.1983 + <p>Consider an element <code>EXAMPLE</code> with an attribute 1.1984 + <code>radix</code> that has a default value of <code>"decimal"</code>. 1.1985 + The DTD fragment might be</p> 1.1986 + 1.1987 + <pre 1.1988 + class=dtd-example><!ATTLIST EXAMPLE radix (decimal,octal) "decimal"></pre> 1.1989 + 1.1990 + <p>If the style sheet contains the rules</p> 1.1991 + 1.1992 + <pre>EXAMPLE[radix=decimal] { /*... default property settings ...*/ } 1.1993 + EXAMPLE[radix=octal] { /*... other settings...*/ }</pre> 1.1994 + 1.1995 + <p>the first rule might not match elements whose <code>radix</code> 1.1996 + attribute is set by default, i.e. not set explicitly. To catch all cases, 1.1997 + the attribute selector for the default value must be dropped:</p> 1.1998 + 1.1999 + <pre>EXAMPLE { /*... default property settings ...*/ } 1.2000 + EXAMPLE[radix=octal] { /*... other settings...*/ }</pre> 1.2001 + 1.2002 + <p>Here, because the selector <code>EXAMPLE[radix=octal]</code> is more 1.2003 + specific than the type selector alone, the style declarations in the 1.2004 + second rule will override those in the first for elements that have a 1.2005 + <code>radix</code> attribute value of <code>"octal"</code>. Care has to 1.2006 + be taken that all property declarations that are to apply only to the 1.2007 + default case are overridden in the non-default cases' style rules.</p> 1.2008 + </div> 1.2009 + 1.2010 + <h3 id=class-html><span class=secno>6.6. </span> Class selectors</h3> 1.2011 + 1.2012 + <p>The <dfn id=class-selector>class selector</dfn> is given as a full stop 1.2013 + (. U+002E) immediately followed by an identifier. It represents an element 1.2014 + belonging to the class identified by the identifier, as defined by the 1.2015 + document language. For example, in <a href="#HTML5" 1.2016 + rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>, <a href="#SVG11" 1.2017 + rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>, and <a href="#MATHML" 1.2018 + rel=biblioentry>[MATHML]<!--{{MATHML}}--></a> membership in a class is 1.2019 + given by the <code>class</code> attribute: in these languages it is 1.2020 + equivalent to the <code>~=</code> notation applied to the local 1.2021 + <code>class</code> attribute (i.e. 1.2022 + <code>[class~=<var>identifier</var>]</code>), except that it has a higher 1.2023 + <a href="#specificity">specificity</a>. 1.2024 + 1.2025 + <div class=example> 1.2026 + <p>CSS examples:</p> 1.2027 + 1.2028 + <p>We can assign style information to all elements with 1.2029 + <code>class~="pastoral"</code> as follows:</p> 1.2030 + 1.2031 + <pre>*.pastoral { color: green } /* all elements with class~=pastoral */</pre> 1.2032 + 1.2033 + <p>or just</p> 1.2034 + 1.2035 + <pre>.pastoral { color: green } /* all elements with class~=pastoral */</pre> 1.2036 + 1.2037 + <p>The following assigns style only to H1 elements with 1.2038 + <code>class~="pastoral"</code>:</p> 1.2039 + 1.2040 + <pre>H1.pastoral { color: green } /* H1 elements with class~=pastoral */</pre> 1.2041 + 1.2042 + <p>Given these rules, the first <code>H1</code> instance below would not 1.2043 + have green text, while the second would:</p> 1.2044 + 1.2045 + <pre> 1.2046 + <H1>Not green</H1> 1.2047 + <H1 class="pastoral">Very green</H1></pre> 1.2048 + 1.2049 + <p>The following rule matches any <code>P</code> element whose 1.2050 + <code>class</code> attribute has been assigned a list of <a 1.2051 + href="#whitespace">whitespace</a>-separated values that includes both 1.2052 + <code>pastoral</code> and <code>marine</code>:</p> 1.2053 + 1.2054 + <pre>p.pastoral.marine { color: green }</pre> 1.2055 + 1.2056 + <p>This rule matches when <code>class="pastoral blue aqua marine"</code> 1.2057 + but does not match for <code>class="pastoral blue"</code>.</p> 1.2058 + </div> 1.2059 + 1.2060 + <p class=note><strong>Note:</strong> Because CSS gives considerable power 1.2061 + to the "class" attribute, authors could conceivably design their own 1.2062 + "document language" based on elements with almost no associated 1.2063 + presentation (such as <code>DIV</code> and <code>SPAN</code> in HTML) and 1.2064 + assigning style information through the "class" attribute. Authors should 1.2065 + avoid this practice since the structural elements of a document language 1.2066 + often have recognized and accepted meanings and author-defined classes may 1.2067 + not. 1.2068 + 1.2069 + <p class=note><strong>Note:</strong> If an element has multiple class 1.2070 + attributes, their values must be concatenated with spaces between the 1.2071 + values before searching for the class. As of this time the working group 1.2072 + is not aware of any manner in which this situation can be reached, 1.2073 + however, so this behavior is explicitly non-normative in this 1.2074 + specification. 1.2075 + 1.2076 + <h3 id=id-selectors><span class=secno>6.7. </span> ID selectors</h3> 1.2077 + 1.2078 + <p>Document languages may contain attributes that are declared to be of 1.2079 + type ID. What makes attributes of type ID special is that no two such 1.2080 + attributes can have the same value in a conformant document, regardless of 1.2081 + the type of the elements that carry them; whatever the document language, 1.2082 + an ID typed attribute can be used to uniquely identify its element. In 1.2083 + HTML all ID attributes are named "id"; XML applications may name ID 1.2084 + attributes differently, but the same restriction applies. 1.2085 + 1.2086 + <p>An ID-typed attribute of a document language allows authors to assign an 1.2087 + identifier to one element instance in the document tree. An <dfn 1.2088 + id=id-selector>ID selector</dfn> contains a "number sign" 1.2089 + (U+0023, <code>#</code>) immediately followed by the ID value, which must 1.2090 + be an CSS <a 1.2091 + href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifiers</a>. 1.2092 + An ID selector represents an element instance that has an identifier that 1.2093 + matches the identifier in the ID selector. 1.2094 + 1.2095 + <p>Selectors does not specify how a UA knows the ID-typed attribute of an 1.2096 + element. The UA may, e.g., read a document's DTD, have the information 1.2097 + hard-coded or ask the user. 1.2098 + 1.2099 + <div class=example> 1.2100 + <p>Examples:</p> 1.2101 + 1.2102 + <p>The following ID selector represents an <code>h1</code> element whose 1.2103 + ID-typed attribute has the value "chapter1":</p> 1.2104 + 1.2105 + <pre>h1#chapter1</pre> 1.2106 + 1.2107 + <p>The following ID selector represents any element whose ID-typed 1.2108 + attribute has the value "chapter1":</p> 1.2109 + 1.2110 + <pre>#chapter1</pre> 1.2111 + 1.2112 + <p>The following selector represents any element whose ID-typed attribute 1.2113 + has the value "z98y".</p> 1.2114 + 1.2115 + <pre>*#z98y</pre> 1.2116 + </div> 1.2117 + 1.2118 + <p class=note><strong>Note:</strong> In XML 1.0 <a href="#XML10" 1.2119 + rel=biblioentry>[XML10]<!--{{XML10}}--></a>, the information about which 1.2120 + attribute contains an element's IDs is contained in a DTD or a schema. 1.2121 + When parsing XML, UAs do not always read the DTD, and thus may not know 1.2122 + what the ID of an element is (though a UA may have namespace-specific 1.2123 + knowledge that allows it to determine which attribute is the ID attribute 1.2124 + for that namespace). If a style sheet author knows or suspects that a UA 1.2125 + may not know what the ID of an element is, he should use normal attribute 1.2126 + selectors instead: <code>[name=p371]</code> instead of <code>#p371</code>. 1.2127 + 1.2128 + <p>If an element has multiple ID attributes, all of them must be treated as 1.2129 + IDs for that element for the purposes of the ID selector. Such a situation 1.2130 + could be reached using mixtures of xml:id, DOM3 Core, XML DTDs, and 1.2131 + namespace-specific knowledge. 1.2132 + 1.2133 + <h2 id=location><span class=secno>7. </span> Location Pseudo-classes</h2> 1.2134 + 1.2135 + <h3 id=the-any-link-pseudo><span class=secno>7.1. </span> The hyperlink 1.2136 + pseudo-class: <a href="#any-link-pseudo"><code>:any-link</code></a></h3> 1.2137 + 1.2138 + <p>The <dfn id=any-link-pseudo>:any-link</dfn> pseudo-class represents an 1.2139 + element that acts as the source anchor of a hyperlink. 1.2140 + 1.2141 + <p class=issue>Any better name suggestions for this pseudo? 1.2142 + 1.2143 + <p> 1.2144 + 1.2145 + <h3 id=the-link-pseudos><span class=secno>7.2. </span> The link history 1.2146 + pseudo-classes: <a href="#link-pseudo"><code>:link</code></a> and <a 1.2147 + href="#visited-pseudo"><code>:visited</code></a></h3> 1.2148 + 1.2149 + <p>User agents commonly display unvisited links differently from previously 1.2150 + visited ones. Selectors provides the pseudo-classes <dfn 1.2151 + id=link-pseudo>:link</dfn> and <dfn id=visited-pseudo>:visited</dfn> to 1.2152 + distinguish them: 1.2153 + 1.2154 + <ul> 1.2155 + <li>The <a href="#link-pseudo"><code>:link</code></a> pseudo-class applies 1.2156 + to links that have not yet been visited. 1.2157 + 1.2158 + <li>The <a href="#visited-pseudo"><code>:visited</code></a> pseudo-class 1.2159 + applies once the link has been visited by the user. 1.2160 + </ul> 1.2161 + 1.2162 + <p>After some amount of time, user agents may choose to return a visited 1.2163 + link to the (unvisited) ‘<a href="#link-pseudo"><code 1.2164 + class=css>:link</code></a>’ state. 1.2165 + 1.2166 + <p>The two states are mutually exclusive. 1.2167 + 1.2168 + <div class=example> 1.2169 + <p>Example:</p> 1.2170 + 1.2171 + <p>The following selector represents links carrying class 1.2172 + <code>footnote</code> and already visited:</p> 1.2173 + 1.2174 + <pre>.footnote:visited</pre> 1.2175 + </div> 1.2176 + 1.2177 + <p class=note><strong>Note:</strong> It is possible for style sheet authors 1.2178 + to abuse the :link and :visited pseudo-classes to determine which sites a 1.2179 + user has visited without the user's consent. 1.2180 + 1.2181 + <p>UAs may therefore treat all links as unvisited links, or implement other 1.2182 + measures to preserve the user's privacy while rendering visited and 1.2183 + unvisited links differently. 1.2184 + 1.2185 + <h3 id=the-local-pseudo><span class=secno>7.3. </span> The local link 1.2186 + pseudo-class <a href="#local-link-pseudo"><code>:local-link</code></a></h3> 1.2187 + 1.2188 + <p>The <dfn id=local-link-pseudo>:local-link</dfn> pseudo-class allows 1.2189 + authors to style links based on the users current location within a site 1.2190 + and to differentiate site-internal versus site-external links. The <a 1.2191 + href="#local-link-pseudo"><code>:local-link</code></a> pseudo-class 1.2192 + represents an element that is the source anchor of a hyperlink whose 1.2193 + target's absolute URI matches the element's own document URI. The fragment 1.2194 + identifier of the document URI is stripped before matching against the 1.2195 + link's URI; otherwise all portions of the URI are considered. 1.2196 + 1.2197 + <div class=example> 1.2198 + <p>For example, the following rule prevents links targetting the current 1.2199 + page from being underlined when they are part of the navigation list: 1.2200 + 1.2201 + <pre>nav :local-link { text-decoration: none; }</pre> 1.2202 + </div> 1.2203 + 1.2204 + <p>The pseudo-class can also accept a non-negative integer as its sole 1.2205 + argument, which, if the document's URI is a URL, indicates the number of 1.2206 + path levels to match: an argument of zero represents a link element whose 1.2207 + target is in the same domain as the document's URI, ‘<code 1.2208 + class=css>1</code>’ represents a link element whose target has the same 1.2209 + domain and first path segment, ‘<code class=css>2</code>’ represents a 1.2210 + link element whose target has the same domain, first, and second path 1.2211 + segments, etc. Path segments are portions of the URL's path that are 1.2212 + separated by forward slashes (/). If a segment is missing from the 1.2213 + document's URL, a pseudo-class requiring that segment to match does not 1.2214 + match anything. Similarly if the document's URI is not a URL, the 1.2215 + pseudo-class does not match anything. The scheme, username, password, 1.2216 + port, query string, and fragment portions of the URL are not considered 1.2217 + when matching against <code>:local-link(<var>n</var>)</code>. 1.2218 + 1.2219 + <p class=issue>Is there such a thing as IRL? Because we do want this to 1.2220 + work for internationalized URLs, just not URNs. 1.2221 + 1.2222 + <div class=example> 1.2223 + <p>So, given the links: 1.2224 + 1.2225 + <ol> 1.2226 + <li><code><a href="http://www.example.com">Home</a></code> 1.2227 + 1.2228 + <li><code><a href="http://www.example.com/2011">2011</a></code> 1.2229 + 1.2230 + <li><code><a 1.2231 + href="https://www.example.com/2011/03">March</a></code> 1.2232 + 1.2233 + <li><code><a 1.2234 + href="http://www.example.com/2011/03/">March</a></code> 1.2235 + 1.2236 + <li><code><a href="http://example.com/2011/03">March</a></code> 1.2237 + </ol> 1.2238 + 1.2239 + <p>and the styles: 1.2240 + 1.2241 + <ol> 1.2242 + <li><code>a:local-link {...}</code> 1.2243 + 1.2244 + <li><code>a:local-link(0) {...}</code> 1.2245 + 1.2246 + <li><code>a:local-link(1) {...}</code> 1.2247 + 1.2248 + <li><code>a:local-link(2) {...}</code> 1.2249 + 1.2250 + <li><code>a:local-link(3) {...}</code> 1.2251 + </ol> 1.2252 + 1.2253 + <p>If the document's URI is <code>http://www.example.com/2011/03/</code>: 1.2254 + 1.2255 + <ol> 1.2256 + <li>Link 1 would receive Style 2 1.2257 + 1.2258 + <li>Link 2 would receive Styles 2 and 3 1.2259 + 1.2260 + <li>Link 3 would receive Styles 2, 3, and 4 1.2261 + 1.2262 + <li>Link 4 would receive Style 1 1.2263 + 1.2264 + <li>Link 5 would remain unstyled, and Style 5 would not be applied to 1.2265 + anything. 1.2266 + </ol> 1.2267 + </div> 1.2268 + 1.2269 + <div class=example> 1.2270 + <p>The following example styles all site-external links with a dashed 1.2271 + underline. 1.2272 + 1.2273 + <pre>:not(:local-link(0)) { text-decoration-style: dashed; }</pre> 1.2274 + </div> 1.2275 + 1.2276 + <h3 id=the-target-pseudo><span class=secno>7.4. </span> The target 1.2277 + pseudo-class <a href="#target-pseudo"><code>:target</code></a></h3> 1.2278 + 1.2279 + <p>Some URIs refer to a location within a resource. This kind of URI ends 1.2280 + with a "number sign" (#) followed by an anchor identifier 1.2281 + (called the fragment identifier). 1.2282 + 1.2283 + <p>URIs with fragment identifiers link to a certain element within the 1.2284 + document, known as the target element. For instance, here is a URI 1.2285 + pointing to an anchor named <code>section_2</code> in an HTML document: 1.2286 + 1.2287 + <pre>http://example.com/html/top.html#section_2</pre> 1.2288 + 1.2289 + <p>A target element can be represented by the <dfn 1.2290 + id=target-pseudo>:target</dfn> pseudo-class. If the document's URI has no 1.2291 + fragment identifier, then the document has no target element. 1.2292 + 1.2293 + <div class=example> 1.2294 + <p>Example:</p> 1.2295 + 1.2296 + <pre>p.note:target</pre> 1.2297 + 1.2298 + <p>This selector represents a <code>p</code> element of class 1.2299 + <code>note</code> that is the target element of the referring URI.</p> 1.2300 + </div> 1.2301 + 1.2302 + <div class=example> 1.2303 + <p>CSS example:</p> 1.2304 + 1.2305 + <p>Here, the <a href="#target-pseudo"><code>:target</code></a> 1.2306 + pseudo-class is used to make the target element red and place an image 1.2307 + before it, if there is one:</p> 1.2308 + 1.2309 + <pre> 1.2310 + *:target { color : red } 1.2311 + *:target::before { content : url(target.png) }</pre> 1.2312 + </div> 1.2313 + 1.2314 + <h3 id=the-scope-pseudo><span class=secno>7.5. </span> The contextual 1.2315 + reference element pseudo-class <a 1.2316 + href="#scope-pseudo"><code>:scope</code></a></h3> 1.2317 + 1.2318 + <p> The <dfn id=scope-pseudo>:scope</dfn> pseudo-class represents any 1.2319 + element that is in the <dfn id=contextual-reference-element-set>contextual 1.2320 + reference element set</dfn>. This is is a (potentially empty) 1.2321 + explicitly-specified set of elements, such as that specified by the 1.2322 + <code>querySelector()</code> call in <a href="#SELECTORS-API2" 1.2323 + rel=biblioentry>[SELECTORS-API2]<!--{{SELECTORS-API2}}--></a>, or the 1.2324 + parent element of a <a 1.2325 + href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-style-element">scoped 1.2326 + <code><style></code> element</a> in <a href="#HTML5" 1.2327 + rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>, which is used to "scope" a 1.2328 + selector so that it only matches within a subtree. 1.2329 + 1.2330 + <p> If no contextual reference element set is given, <a 1.2331 + href="#scope-pseudo"><code>:scope</code></a> is equivalent to <a 1.2332 + href="#roo-pseudo"><code>:root</code></a>. Specifications intending for 1.2333 + this pseudo-class to match specific elements rather than the document's 1.2334 + root element must define a <a 1.2335 + href="#contextual-reference-element-set"><i>contextual reference element 1.2336 + set</i></a>. 1.2337 + 1.2338 + <h2 id=useraction-pseudos><span class=secno>8. </span> User Action 1.2339 + Pseudo-classes</h2> 1.2340 + 1.2341 + <p>Interactive user agents sometimes change the rendering in response to 1.2342 + user actions. Selectors provides three pseudo-classes for the selection of 1.2343 + an element the user is acting on. 1.2344 + 1.2345 + <p>These pseudo-classes are not mutually exclusive. An element may match 1.2346 + several pseudo-classes at the same time. 1.2347 + 1.2348 + <div class=example> 1.2349 + <p>Examples:</p> 1.2350 + 1.2351 + <pre>a:link /* unvisited links */ 1.2352 + a:visited /* visited links */ 1.2353 + a:hover /* user hovers */ 1.2354 + a:active /* active links */</pre> 1.2355 + 1.2356 + <p>An example of combining dynamic pseudo-classes:</p> 1.2357 + 1.2358 + <pre>a:focus 1.2359 + a:focus:hover</pre> 1.2360 + 1.2361 + <p>The last selector matches <code>a</code> elements that are in the 1.2362 + pseudo-class :focus and in the pseudo-class :hover.</p> 1.2363 + </div> 1.2364 + 1.2365 + <h3 id=the-hover-pseudo><span class=secno>8.1. </span> The pointer hover 1.2366 + pseudo-class <a href="#hover-pseudo"><code>:hover</code></a></h3> 1.2367 + 1.2368 + <p>The <dfn id=hover-pseudo>:hover</dfn> pseudo-class applies while the 1.2369 + user designates an element with a pointing device, but does not 1.2370 + necessarily activate it. For example, a visual user agent could apply this 1.2371 + pseudo-class when the cursor (mouse pointer) hovers over a box generated 1.2372 + by the element. User agents not that do not support <a 1.2373 + href="http://www.w3.org/TR/CSS21/media.html#interactive-media-group">interactive 1.2374 + media</a> do not have to support this pseudo-class. Some conforming user 1.2375 + agents that support <a 1.2376 + href="http://www.w3.org/TR/CSS21/media.html#interactive-media-group">interactive 1.2377 + media</a> may not be able to support this pseudo-class (e.g., a pen device 1.2378 + that does not detect hovering). 1.2379 + 1.2380 + <p>The parent of an element that is <a 1.2381 + href="#hover-pseudo"><code>:hover</code></a> is also in that state. 1.2382 + 1.2383 + <p class=note><strong>Note:</strong> Since the ‘<a 1.2384 + href="#hover-pseudo"><code class=css>:hover</code></a>’ state can apply 1.2385 + to an element because its child is designated by a pointing device, then 1.2386 + it is possible for ‘<a href="#hover-pseudo"><code 1.2387 + class=css>:hover</code></a>’ to apply to an element that is not 1.2388 + underneath the pointing device. 1.2389 + 1.2390 + <p>The <a href="#hover-pseudo"><code>:hover</code></a> pseudo-class can 1.2391 + apply to any pseudo-element. <!-- 1.2392 +<h3 id="the-hover-pseudo"> 1.2393 +The pointer hover pseudo-class <code>:drop-zone</code></h3> 1.2394 + 1.2395 + <p>The <code>:drop-zone</code> pseudo-class applies while the user 1.2396 + is ”dragging“ or otherwise conceptually carrying an item 1.2397 + for which the element is a valid drop target. 1.2398 + User agents not that do not support <a 1.2399 + href="http://www.w3.org/TR/CSS21/media.html#interactive-media-group">interactive 1.2400 + media</a> do not have to support this pseudo-class. Some conforming 1.2401 + user agents that support <a 1.2402 + href="http://www.w3.org/TR/CSS21/media.html#interactive-media-group">interactive 1.2403 + media</a> may not be able to support this pseudo-class (e.g., a 1.2404 + keyboard-only device that has no concept of dragging). 1.2405 + 1.2406 + <div class="example"> 1.2407 + <p>This pseudo-class could be used, for example, to highlight all the 1.2408 + valid drop targets for the item being dragged. 1.2409 + <pre>:drop-zone { box-shadow: 0 0 5px yellow; }</pre> 1.2410 + <p>It can also be combined with <code>:drag-over</code> to designate the 1.2411 + drop-zone that will receive the dragged item when dropped. 1.2412 + <pre>:drop-zone:drag-over { outline: solid red; }</pre> 1.2413 + </div> 1.2414 +--> 1.2415 + 1.2416 + 1.2417 + <h3 id=the-active-pseudo><span class=secno>8.2. </span> The activation 1.2418 + pseudo-class <a href="#active-pseudo"><code>:active</code></a></h3> 1.2419 + 1.2420 + <p>The <dfn id=active-pseudo>:active</dfn> pseudo-class applies while an 1.2421 + element is being activated by the user. For example, between the times the 1.2422 + user presses the mouse button and releases it. On systems with more than 1.2423 + one mouse button, <a href="#active-pseudo"><code>:active</code></a> 1.2424 + applies only to the primary or primary activation button (typically the 1.2425 + "left" mouse button), and any aliases thereof. 1.2426 + 1.2427 + <p>There may be document language or implementation specific limits on 1.2428 + which elements can become <a 1.2429 + href="#active-pseudo"><code>:active</code></a>. 1.2430 + 1.2431 + <p>Selectors doesn't define if the parent of an element that is ‘<a 1.2432 + href="#active-pseudo"><code class=css>:active</code></a>’ is also in 1.2433 + that state. 1.2434 + 1.2435 + <p class=note><strong>Note:</strong> An element can be both ‘<a 1.2436 + href="#visited-pseudo"><code class=css>:visited</code></a>’ and ‘<a 1.2437 + href="#active-pseudo"><code class=css>:active</code></a>’ (or ‘<a 1.2438 + href="#link-pseudo"><code class=css>:link</code></a>’ and ‘<a 1.2439 + href="#active-pseudo"><code class=css>:active</code></a>’). 1.2440 + 1.2441 + <h3 id=the-focus-pseudo><span class=secno>8.3. </span> The input focus 1.2442 + pseudo-class <a href="#focus-pseudo"><code>:focus</code></a></h3> 1.2443 + 1.2444 + <p>The <dfn id=focus-pseudo>:focus</dfn> pseudo-class applies while an 1.2445 + element has the focus (accepts keyboard or mouse events, or other forms of 1.2446 + input). 1.2447 + 1.2448 + <p>There may be document language or implementation specific limits on 1.2449 + which elements can acquire <a 1.2450 + href="#focus-pseudo"><code>:focus</code></a>. 1.2451 + 1.2452 + <h3 id=drag-pseudos><span class=secno>8.4. </span> The drag-and-drop 1.2453 + pseudo-class ‘<code class=css>:valid-drop-target</code>’</h3> 1.2454 + 1.2455 + <p>The <code id=valid-drop-target>:valid-drop-target</code> pseudo-class 1.2456 + represents an element that is the current drop target for an item that is 1.2457 + currently being dragged in a drag-and-drop interface. 1.2458 + 1.2459 + <div class=example> 1.2460 + <p> For example, <a href="#HTML5" 1.2461 + rel=biblioentry>[HTML5]<!--{{HTML5}}--></a> defines the <a 1.2462 + href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#the-dropzone-attribute"><code>dropzone</code></a> 1.2463 + attribute, which allows an author to declare an element as a "drop 1.2464 + target", and declare what kinds of data the element is willing to accept 1.2465 + from drag-and-drop. 1.2466 + </div> 1.2467 + 1.2468 + <div class=issue> 1.2469 + <p><a 1.2470 + href="http://lists.w3.org/Archives/Public/www-style/2011Sep/0497.html">Sylvain 1.2471 + points out</a> that this name doesn't convey that anything is being 1.2472 + dragged over the drop target, only that the element is a possible drop 1.2473 + target. Previous suggestions include ‘<code 1.2474 + class=css>:drag-over</code>’, ‘<code 1.2475 + class=css>:active-drop-target</code>’ 1.2476 + 1.2477 + <p>One possibility might be to separate invalid/valid queries from 1.2478 + activeness, e.g. 1.2479 + 1.2480 + <table class=data> 1.2481 + <tbody> 1.2482 + <tr> 1.2483 + <th>:active-drop-target 1.2484 + 1.2485 + <td>Current drop target if dragged item is dropped now (this proposal) 1.2486 + 1.2487 + <tr> 1.2488 + <th>:valid-drop-target 1.2489 + 1.2490 + <td>Possible target, valid for this item 1.2491 + 1.2492 + <tr> 1.2493 + <th>:invalid-drop-target 1.2494 + 1.2495 + <td>Possible target, but invalid for this item 1.2496 + </table> 1.2497 + 1.2498 + <p>This allows highlighting all possible targets when an item is picked 1.2499 + up; it can also allow different stylings of the active target by 1.2500 + combination. (L4 can include just the first one.) 1.2501 + </div> 1.2502 + 1.2503 + <h2 id=time-pseudos><span class=secno>9. </span> Time-dimensional 1.2504 + Pseudo-classes</h2> 1.2505 + 1.2506 + <p>These pseudo-classes classify elements with respect to the 1.2507 + currently-displayed or active position in some timeline, such as during 1.2508 + speech rendering of a document, or during the display of a video using 1.2509 + WebVTT to render subtitles. 1.2510 + 1.2511 + <h3 id=the-current-pseudo><span class=secno>9.1. </span> The 1.2512 + current-element pseudo-class <a 1.2513 + href="#current-pseudo"><code>:current</code></a></h3> 1.2514 + 1.2515 + <p>The <dfn id=current-pseudo>:current</dfn> pseudo-class represents the 1.2516 + innermost element, or ancestor of an element, that is currently being 1.2517 + displayed. 1.2518 + 1.2519 + <p>Its alternate form <a 1.2520 + href="#current-pseudo"><code>:current()</code></a>, like <a 1.2521 + href="#matches-pseudo"><code>:matches()</code></a>, takes a list of <a 1.2522 + href="#compound"><i>compound selectors</i></a> as its argument: it 1.2523 + represents the <a href="#current-pseudo"><code>:current</code></a> element 1.2524 + that matches the argument or, if that does not match, the innermost 1.2525 + ancestor of the <a href="#current-pseudo"><code>:current</code></a> 1.2526 + element that does. (If neither the <a 1.2527 + href="#current-pseudo"><code>:current</code></a> element nor its ancestors 1.2528 + match the argument, then the selector does not represent anything.) 1.2529 + 1.2530 + <div class=example> 1.2531 + <p>For example, the following rule will highlight whichever paragraph or 1.2532 + list item is being read aloud in a speech rendering of the document: 1.2533 + 1.2534 + <pre> 1.2535 +<!-- -->:current(p, li, dt, dd) { 1.2536 +<!-- --> background: yellow; 1.2537 +<!-- -->}</pre> 1.2538 + </div> 1.2539 + 1.2540 + <h3 id=the-past-pseudo><span class=secno>9.2. </span> The past-element 1.2541 + pseudo-class <code>:past</code></h3> 1.2542 + 1.2543 + <p>The <code>:past</code> pseudo-class represents any element that is 1.2544 + defined to occur entirely prior to a <a 1.2545 + href="#current-pseudo"><code>:current</code></a> element. If a time-based 1.2546 + order of elements is not defined by the document language, then this 1.2547 + represents any element that is a (possibly indirect) previous sibling of a 1.2548 + <a href="#current-pseudo"><code>:current</code></a> element. 1.2549 + 1.2550 + <h3 id=the-future-pseudo><span class=secno>9.3. </span> The future-element 1.2551 + pseudo-class <a href="#future-pseudo"><code>:future</code></a></h3> 1.2552 + 1.2553 + <p>The <dfn id=future-pseudo>:future</dfn> pseudo-class represents any 1.2554 + element that is defined to occur entirely after a <a 1.2555 + href="#current-pseudo"><code>:current</code></a> element. If a time-based 1.2556 + order of elements is not defined by the document language, then this 1.2557 + represents any element that is a (possibly indirect) next sibling of a <a 1.2558 + href="#current-pseudo"><code>:current</code></a> element. 1.2559 + 1.2560 + <h2 id=linguistic-pseudos><span class=secno>10. </span> Linguistic 1.2561 + Pseudo-classes</h2> 1.2562 + 1.2563 + <h3 id=the-dir-pseudo><span class=secno>10.1. </span> The directionality 1.2564 + pseudo-class <a href="#dir-pseudo"><code>:dir()</code></a></h3> 1.2565 + 1.2566 + <p>The <dfn id=dir-pseudo>:dir()</dfn> pseudo-class allows the author to 1.2567 + write selectors that represent an element based on its directionality as 1.2568 + determined by the document language. For example, in HTML <a 1.2569 + href="#HTML401" rel=biblioentry>[HTML401]<!--{{HTML401}}--></a>, the 1.2570 + directionality of an element is determined by the <a 1.2571 + href="#dir-pseudo"><code>dir</code></a> attribute. The <a 1.2572 + href="#dir-pseudo"><code>:dir()</code></a> pseudo-class does not select 1.2573 + based on stylistic states—for example, the CSS ‘<code 1.2574 + class=property>direction</code>’ property does not affect whether it 1.2575 + matches. 1.2576 + 1.2577 + <p>The pseudo-class <code>:dir(ltr)</code> represents an element that has a 1.2578 + directionality of left-to-right (<code>ltr</code>). The pseudo-class 1.2579 + <code>:dir(rtl)</code> represents an element that has a directionality of 1.2580 + right-to-left (<code>rtl</code>). The argument to <a 1.2581 + href="#dir-pseudo"><code>:dir()</code></a> must be a single identifier, 1.2582 + otherwise the selector is invalid. White space is optionally allowed 1.2583 + between the identifier and the parentheses. Values other than 1.2584 + <code>ltr</code> and <code>rtl</code> are not invalid, but do not match 1.2585 + anything. (If a future markup spec defines other directionalities, then 1.2586 + Selectors may be extended to allow corresponding values.) 1.2587 + 1.2588 + <p>The difference between <code>:dir(C)</code> and <code>[dir=C]</code> is 1.2589 + that <code>[dir=C]</code> only performs a comparison against a given 1.2590 + attribute on the element, while the <code>:dir(C)</code> pseudo-class uses 1.2591 + the UAs knowledge of the document's semantics to perform the comparison. 1.2592 + For example, in HTML, the directionality of an element inherits so that a 1.2593 + child without a <a href="#dir-pseudo"><code>dir</code></a> attribute will 1.2594 + have the same directionality as its closest ancestor with a valid <a 1.2595 + href="#dir-pseudo"><code>dir</code></a> attribute. As another example, <a 1.2596 + href="http://www.w3.org/TR/html5/elements.html#the-directionality">in 1.2597 + HTML5</a>, an element that matches <code>[dir=auto]</code> will match 1.2598 + either <code>:dir(ltr)</code> or <code>:dir(rtl)</code> depending on the 1.2599 + resolved directionality of the elements as determined by its contents. <a 1.2600 + href="#HTML5" rel=biblioentry>[HTML5]<!--{{HTML5}}--></a> 1.2601 + 1.2602 + <h3 id=the-lang-pseudo><span class=secno>10.2. </span> The language 1.2603 + pseudo-class <a href="#lang-pseudo"><code>:lang()</code></a></h3> 1.2604 + 1.2605 + <p>If the document language specifies how the human language of an element 1.2606 + is determined, it is possible to write selectors that represent an element 1.2607 + based on its language. The <dfn id=lang-pseudo>:lang()</dfn> pseudo-class 1.2608 + represents an element that is in one of the languages listed in its 1.2609 + argument. It accepts a comma-separated list of one or more <i>language 1.2610 + ranges</i> as its argument. Each <dfn id=language-identifier>language 1.2611 + identifier</dfn> in <a href="#lang-pseudo"><code>:lang()</code></a> must 1.2612 + be a valid CSS <a 1.2613 + href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifier</a> 1.2614 + <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> or consist 1.2615 + of an asterisk (* U+002A) immediately followed by an identifier beginning 1.2616 + with an ASCII hyphen (U+002D) for the selector to be valid. 1.2617 + 1.2618 + <p>The <dfn id=language>language</dfn> of an element is defined by the 1.2619 + document language. For example, in HTML <a href="#HTML401" 1.2620 + rel=biblioentry>[HTML401]<!--{{HTML401}}--></a>, the <a 1.2621 + href="#language"><i>language</i></a> is determined by a combination of the 1.2622 + <a href="#lang-pseudo"><code>lang</code></a> attribute, information from 1.2623 + <code>meta</code> elements, and possibly also the protocol (e.g. from HTTP 1.2624 + headers). XML languages can use the <code>xml:lang</code> attribute to 1.2625 + indicate language information for an element. 1.2626 + 1.2627 + <p>The element's <i>language matches</i> a <i>language range</i> if the 1.2628 + element's <a href="#language"><i>language</i></a> (normalized to BCP 47 1.2629 + syntax if necessary) matches the given <i>language range</i> in an 1.2630 + <i>extended filtering</i> operation per <a href="#RFC4647" 1.2631 + rel=biblioentry>[RFC4647]<!--{{RFC4647}}--></a> <cite>Matching of Language 1.2632 + Tags</cite> (section 3.3.2). The matching is performed case-insensitively 1.2633 + within the ASCII range. The language identifier does not need to be a 1.2634 + valid language code to perform this comparison. 1.2635 + 1.2636 + <p class=note><strong>Note:</strong> It is recommended that documents and 1.2637 + protocols indicate language using codes from BCP 47 <a href="#BCP47" 1.2638 + rel=biblioentry>[BCP47]<!--{{BCP47}}--></a> or its successor, and by means 1.2639 + of <code>xml:lang</code> attributes in the case of XML-based documents <a 1.2640 + href="#XML10" rel=biblioentry>[XML10]<!--{{XML10}}--></a>. See <a 1.2641 + href="http://www.w3.org/International/questions/qa-lang-2or3.html"> "FAQ: 1.2642 + Two-letter or three-letter language codes."</a> 1.2643 + 1.2644 + <div class=example> 1.2645 + <p>Examples:</p> 1.2646 + 1.2647 + <p>The two following selectors represent an HTML document that is in 1.2648 + Belgian French or German. The two next selectors represent <code>q</code> 1.2649 + quotations in an arbitrary element in Belgian French or German.</p> 1.2650 + 1.2651 + <pre>html:lang(fr-be) 1.2652 + html:lang(de) 1.2653 + :lang(fr-be) > q 1.2654 + :lang(de) > q</pre> 1.2655 + </div> 1.2656 + 1.2657 + <p class=note>One difference between <code>:lang(C)</code> and the ‘<code 1.2658 + class=css>|=</code>’ operator is that the ‘<code 1.2659 + class=css>|=</code>’ operator only performs a comparison against a given 1.2660 + attribute on the element, while the <code>:lang(C)</code> pseudo-class 1.2661 + uses the UAs knowledge of the document's semantics to perform the 1.2662 + comparison. 1.2663 + 1.2664 + <div class=example> 1.2665 + <p>In this HTML example, only the BODY matches <code>[lang|=fr]</code> 1.2666 + (because it has a LANG attribute) but both the BODY and the P match 1.2667 + <code>:lang(fr)</code> (because both are in French). The P does not match 1.2668 + the <code>[lang|=fr]</code> because it does not have a LANG attribute.</p> 1.2669 + 1.2670 + <pre> 1.2671 + <body lang=fr> 1.2672 + <p>Je suis français.</p> 1.2673 + </body></pre> 1.2674 + </div> 1.2675 + 1.2676 + <div class=example> 1.2677 + <p>Another difference between <code>:lang(C)</code> and the ‘<code 1.2678 + class=css>|=</code>’ operator is that <code>:lang(C)</code> performs 1.2679 + implicit wildcard matching. For example, <code>:lang(de-DE)</code> will 1.2680 + match all of ‘<code class=css>de-DE</code>’, ‘<code 1.2681 + class=css>de-DE-1996</code>’, ‘<code class=css>de-Latn-DE</code>’, 1.2682 + ‘<code class=css>de-Latf-DE</code>’, ‘<code 1.2683 + class=css>de-Latn-DE-1996</code>’, whereas of those 1.2684 + <code>[lang|=de-DE]</code> will only match ‘<code 1.2685 + class=css>de-DE</code>’ and ‘<code class=css>de-DE-1996</code>’. 1.2686 + 1.2687 + <p>To perform wildcard matching on the first subtag (the primary 1.2688 + language), an asterisk must be used: <code>*-CH</code> will match all of 1.2689 + ‘<code class=css>de-CH</code>’, ‘<code class=css>it-CH</code>’, 1.2690 + ‘<code class=css>fr-CH</code>’, and ‘<code 1.2691 + class=css>rm-CH</code>’. 1.2692 + 1.2693 + <p>Note that asterisks are not allowed anywhere else in <a 1.2694 + href="#lang-pseudo"><code>:lang()</code></a>‘<code class=css>s language 1.2695 + range syntax: they only have meaning, and are therefore only allowed, at 1.2696 + the beginning. </code> 1.2697 + </div> 1.2698 + 1.2699 + <p class=note>Wildcard language matching is new in Level 4. 1.2700 + 1.2701 + <h2 id=ui-states-pseudos><span class=secno>11. </span> The UI states 1.2702 + pseudo-classes</h2> 1.2703 + 1.2704 + <h3 id=enableddisabled><span class=secno>11.1. </span> The <a 1.2705 + href="#enabled-pseudo"><code>:enabled</code></a> and <a 1.2706 + href="#disabled-pseudo"><code>:disabled</code></a> pseudo-classes</h3> 1.2707 + 1.2708 + <p>The <dfn id=enabled-pseudo>:enabled</dfn> pseudo-class represents user 1.2709 + interface elements that are in an enabled state; such elements have a 1.2710 + corresponding disabled state. 1.2711 + 1.2712 + <p>Conversely, the <dfn id=disabled-pseudo>:disabled</dfn> pseudo-class 1.2713 + represents user interface elements that are in a disabled state; such 1.2714 + elements have a corresponding enabled state. 1.2715 + 1.2716 + <p>What constitutes an enabled state, a disabled state, and a user 1.2717 + interface element is host-language-dependent. In a typical document most 1.2718 + elements will be neither <a 1.2719 + href="#enabled-pseudo"><code>:enabled</code></a> nor <a 1.2720 + href="#disabled-pseudo"><code>:disabled</code></a>. 1.2721 + 1.2722 + <p class=note><strong>Note:</strong> CSS properties that might affect a 1.2723 + user’s ability to interact with a given user interface element do not 1.2724 + affect whether it matches <a 1.2725 + href="#enabled-pseudo"><code>:enabled</code></a> or <a 1.2726 + href="#disabled-pseudo"><code>:disabled</code></a>; e.g., the 1.2727 + <code>display</code> and <code>visibility</code> properties have no effect 1.2728 + on the enabled/disabled state of an element. 1.2729 + 1.2730 + <h3 id=the-checked-pseudo><span class=secno>11.2. </span> The 1.2731 + selected-option pseudo-class <a 1.2732 + href="#checked-pseudo"><code>:checked</code></a></h3> 1.2733 + 1.2734 + <p>Radio and checkbox elements can be toggled by the user. Some menu items 1.2735 + are "checked" when the user selects them. When such elements are toggled 1.2736 + "on" the <dfn id=checked-pseudo>:checked</dfn> pseudo-class applies. While 1.2737 + the <a href="#checked-pseudo"><code>:checked</code></a> pseudo-class is 1.2738 + dynamic in nature, and can altered by user action, since it can also be 1.2739 + based on the presence of semantic attributes in the document, it applies 1.2740 + to all media. For example, the <a 1.2741 + href="#checked-pseudo"><code>:checked</code></a> pseudo-class initially 1.2742 + applies to such elements that have the HTML4 <code>selected</code> and <a 1.2743 + href="#checked-pseudo"><code>checked</code></a> attributes as described in 1.2744 + <a 1.2745 + href="http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.2.1">Section 1.2746 + 17.2.1 of HTML4</a>, but of course the user can toggle "off" such elements 1.2747 + in which case the <a href="#checked-pseudo"><code>:checked</code></a> 1.2748 + pseudo-class would no longer apply. 1.2749 + 1.2750 + <div class=example> 1.2751 + <p>An unchecked checkbox can be selected by using the negation 1.2752 + pseudo-class: 1.2753 + 1.2754 + <pre>:not(:checked)</pre> 1.2755 + </div> 1.2756 + 1.2757 + <h3 id=the-indeterminate-pseudo><span class=secno>11.3. </span> The 1.2758 + indeterminate-value pseudo-class <a 1.2759 + href="#indetermine-pseudo"><code>:indeterminate</code></a></h3> 1.2760 + 1.2761 + <p>The <dfn id=indetermine-pseudo>:indeterminate</dfn> pseudo-class applies 1.2762 + to UI elements whose value is in an indeterminate state. For example, 1.2763 + radio and checkbox elements can be toggled between checked and unchecked 1.2764 + states, but are sometimes in an indeterminate state, neither checked nor 1.2765 + unchecked. Similarly a progress meter can be in an indeterminate state 1.2766 + when the percent completion is unknown. 1.2767 + 1.2768 + <p>Like the <a href="#checked-pseudo"><code>:checked</code></a> 1.2769 + pseudo-class, <a 1.2770 + href="#indetermine-pseudo"><code>:indeterminate</code></a> applies to all 1.2771 + media. Components of a radio-group initialized with no pre-selected 1.2772 + choice, for example, would be <a 1.2773 + href="#indetermine-pseudo"><code>:indeterminate</code></a> even in a 1.2774 + static display. 1.2775 + 1.2776 + <h3 id=the-default-pseudo><span class=secno>11.4. </span> The default 1.2777 + option pseudo-class <a href="#default-pseudo"><code>:default</code></a></h3> 1.2778 + 1.2779 + <p>The <dfn id=default-pseudo>:default</dfn> pseudo-class applies to the 1.2780 + one or more UI elements that are the default among a set of similar 1.2781 + elements. Typically applies to context menu items, buttons and select 1.2782 + lists/menus. 1.2783 + 1.2784 + <p>One example is the default submit button among a set of buttons. Another 1.2785 + example is the default option from a popup menu. Multiple elements in a 1.2786 + select-many group could have multiple <a 1.2787 + href="#default-pseudo"><code>:default</code></a> elements, like a 1.2788 + selection of pizza toppings for example. 1.2789 + 1.2790 + <h3 id=validity-pseudos><span class=secno>11.5. </span> The validity 1.2791 + pseudo-classes: <a href="#valid-pseudo"><code>:valid</code></a>, <a 1.2792 + href="#invalid-pseudo"><code>:invalid</code></a>, and <a 1.2793 + href="#user-error-pseudo"><code>:user-error</code></a></h3> 1.2794 + 1.2795 + <p> An element is <dfn id=valid-pseudo>:valid</dfn> or <dfn 1.2796 + id=invalid-pseudo>:invalid</dfn> when its contents or value is, 1.2797 + respectively, valid or invalid with respect to data validity semantics 1.2798 + defined by the document language (e.g. [[XFORMS10]] or <a href="#HTML5" 1.2799 + rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>). 1.2800 + 1.2801 + <p> Note that there is a difference between an element which has no 1.2802 + constraints, and thus would always be <a 1.2803 + href="#valid-pseudo"><code>:valid</code></a>, and one which has no data 1.2804 + validity semantics at all, and thus is neither <a 1.2805 + href="#valid-pseudo"><code>:valid</code></a> nor <a 1.2806 + href="#invalid-pseudo"><code>:invalid</code></a>. In HTML, for example, an 1.2807 + <code><input type="text"></code> element may have no constraints, but a 1.2808 + <code><p></code> element has no validity semantics at all, and so it 1.2809 + never matches either of these pseudoclasses. 1.2810 + 1.2811 + <p> The <dfn id=user-error-pseudo>:user-error</dfn> pseudo-class matches 1.2812 + the same elements as <a href="#invalid-pseudo"><code>:invalid</code></a>, 1.2813 + but it only does so after the user has interacted with them. The <a 1.2814 + href="#user-error-pseudo"><code>:user-error</code></a> pseudo-class must 1.2815 + match elements that are invalid after the user attempts to submit the form 1.2816 + containing them. User-agents may allow it to match invalid elements 1.2817 + earlier, if they determine (in a UA-specific manner) that the user has 1.2818 + "significantly interacted" with them. 1.2819 + 1.2820 + <div class=example> 1.2821 + <p> For example, the input in the following document fragment would match 1.2822 + <a href="#invalid-pseudo"><code>:invalid</code></a> as soon as the page 1.2823 + is loaded (because it’s empty, which violates the "required" 1.2824 + constraint), but it won't match <a 1.2825 + href="#user-error-pseudo"><code>:user-error</code></a> until the user 1.2826 + significantly interacts with the element, or attempts to submit the form 1.2827 + it's part of. 1.2828 + 1.2829 + <pre><!-- 1.2830 + --><form> 1.2831 +<!-- 1.2832 + --> <label> 1.2833 +<!-- 1.2834 + --> First Name: 1.2835 +<!-- 1.2836 + --> <input name='first-name' required value=''> 1.2837 +<!-- 1.2838 + --> </label> 1.2839 +<!-- 1.2840 + --> ... 1.2841 +<!-- 1.2842 + --></form></pre> 1.2843 + </pre> 1.2844 + </div> 1.2845 + 1.2846 + <p class=issue> What parts of <a 1.2847 + href="https://developer.mozilla.org/en-US/docs/CSS/:-moz-ui-invalid">:-moz-ui-invalid 1.2848 + description</a> do we want to spec here? Or put as examples? 1.2849 + 1.2850 + <h3 id=range-pseudos><span class=secno>11.6. </span> The range 1.2851 + pseudo-classes <a href="#in-range-psuedo"><code>:in-range</code></a> and 1.2852 + <a href="#out-of-range-pseudo"><code>:out-of-range</code></a></h3> 1.2853 + 1.2854 + <p>The <dfn id=in-range-psuedo>:in-range</dfn> and <dfn 1.2855 + id=out-of-range-pseudo>:out-of-range</dfn> pseudo-classes apply only to 1.2856 + elements that have range limitations. An element is <a 1.2857 + href="#in-range-psuedo"><code>:in-range</code></a> or <a 1.2858 + href="#out-of-range-pseudo"><code>:out-of-range</code></a> when the value 1.2859 + that the element is bound to is in range or out of range with respect to 1.2860 + its range limits as defined by the document language. An element that 1.2861 + lacks data range limits or is not a form control is neither <a 1.2862 + href="#in-range-psuedo"><code>:in-range</code></a> nor <a 1.2863 + href="#out-of-range-pseudo"><code>:out-of-range</code></a>. E.g. a slider 1.2864 + element with a value of 11 presented as a slider control that only 1.2865 + represents the values from 1-10 is :out-of-range. Another example is a 1.2866 + menu element with a value of "E" that happens to be presented in a popup 1.2867 + menu that only has choices "A", "B" and "C". 1.2868 + 1.2869 + <h3 id=opt-pseudos><span class=secno>11.7. </span> The optionality 1.2870 + pseudo-classes <a href="#required-pseudo"><code>:required</code></a> and 1.2871 + <a href="#optional-pseudo"><code>:optional</code></a></h3> 1.2872 + 1.2873 + <p>A form element is <dfn id=required-pseudo>:required</dfn> or <dfn 1.2874 + id=optional-pseudo>:optional</dfn> if a value for it is, respectively, 1.2875 + required or optional before the form it belongs to can be validly 1.2876 + submitted. Elements that are not form elements are neither required nor 1.2877 + optional. 1.2878 + 1.2879 + <h3 id=rw-pseudos><span class=secno>11.8. </span> The mutability 1.2880 + pseudo-classes <a href="#read-only-pseudo"><code>:read-only</code></a> and 1.2881 + <a href="#read-write-pseudo"><code>:read-write</code></a></h3> 1.2882 + 1.2883 + <p>An element whose contents are not user-alterable is <dfn 1.2884 + id=read-only-pseudo>:read-only</dfn>. However, elements whose contents are 1.2885 + user-alterable (such as text input fields) are considered to be in a 1.2886 + :read-write state. In typical documents, most elements are <a 1.2887 + href="#read-only-pseudo"><code>:read-only</code></a>. However it may be 1.2888 + possible, depending on the document language, for any element to become 1.2889 + <dfn id=read-write-pseudo>:read-write</dfn>. For example, in HTML5 any 1.2890 + element with the <code>contenteditable</code> attribute set to the true 1.2891 + state is considered user-alterable. <a href="#HTML5" 1.2892 + rel=biblioentry>[HTML5]<!--{{HTML5}}--></a> 1.2893 + 1.2894 + <h2 id=structural-pseudos><span class=secno>12. </span> Tree-Structural 1.2895 + pseudo-classes</h2> 1.2896 + 1.2897 + <p>Selectors introduces the concept of <dfn 1.2898 + id=structural-pseudo-classes>structural pseudo-classes</dfn> to permit 1.2899 + selection based on extra information that lies in the document tree but 1.2900 + cannot be represented by other simple selectors or combinators. 1.2901 + 1.2902 + <p>Standalone text and other non-element nodes are not counted when 1.2903 + calculating the position of an element in the list of children of its 1.2904 + parent. When calculating the position of an element in the list of 1.2905 + children of its parent, the index numbering starts at 1. 1.2906 + 1.2907 + <h3 id=the-root-pseudo><span class=secno>12.1. </span> <a 1.2908 + href="#roo-pseudo"><code>:root</code></a> pseudo-class</h3> 1.2909 + 1.2910 + <p>The <dfn id=roo-pseudo>:root</dfn> pseudo-class represents an element 1.2911 + that is the root of the document. In HTML 4, this is always the 1.2912 + <code>HTML</code> element. 1.2913 + 1.2914 + <h3 id=the-nth-child-pseudo><span class=secno>12.2. </span> <a 1.2915 + href="#nth-child-pseudo"><code>:nth-child()</code></a> pseudo-class</h3> 1.2916 + 1.2917 + <p>The <dfn id=nth-child-pseudo 1.2918 + title=":nth-child()">:nth-child(<var>a</var><code>n</code>+<var>b</var>)</dfn> 1.2919 + pseudo-class notation represents an element that has 1.2920 + <var>a</var><code>n</code>+<var>b</var>-1 siblings <strong>before</strong> 1.2921 + it in the document tree, for any positive integer or zero value of 1.2922 + <code>n</code>, and has a parent element. For values of <var>a</var> and 1.2923 + <var>b</var> greater than zero, this effectively divides the element's 1.2924 + children into groups of <var>a</var> elements (the last group taking the 1.2925 + remainder), and selecting the <var>b</var>th element of each group. For 1.2926 + example, this allows the selectors to address every other row in a table, 1.2927 + and could be used to alternate the color of paragraph text in a cycle of 1.2928 + four. The <var>a</var> and <var>b</var> values must be integers (positive, 1.2929 + negative, or zero). The index of the first child of an element is 1. 1.2930 + 1.2931 + <p>In addition to this, <a 1.2932 + href="#nth-child-pseudo"><code>:nth-child()</code></a> can take ‘<code 1.2933 + class=css><code>odd</code></code>’ and ‘<code 1.2934 + class=css><code>even</code></code>’ as arguments instead. ‘<code 1.2935 + class=css><code>odd</code></code>’ has the same signification as 1.2936 + <code>2n+1</code>, and ‘<code class=css><code>even</code></code>’ has 1.2937 + the same signification as <code>2n</code>. 1.2938 + 1.2939 + <p>The argument to <a 1.2940 + href="#nth-child-pseudo"><code>:nth-child()</code></a> must match the 1.2941 + grammar below, where <code>INTEGER</code> matches the token 1.2942 + <code>[0-9]+</code> and the rest of the tokenization is given by the <a 1.2943 + href="#lex">Lexical scanner</a> in section 10.2: 1.2944 + 1.2945 + <pre>nth 1.2946 + : S* [ ['-'|'+']? INTEGER? {N} [ S* ['-'|'+'] S* INTEGER ]? | 1.2947 + ['-'|'+']? INTEGER | {O}{D}{D} | {E}{V}{E}{N} ] S* 1.2948 + ;</pre> 1.2949 + 1.2950 + <div class=example> 1.2951 + <p>Examples:</p> 1.2952 + 1.2953 + <pre>tr:nth-child(2n+1) /* represents every odd row of an HTML table */ 1.2954 + tr:nth-child(odd) /* same */ 1.2955 + tr:nth-child(2n+0) /* represents every even row of an HTML table */ 1.2956 + tr:nth-child(even) /* same */ 1.2957 + 1.2958 + /* Alternate paragraph colours in CSS */ 1.2959 + p:nth-child(4n+1) { color: navy; } 1.2960 + p:nth-child(4n+2) { color: green; } 1.2961 + p:nth-child(4n+3) { color: maroon; } 1.2962 + p:nth-child(4n+4) { color: purple; }</pre> 1.2963 + </div> 1.2964 + 1.2965 + <p>When the value <var>b</var> is preceded by a negative sign, the "+" 1.2966 + character in the expression must be removed (it is effectively replaced by 1.2967 + the "-" character indicating the negative value of <var>b</var>). 1.2968 + 1.2969 + <div class=example> 1.2970 + <p>Examples:</p> 1.2971 + 1.2972 + <pre> 1.2973 + :nth-child(10n-1) /* represents the 9th, 19th, 29th, etc, element */ 1.2974 + :nth-child(10n+9) /* Same */ 1.2975 + :nth-child(10n+-1) /* Syntactically invalid, and would be ignored */</pre> 1.2976 + </div> 1.2977 + 1.2978 + <p>When <var>a</var>=0, the <var>a</var><code>n</code> part need not be 1.2979 + included (unless the <var>b</var> part is already omitted). When 1.2980 + <var>a</var><code>n</code> is not included and <var>b</var> is 1.2981 + non-negative, the <code>+</code> sign before <var>b</var> (when allowed) 1.2982 + may also be omitted. In this case the syntax simplifies to 1.2983 + <code>:nth-child(<var>b</var>)</code>. 1.2984 + 1.2985 + <div class=example> 1.2986 + <p>Examples:</p> 1.2987 + 1.2988 + <pre>foo:nth-child(0n+5) /* represents an element foo that is the 5th child 1.2989 + of its parent element */ 1.2990 + foo:nth-child(5) /* same */</pre> 1.2991 + </div> 1.2992 + 1.2993 + <p>When <var>a</var>=1, or <var>a</var>=-1, the <code>1</code> may be 1.2994 + omitted from the rule. 1.2995 + 1.2996 + <div class=example> 1.2997 + <p>Examples:</p> 1.2998 + 1.2999 + <p>The following selectors are therefore equivalent:</p> 1.3000 + 1.3001 + <pre>bar:nth-child(1n+0) /* represents all bar elements, specificity (0,1,1) */ 1.3002 + bar:nth-child(n+0) /* same */ 1.3003 + bar:nth-child(n) /* same */ 1.3004 + bar /* same but lower specificity (0,0,1) */</pre> 1.3005 + </div> 1.3006 + 1.3007 + <p>If <var>b</var>=0, then every <var>a</var>th element is picked. In such 1.3008 + a case, the +<var>b</var> (or -<var>b</var>) part may be omitted unless 1.3009 + the <var>a</var> part is already omitted. 1.3010 + 1.3011 + <div class=example> 1.3012 + <p>Examples:</p> 1.3013 + 1.3014 + <pre>tr:nth-child(2n+0) /* represents every even row of an HTML table */ 1.3015 + tr:nth-child(2n) /* same */</pre> 1.3016 + </div> 1.3017 + 1.3018 + <p>Whitespace is permitted after the "(", before the ")", and on either 1.3019 + side of the "+" or "-" that separates the <var>a</var><code>n</code> and 1.3020 + <var>b</var> parts when both are present. 1.3021 + 1.3022 + <div class=example> 1.3023 + <p>Valid Examples with white space:</p> 1.3024 + 1.3025 + <pre> 1.3026 + :nth-child( 3n + 1 ) 1.3027 + :nth-child( +3n - 2 ) 1.3028 + :nth-child( -n+ 6) 1.3029 + :nth-child( +6 ) 1.3030 + </pre> 1.3031 + 1.3032 + <p>Invalid Examples with white space:</p> 1.3033 + 1.3034 + <pre> 1.3035 + :nth-child(3 n) 1.3036 + :nth-child(+ 2n) 1.3037 + :nth-child(+ 2) 1.3038 + </pre> 1.3039 + </div> 1.3040 + 1.3041 + <p>If both <var>a</var> and <var>b</var> are equal to zero, the 1.3042 + pseudo-class represents no element in the document tree. 1.3043 + 1.3044 + <p>The value <var>a</var> can be negative, but only the positive values of 1.3045 + <var>a</var><code>n</code>+<var>b</var>, for <code>n</code>≥0, may 1.3046 + represent an element in the document tree. 1.3047 + 1.3048 + <div class=example> 1.3049 + <p>Example:</p> 1.3050 + 1.3051 + <pre>html|tr:nth-child(-n+6) /* represents the 6 first rows of XHTML tables */</pre> 1.3052 + </div> 1.3053 + 1.3054 + <h3 id=the-nth-last-child-pseudo><span class=secno>12.3. </span> <a 1.3055 + href="#nth-last-child-pseudo"><code>:nth-last-child()</code></a> 1.3056 + pseudo-class</h3> 1.3057 + 1.3058 + <p>The <dfn id=nth-last-child-pseudo 1.3059 + title=":nth-last-child()">:nth-last-child(<var>a</var>n+<var>b</var>)</dfn> 1.3060 + pseudo-class notation represents an element that has 1.3061 + <var>a</var><code>n</code>+<var>b</var>-1 siblings <strong>after</strong> 1.3062 + it in the document tree, for any positive integer or zero value of 1.3063 + <code>n</code>, and has a parent element. See <a 1.3064 + href="#nth-child-pseudo"><code>:nth-child()</code></a> pseudo-class for 1.3065 + the syntax of its argument. It also accepts the ‘<code 1.3066 + class=css><code>even</code></code>’ and ‘<code 1.3067 + class=css><code>odd</code></code>’ values as arguments. 1.3068 + 1.3069 + <div class=example> 1.3070 + <p>Examples:</p> 1.3071 + 1.3072 + <pre>tr:nth-last-child(-n+2) /* represents the two last rows of an HTML table */ 1.3073 + 1.3074 + foo:nth-last-child(odd) /* represents all odd foo elements in their parent element, 1.3075 + counting from the last one */</pre> 1.3076 + </div> 1.3077 + 1.3078 + <h3 id=the-nth-of-type-pseudo><span class=secno>12.4. </span> <a 1.3079 + href="#nth-of-type-pseudo"><code>:nth-of-type()</code></a> pseudo-class</h3> 1.3080 + 1.3081 + <p>The <dfn id=nth-of-type-pseudo 1.3082 + title=":nth-of-type()">:nth-of-type(<var>a</var>n+<var>b</var>)</dfn> 1.3083 + pseudo-class notation represents an element that has 1.3084 + <var>a</var><code>n</code>+<var>b</var>-1 siblings with the same expanded 1.3085 + element name <strong>before</strong> it in the document tree, for any zero 1.3086 + or positive integer value of <code>n</code>, and has a parent element. See 1.3087 + <a href="#nth-child-pseudo"><code>:nth-child()</code></a> pseudo-class for 1.3088 + the syntax of its argument. It also accepts the ‘<code 1.3089 + class=css><code>even</code></code>’ and ‘<code 1.3090 + class=css><code>odd</code></code>’ values. 1.3091 + 1.3092 + <div class=example> 1.3093 + <p>CSS example:</p> 1.3094 + 1.3095 + <p>This allows an author to alternate the position of floated images:</p> 1.3096 + 1.3097 + <pre>img:nth-of-type(2n+1) { float: right; } 1.3098 + img:nth-of-type(2n) { float: left; }</pre> 1.3099 + </div> 1.3100 + 1.3101 + <h3 id=the-nth-last-of-type-pseudo><span class=secno>12.5. </span> <a 1.3102 + href="#nth-last-of-type"><code>:nth-last-of-type()</code></a> pseudo-class</h3> 1.3103 + 1.3104 + <p>The <dfn id=nth-last-of-type 1.3105 + title=":nth-last-of-type()">:nth-last-of-type(<var>a</var>n+<var>b</var>)</dfn> 1.3106 + pseudo-class notation represents an element that has 1.3107 + <var>a</var><code>n</code>+<var>b</var>-1 siblings with the same expanded 1.3108 + element name <strong>after</strong> it in the document tree, for any zero 1.3109 + or positive integer value of <code>n</code>, and has a parent element. See 1.3110 + <a href="#nth-child-pseudo"><code>:nth-child()</code></a> pseudo-class for 1.3111 + the syntax of its argument. It also accepts the ‘<code 1.3112 + class=css><code>even</code></code>’ and ‘<code 1.3113 + class=css><code>odd</code></code>’ values. 1.3114 + 1.3115 + <div class=example> 1.3116 + <p>Example:</p> 1.3117 + 1.3118 + <p>To represent all <code>h2</code> children of an XHTML <code>body</code> 1.3119 + except the first and last, one could use the following selector:</p> 1.3120 + 1.3121 + <pre>body > h2:nth-of-type(n+2):nth-last-of-type(n+2)</pre> 1.3122 + 1.3123 + <p>In this case, one could also use <a 1.3124 + href="#negation-pseudo"><code>:not()</code></a>, although the selector 1.3125 + ends up being just as long:</p> 1.3126 + 1.3127 + <pre>body > h2:not(:first-of-type):not(:last-of-type)</pre> 1.3128 + </div> 1.3129 + 1.3130 + <h3 id=the-nth-match-pseudo><span class=secno>12.6. </span> <a 1.3131 + href="#nth-match-pseudo"><code>:nth-match()</code></a> pseudo-class</h3> 1.3132 + 1.3133 + <p><dfn id=nth-match-pseudo 1.3134 + title=":nth-match()">:nth-match(<var>a</var>n+<var>b</var> of 1.3135 + <var>selector-list</var>)</dfn> pseudo-class notation represents an 1.3136 + element that has a parent and has 1.3137 + <var>a</var><code>n</code>+<var>b</var>-1 siblings that match the given 1.3138 + <var>selector-list</var> <strong>before</strong> it in the document tree, 1.3139 + for any zero or positive integer value of <code>n</code>. 1.3140 + 1.3141 + <p>See <a href="#nth-child-pseudo"><code>:nth-child()</code></a> 1.3142 + pseudo-class for the syntax of its <var>a</var>n+<var>b</var> argument, 1.3143 + which can also be replaced with the ‘<code 1.3144 + class=css><code>even</code></code>’ and ‘<code 1.3145 + class=css><code>odd</code></code>’ keywords. 1.3146 + <!-- define <selector>. Split an+b into a similar <notation> --> 1.3147 + 1.3148 + <h3 id=the-nth-last-match-pseudo><span class=secno>12.7. </span> <a 1.3149 + href="#nth-last-match-pseudo"><code>:nth-last-match()</code></a> 1.3150 + pseudo-class</h3> 1.3151 + 1.3152 + <p><dfn id=nth-last-match-pseudo 1.3153 + title=":nth-last-match()">:nth-last-match(<var>a</var>n+<var>b</var> of 1.3154 + <var>selector-list</var>)</dfn> pseudo-class notation represents an 1.3155 + element that has a parent and has 1.3156 + <var>a</var><code>n</code>+<var>b</var>-1 siblings that match the given 1.3157 + <var>selector-list</var> <strong>after</strong> it in the document tree, 1.3158 + for any zero or positive integer value of <code>n</code>. 1.3159 + 1.3160 + <p>See <a href="#nth-child-pseudo"><code>:nth-child()</code></a> 1.3161 + pseudo-class for the syntax of its <var>a</var>n+<var>b</var> argument, 1.3162 + which can also be replaced with the ‘<code 1.3163 + class=css><code>even</code></code>’ and ‘<code 1.3164 + class=css><code>odd</code></code>’ keywords. 1.3165 + 1.3166 + <h3 id=the-first-child-pseudo><span class=secno>12.8. </span> <a 1.3167 + href="#first-child-pseudo"><code>:first-child</code></a> pseudo-class</h3> 1.3168 + 1.3169 + <p>Same as <code>:nth-child(1)</code>. The <dfn 1.3170 + id=first-child-pseudo>:first-child</dfn> pseudo-class represents an 1.3171 + element that is the first child of some other element. 1.3172 + 1.3173 + <div class=example> 1.3174 + <p>Examples:</p> 1.3175 + 1.3176 + <p>The following selector represents a <code>p</code> element that is the 1.3177 + first child of a <code>div</code> element:</p> 1.3178 + 1.3179 + <pre>div > p:first-child</pre> 1.3180 + 1.3181 + <p>This selector can represent the <code>p</code> inside the 1.3182 + <code>div</code> of the following fragment:</p> 1.3183 + 1.3184 + <pre> 1.3185 + <p> The last P before the note.</p> 1.3186 + <div class="note"> 1.3187 + <p> The first P inside the note.</p> 1.3188 + </div></pre> 1.3189 + but cannot represent the second <code>p</code> in the following fragment: 1.3190 + <pre> 1.3191 + <p> The last P before the note.</p> 1.3192 + <div class="note"> 1.3193 + <h2> Note </h2> 1.3194 + <p> The first P inside the note.</p> 1.3195 + </div></pre> 1.3196 + 1.3197 + <p>The following two selectors are usually equivalent:</p> 1.3198 + 1.3199 + <pre> 1.3200 + * > a:first-child /* a is first child of any element */ 1.3201 + a:first-child /* Same (assuming a is not the root element) */</pre> 1.3202 + </div> 1.3203 + 1.3204 + <h3 id=the-last-child-pseudo><span class=secno>12.9. </span> <a 1.3205 + href="#last-child-pseudo"><code>:last-child</code></a> pseudo-class</h3> 1.3206 + 1.3207 + <p>Same as <code>:nth-last-child(1)</code>. The <dfn 1.3208 + id=last-child-pseudo>:last-child</dfn> pseudo-class represents an element 1.3209 + that is the last child of some other element. 1.3210 + 1.3211 + <div class=example> 1.3212 + <p>Example:</p> 1.3213 + 1.3214 + <p>The following selector represents a list item <code>li</code> that is 1.3215 + the last child of an ordered list <code>ol</code>. 1.3216 + 1.3217 + <pre>ol > li:last-child</pre> 1.3218 + </div> 1.3219 + 1.3220 + <h3 id=the-first-of-type-pseudo><span class=secno>12.10. </span> <a 1.3221 + href="#first-of-type-pseudo"><code>:first-of-type</code></a> pseudo-class</h3> 1.3222 + 1.3223 + <p>Same as <code>:nth-of-type(1)</code>. The <dfn 1.3224 + id=first-of-type-pseudo>:first-of-type</dfn> pseudo-class represents an 1.3225 + element that is the first sibling of its type in the list of children of 1.3226 + its parent element. 1.3227 + 1.3228 + <div class=example> 1.3229 + <p>Example:</p> 1.3230 + 1.3231 + <p>The following selector represents a definition title <code>dt</code> 1.3232 + inside a definition list <code>dl</code>, this <code>dt</code> being the 1.3233 + first of its type in the list of children of its parent element.</p> 1.3234 + 1.3235 + <pre>dl dt:first-of-type</pre> 1.3236 + 1.3237 + <p>It is a valid description for the first two <code>dt</code> elements in 1.3238 + the following example but not for the third one:</p> 1.3239 + 1.3240 + <pre> 1.3241 + <dl> 1.3242 + <dt>gigogne</dt> 1.3243 + <dd> 1.3244 + <dl> 1.3245 + <dt>fusée</dt> 1.3246 + <dd>multistage rocket</dd> 1.3247 + <dt>table</dt> 1.3248 + <dd>nest of tables</dd> 1.3249 + </dl> 1.3250 + </dd> 1.3251 + </dl></pre> 1.3252 + </div> 1.3253 + 1.3254 + <h3 id=the-last-of-type-pseudo><span class=secno>12.11. </span> <a 1.3255 + href="#last-of-type-pseudo"><code>:last-of-type</code></a> pseudo-class</h3> 1.3256 + 1.3257 + <p>Same as <code>:nth-last-of-type(1)</code>. The <dfn 1.3258 + id=last-of-type-pseudo>:last-of-type</dfn> pseudo-class represents an 1.3259 + element that is the last sibling of its type in the list of children of 1.3260 + its parent element. 1.3261 + 1.3262 + <div class=example> 1.3263 + <p>Example:</p> 1.3264 + 1.3265 + <p>The following selector represents the last data cell <code>td</code> of 1.3266 + a table row <code>tr</code>.</p> 1.3267 + 1.3268 + <pre>tr > td:last-of-type</pre> 1.3269 + </div> 1.3270 + 1.3271 + <h3 id=the-only-child-pseudo><span class=secno>12.12. </span> <a 1.3272 + href="#only-child-pseudo"><code>:only-child</code></a> pseudo-class</h3> 1.3273 + 1.3274 + <p>The <dfn id=only-child-pseudo>:only-child</dfn> pseudo-class represents 1.3275 + an element that has a parent element and whose parent element has no other 1.3276 + element children. Same as <code>:first-child:last-child</code> or 1.3277 + <code>:nth-child(1):nth-last-child(1)</code>, but with a lower 1.3278 + specificity. 1.3279 + 1.3280 + <h3 id=the-only-of-type-pseudo><span class=secno>12.13. </span> <a 1.3281 + href="#only-of-type-pseudo"><code>:only-of-type</code></a> pseudo-class</h3> 1.3282 + 1.3283 + <p>The <dfn id=only-of-type-pseudo>:only-of-type</dfn> pseudo-class 1.3284 + represents an element that has a parent element and whose parent element 1.3285 + has no other element children with the same expanded element name. Same as 1.3286 + <code>:first-of-type:last-of-type</code> or 1.3287 + <code>:nth-of-type(1):nth-last-of-type(1)</code>, but with a lower 1.3288 + specificity. 1.3289 + 1.3290 + <h3 id=the-empty-pseudo><span class=secno>12.14. </span> <a 1.3291 + href="#empty-pseudo"><code>:empty</code></a> pseudo-class</h3> 1.3292 + 1.3293 + <p>The <dfn id=empty-pseudo>:empty</dfn> pseudo-class represents an element 1.3294 + that has no children at all. In terms of the document tree, only element 1.3295 + nodes and content nodes (such as DOM <a href="#DOM-LEVEL-3-CORE" 1.3296 + rel=biblioentry>[DOM-LEVEL-3-CORE]<!--{{DOM-LEVEL-3-CORE}}--></a> text 1.3297 + nodes, CDATA nodes, and entity references) whose data has a non-zero 1.3298 + length must be considered as affecting emptiness; comments, processing 1.3299 + instructions, and other nodes must not affect whether an element is 1.3300 + considered empty or not. 1.3301 + 1.3302 + <div class=example> 1.3303 + <p>Examples:</p> 1.3304 + 1.3305 + <p><code>p:empty</code> is a valid representation of the following 1.3306 + fragment:</p> 1.3307 + 1.3308 + <pre><p></p></pre> 1.3309 + 1.3310 + <p><code>foo:empty</code> is not a valid representation for the following 1.3311 + fragments:</p> 1.3312 + 1.3313 + <pre><foo>bar</foo></pre> 1.3314 + 1.3315 + <pre><foo><bar>bla</bar></foo></pre> 1.3316 + 1.3317 + <pre><foo>this is not <bar>:empty</bar></foo></pre> 1.3318 + </div> 1.3319 + 1.3320 + <h2 id=combinators><span class=secno>13. </span> Combinators</h2> 1.3321 + 1.3322 + <h3 id=descendant-combinators><span class=secno>13.1. </span> Descendant 1.3323 + combinator</h3> 1.3324 + 1.3325 + <p>At times, authors may want selectors to describe an element that is the 1.3326 + descendant of another element in the document tree (e.g., "an 1.3327 + <code>EM</code> element that is contained within an <code>H1</code> 1.3328 + element"). Descendant combinators express such a relationship. A <dfn 1.3329 + id=descendant-combinator>descendant combinator</dfn> is <a 1.3330 + href="#whitespace">whitespace</a> that separates two <a 1.3331 + href="#compound"><i>compound selectors</i></a>. A selector of the form 1.3332 + "<code>A B</code>" represents an element <code>B</code> that is an 1.3333 + arbitrary descendant of some ancestor element <code>A</code>. 1.3334 + 1.3335 + <div class=example> 1.3336 + <p>Examples:</p> 1.3337 + 1.3338 + <p>For example, consider the following selector:</p> 1.3339 + 1.3340 + <pre>h1 em</pre> 1.3341 + 1.3342 + <p>It represents an <code>em</code> element being the descendant of an 1.3343 + <code>h1</code> element. It is a correct and valid, but partial, 1.3344 + description of the following fragment:</p> 1.3345 + 1.3346 + <pre> 1.3347 + <h1>This <span class="myclass">headline 1.3348 + is <em>very</em> important</span></h1></pre> 1.3349 + 1.3350 + <p>The following selector:</p> 1.3351 + 1.3352 + <pre>div * p</pre> 1.3353 + 1.3354 + <p>represents a <code>p</code> element that is a grandchild or later 1.3355 + descendant of a <code>div</code> element. Note the whitespace on either 1.3356 + side of the "*" is not part of the universal selector; the whitespace is 1.3357 + a combinator indicating that the <code>div</code> must be the ancestor of 1.3358 + some element, and that that element must be an ancestor of the 1.3359 + <code>p</code>.</p> 1.3360 + 1.3361 + <p>The following selector, which combines descendant combinators and <a 1.3362 + href="#attribute-selectors">attribute selectors</a>, represents an 1.3363 + element that (1) has the <code>href</code> attribute set and (2) is 1.3364 + inside a <code>p</code> that is itself inside a <code>div</code>:</p> 1.3365 + 1.3366 + <pre>div p *[href]</pre> 1.3367 + </div> 1.3368 + 1.3369 + <h3 id=child-combinators><span class=secno>13.2. </span> Child combinator</h3> 1.3370 + 1.3371 + <p>A <dfn id=child-combinator>child combinator</dfn> describes a childhood 1.3372 + relationship between two elements. A child combinator is made of the 1.3373 + "greater-than sign" (U+003E, <code>></code>) character and 1.3374 + separates two <a href="#compound"><i>compound selectors</i></a>. 1.3375 + 1.3376 + <div class=example> 1.3377 + <p>Examples:</p> 1.3378 + 1.3379 + <p>The following selector represents a <code>p</code> element that is 1.3380 + child of <code>body</code>:</p> 1.3381 + 1.3382 + <pre>body > p</pre> 1.3383 + 1.3384 + <p>The following example combines descendant combinators and child 1.3385 + combinators.</p> 1.3386 + 1.3387 + <pre>div ol>li p</pre> 1.3388 + <!-- LEAVE THOSE SPACES OUT! see below --> 1.3389 + <p>It represents a <code>p</code> element that is a descendant of an 1.3390 + <code>li</code> element; the <code>li</code> element must be the child of 1.3391 + an <code>ol</code> element; the <code>ol</code> element must be a 1.3392 + descendant of a <code>div</code>. Notice that the optional white space 1.3393 + around the ">" combinator has been left out.</p> 1.3394 + </div> 1.3395 + 1.3396 + <p>For information on selecting the first child of an element, please see 1.3397 + the section on the <code><a 1.3398 + href="#structural-pseudos">:first-child</a></code> pseudo-class above. 1.3399 + 1.3400 + <h3 id=adjacent-sibling-combinators><span class=secno>13.3. </span> 1.3401 + Next-sibling combinator</h3> 1.3402 + 1.3403 + <p>The <dfn id=next-sibling-combinator>next-sibling combinator</dfn> is 1.3404 + made of the "plus sign" (U+002B, <code>+</code>) character that 1.3405 + separates two <i>compound selectors<i>. The elements represented by the 1.3406 + two <a href="#compound"><i>compound selectors</i></a> share the same 1.3407 + parent in the document tree and the element represented by the first <a 1.3408 + href="#compound"><i>compound selector</i></a> immediately precedes the 1.3409 + element represented by the second one. Non-element nodes (e.g. text 1.3410 + between elements) are ignored when considering the adjacency of elements. 1.3411 + </i></i> 1.3412 + 1.3413 + <div class=example> 1.3414 + <p>Examples:</p> 1.3415 + 1.3416 + <p>The following selector represents a <code>p</code> element immediately 1.3417 + following a <code>math</code> element:</p> 1.3418 + 1.3419 + <pre>math + p</pre> 1.3420 + 1.3421 + <p>The following selector is conceptually similar to the one in the 1.3422 + previous example, except that it adds an attribute selector — it adds a 1.3423 + constraint to the <code>h1</code> element, that it must have 1.3424 + <code>class="opener"</code>:</p> 1.3425 + 1.3426 + <pre>h1.opener + h2</pre> 1.3427 + </div> 1.3428 + 1.3429 + <h3 id=general-sibling-combinators><span class=secno>13.4. </span> 1.3430 + Following-sibling combinator</h3> 1.3431 + 1.3432 + <p>The <dfn id=following-sibling-combinator>following-sibling 1.3433 + combinator</dfn> is made of the "tilde" (U+007E, <code>~</code>) 1.3434 + character that separates two <a href="#compound"><i>compound 1.3435 + selectors</i></a>. The elements represented by the two <a 1.3436 + href="#compound"><i>compound selectors</i></a> share the same parent in 1.3437 + the document tree and the element represented by the first compound 1.3438 + selector precedes (not necessarily immediately) the element represented by 1.3439 + the second one. 1.3440 + 1.3441 + <div class=example> 1.3442 + <p>Example:</p> 1.3443 + 1.3444 + <pre>h1 ~ pre</pre> 1.3445 + 1.3446 + <p>represents a <code>pre</code> element following an <code>h1</code>. It 1.3447 + is a correct and valid, but partial, description of:</p> 1.3448 + 1.3449 + <pre> 1.3450 + <h1>Definition of the function a</h1> 1.3451 + <p>Function a(x) has to be applied to all figures in the table.</p> 1.3452 + <pre>function a(x) = 12x/13.5</pre></pre> 1.3453 + </div> 1.3454 + 1.3455 + <h3 id=idref-combinators><span class=secno>13.5. </span> Reference 1.3456 + combinators</h3> 1.3457 + 1.3458 + <p> The <dfn id=reference-combinator>reference combinator</dfn> consists of 1.3459 + two slashes with an intervening <a 1.3460 + href="http://www.w3.org/TR/css3-namespace/#css-qnames">CSS qualified 1.3461 + name</a>, and separates two <a href="#compound"><i>compound 1.3462 + selectors</i></a>, e.g. <code>A /attr/ B</code>. The element represented 1.3463 + by the first <a href="#compound"><i>compound selector</i></a> explicitly 1.3464 + references the element represented by the second <a 1.3465 + href="#compound"><i>compound selector</i></a>. Unless the host language 1.3466 + defines a different syntax for expressing this relationship, this 1.3467 + relationship is considered to exist if the value of the specified 1.3468 + attribute on the first element is an IDREF or an <a 1.3469 + href="#id-selector"><i>ID selector</i></a> referencing the second element. 1.3470 + Attribute matching for reference combinators follow the same rules as for 1.3471 + <a 1.3472 + href="http://www.w3.org/TR/css3-selectors/#attribute-selectors">attribute 1.3473 + selectors</a>. 1.3474 + 1.3475 + <div class=example> 1.3476 + <p>The following example highlights an <code><input></code> element 1.3477 + when its <a 1.3478 + href="http://www.w3.org/TR/html40/interact/forms.html#h-17.9"><code><label></code></a> 1.3479 + is focused or hovered-over:</p> 1.3480 + 1.3481 + <pre>label:matches(:hover, :focus) /for/ input, /* association by "for" attribute */ 1.3482 +<!-- -->label:matches(:hover, :focus):not([for]) input { /* association by containment */ 1.3483 +<!-- --> box-shadow: yellow 0 0 10px; }</pre> 1.3484 + </div> 1.3485 + 1.3486 + <p class=issue>This could also be implemented as a functional pseudo-class. 1.3487 + 1.3488 + <h2 id=column-selectors><span class=secno>14. </span> Grid-Structural 1.3489 + Selectors</h2> 1.3490 + 1.3491 + <p>The double-association of a cell in a 2D grid (to its row and column) 1.3492 + cannot be represented by parentage in a hierarchical markup language. Only 1.3493 + one of those associations can be represented hierarchically: the other 1.3494 + must be explicitly or implicitly defined in the document language 1.3495 + semantics. In both HTML and DocBook, two of the most common hierarchical 1.3496 + markup languages, the markup is row-primary (that is, the row associations 1.3497 + are represented hierarchically); the columns must be implied. To be able 1.3498 + to represent such implied column-based relationships, the <a 1.3499 + href="#column-combinator0"><i>column combinator</i></a> and the <a 1.3500 + href="#nth-column-pseudo"><code>:nth-column()</code></a> and <a 1.3501 + href="#nth-last-column-pseudo"><code>:nth-last-column()</code></a> 1.3502 + pseudo-classes are defined. In a column-primary format, these 1.3503 + pseudo-classes match against row associations instead. 1.3504 + 1.3505 + <h3 id=column-combinator><span class=secno>14.1. </span> Column combinator</h3> 1.3506 + 1.3507 + <p>The <dfn id=column-combinator0>column combinator</dfn>, which consists 1.3508 + of two forward slashes (‘<code class=css>//</code>’) represents the 1.3509 + relationship of a column element to a cell element belonging to the column 1.3510 + it represents. Column membership is determined based on the semantics of 1.3511 + the document language only: whether and how the elements are presented is 1.3512 + not considered. If a cell element belongs to more than one column, it is 1.3513 + represented by a selector indicating membership in any of those columns. 1.3514 + 1.3515 + <div class=example> 1.3516 + <p>The following example makes cells C, E, and G yellow.</p> 1.3517 + 1.3518 + <pre>col.selected // td { background: yellow; }</pre> 1.3519 + 1.3520 + <pre> 1.3521 +<!-- --><table> 1.3522 +<!-- --> <col span="2"> 1.3523 +<!-- --> <col class="selected"> 1.3524 +<!-- --> <tr><td>A <td>B <td>C 1.3525 +<!-- --> <tr><td span="2">D <td>E 1.3526 +<!-- --> <tr><td>F <td span="2">G 1.3527 +<!-- --></table></pre> 1.3528 + </div> 1.3529 + 1.3530 + <p class=issue> Should this be made more generic, so that any element can 1.3531 + have an implicit relationship based on its tagname or whatever? 1.3532 + 1.3533 + <h3 id=the-nth-column-pseudo><span class=secno>14.2. </span> <a 1.3534 + href="#nth-column-pseudo"><code>:nth-column()</code></a> pseudo-class</h3> 1.3535 + 1.3536 + <p>The <dfn id=nth-column-pseudo 1.3537 + title=":nth-column()">:nth-column(<var>a</var>n+<var>b</var>)</dfn> 1.3538 + pseudo-class notation represents a cell element belonging to a column that 1.3539 + has <var>a</var><code>n</code>+<var>b</var>-1 columns 1.3540 + <strong>before</strong> it, for any positive integer or zero value of 1.3541 + <code>n</code>. Column membership is determined based on the semantics of 1.3542 + the document language only: whether and how the elements are presented is 1.3543 + not considered. If a cell element belongs to more than one column, it is 1.3544 + represented by a selector indicating any of those columns. 1.3545 + 1.3546 + <p>See <a href="#nth-child-pseudo"><code>:nth-child()</code></a> 1.3547 + pseudo-class for the syntax of its argument. It also accepts the ‘<code 1.3548 + class=css><code>even</code></code>’ and ‘<code 1.3549 + class=css><code>odd</code></code>’ values as arguments. 1.3550 + 1.3551 + <h3 id=the-nth-last-column-pseudo><span class=secno>14.3. </span> <a 1.3552 + href="#nth-last-column-pseudo"><code>:nth-last-column()</code></a> 1.3553 + pseudo-class</h3> 1.3554 + 1.3555 + <p>The <dfn id=nth-last-column-pseudo 1.3556 + title=":nth-last-column()">:nth-last-column(<var>a</var>n+<var>b</var>)</dfn> 1.3557 + pseudo-class notation represents a cell element belonging to a column that 1.3558 + has <var>a</var><code>n</code>+<var>b</var>-1 columns 1.3559 + <strong>after</strong> it, for any positive integer or zero value of 1.3560 + <code>n</code>. Column membership is determined based on the semantics of 1.3561 + the document language only: whether and how the elements are presented is 1.3562 + not considered. If a cell element belongs to more than one column, it is 1.3563 + represented by a selector indicating any of those columns. 1.3564 + 1.3565 + <p>See <a href="#nth-child-pseudo"><code>:nth-child()</code></a> 1.3566 + pseudo-class for the syntax of its argument. It also accepts the ‘<code 1.3567 + class=css><code>even</code></code>’ and ‘<code 1.3568 + class=css><code>odd</code></code>’ values as arguments. 1.3569 + 1.3570 + <h2 id=specificity><span class=secno>15. </span> Calculating a selector's 1.3571 + specificity</h2> 1.3572 + 1.3573 + <p>A selector's specificity is calculated as follows: 1.3574 + 1.3575 + <ul> 1.3576 + <li>count the number of ID selectors in the selector (= a) 1.3577 + 1.3578 + <li>count the number of class selectors, attributes selectors, and 1.3579 + pseudo-classes in the selector (= b) 1.3580 + 1.3581 + <li>count the number of type selectors and pseudo-elements in the selector 1.3582 + (= c) 1.3583 + 1.3584 + <li>ignore the universal selector 1.3585 + </ul> 1.3586 + 1.3587 + <p>The specificity of a <a href="#negation">negation</a> or <a 1.3588 + href="#matches">matches</a> pseudo-class is the specificity of its most 1.3589 + specific argument. The pseudo-class itself does not count as pseudo-class. 1.3590 + 1.3591 + 1.3592 + <p class=issue>It would probably be better to have match-sensitive 1.3593 + specificity, if possible. See <a 1.3594 + href="http://lists.w3.org/Archives/Public/www-style/2010Sep/0534.html">dbaron's 1.3595 + message</a>. 1.3596 + 1.3597 + <p>Concatenating the three numbers a-b-c (in a number system with a large 1.3598 + base) gives the specificity. 1.3599 + 1.3600 + <div class=example> 1.3601 + <p>Examples:</p> 1.3602 + 1.3603 + <pre> 1.3604 + * /* a=0 b=0 c=0 -> specificity = 0 */ 1.3605 + LI /* a=0 b=0 c=1 -> specificity = 1 */ 1.3606 + UL LI /* a=0 b=0 c=2 -> specificity = 2 */ 1.3607 + UL OL+LI /* a=0 b=0 c=3 -> specificity = 3 */ 1.3608 + H1 + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */ 1.3609 + UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */ 1.3610 + LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */ 1.3611 + #x34y /* a=1 b=0 c=0 -> specificity = 100 */ 1.3612 + #s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */ 1.3613 + </pre> 1.3614 + </div> 1.3615 + 1.3616 + <p class=note><strong>Note:</strong> Repeated occurrances of the same 1.3617 + simple selector are allowed and do increase specificity. 1.3618 + 1.3619 + <p class=note><strong>Note:</strong> the specificity of the styles 1.3620 + specified in an HTML <code>style</code> attribute is described in CSS 2.1. 1.3621 + <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. 1.3622 + 1.3623 + <h2 id=formal-syntax><span class=secno>16. </span> Formal Syntax</h2> 1.3624 + 1.3625 + <p class=issue>This section needs to be updated. 1.3626 + 1.3627 + <h3 id=grammar><span class=secno>16.1. </span> Grammar</h3> 1.3628 + 1.3629 + <p>The grammar below defines the syntax of Selectors. It is globally LL(1) 1.3630 + and can be locally LL(2) (but note that most UAs should not use it 1.3631 + directly, since it doesn't express the parsing conventions). The format of 1.3632 + the productions is optimized for human consumption and some shorthand 1.3633 + notations beyond Yacc (see <a href="#YACC" 1.3634 + rel=biblioentry>[YACC]<!--{{!YACC}}--></a>) are used: 1.3635 + 1.3636 + <ul> 1.3637 + <li><b>*</b>: 0 or more 1.3638 + 1.3639 + <li><b>+</b>: 1 or more 1.3640 + 1.3641 + <li><b>?</b>: 0 or 1 1.3642 + 1.3643 + <li><b>|</b>: separates alternatives 1.3644 + 1.3645 + <li><b>[ ]</b>: grouping 1.3646 + </ul> 1.3647 + 1.3648 + <p>The productions are: 1.3649 + 1.3650 + <pre>selectors_group 1.3651 + : selector [ COMMA S* selector ]* 1.3652 + ; 1.3653 + 1.3654 + selector 1.3655 + : compound_selector [ combinator simple_selector_sequence ]* 1.3656 + ; 1.3657 + 1.3658 + combinator 1.3659 + /* combinators can be surrounded by whitespace */ 1.3660 + : PLUS S* | GREATER S* | TILDE S* | S+ 1.3661 + ; 1.3662 + 1.3663 + simple_selector_sequence 1.3664 + : [ type_selector | universal ] 1.3665 + [ HASH | class | attrib | pseudo | negation ]* 1.3666 + | [ HASH | class | attrib | pseudo | negation ]+ 1.3667 + ; 1.3668 + 1.3669 + type_selector 1.3670 + : [ namespace_prefix ]? element_name 1.3671 + ; 1.3672 + 1.3673 + namespace_prefix 1.3674 + : [ IDENT | '*' ]? '|' 1.3675 + ; 1.3676 + 1.3677 + element_name 1.3678 + : IDENT 1.3679 + ; 1.3680 + 1.3681 + universal 1.3682 + : [ namespace_prefix ]? '*' 1.3683 + ; 1.3684 + 1.3685 + class 1.3686 + : '.' IDENT 1.3687 + ; 1.3688 + 1.3689 + attrib 1.3690 + : '[' S* [ namespace_prefix ]? IDENT S* 1.3691 + [ [ PREFIXMATCH | 1.3692 + SUFFIXMATCH | 1.3693 + SUBSTRINGMATCH | 1.3694 + '=' | 1.3695 + INCLUDES | 1.3696 + DASHMATCH ] S* [ IDENT | STRING ] S* [IDENT S*]? 1.3697 + ]? ']' 1.3698 + ; 1.3699 + 1.3700 + pseudo 1.3701 + /* '::' starts a pseudo-element, ':' a pseudo-class */ 1.3702 + /* Exceptions: :first-line, :first-letter, :before and :after. */ 1.3703 + /* Note that pseudo-elements are restricted to one per selector and */ 1.3704 + /* occur only in the last compound_selector. */ 1.3705 + : ':' ':'? [ IDENT | functional_pseudo ] 1.3706 + ; 1.3707 + 1.3708 + functional_pseudo 1.3709 + : FUNCTION S* expression ')' 1.3710 + ; 1.3711 + 1.3712 + expression 1.3713 + /* In CSS3, the expressions are identifiers, strings, */ 1.3714 + /* or of the form "an+b" */ 1.3715 + : [ [ PLUS | '-' | DIMENSION | NUMBER | STRING | IDENT ] S* ]+ 1.3716 + ; 1.3717 + 1.3718 + negation 1.3719 + : NOT S* negation_arg S* ')' 1.3720 + ; 1.3721 + 1.3722 + negation_arg 1.3723 + : type_selector | universal | HASH | class | attrib | pseudo 1.3724 + ;</pre> 1.3725 + 1.3726 + <h3 id=lex><span class=secno>16.2. </span> Lexical scanner</h3> 1.3727 + 1.3728 + <p>The following is the tokenizer, written in Flex (see <a href="#FLEX" 1.3729 + rel=biblioentry>[FLEX]<!--{{!FLEX}}--></a>) notation. The tokenizer is 1.3730 + case-insensitive. 1.3731 + 1.3732 + <p>The two occurrences of "\377" represent the highest character number 1.3733 + that current versions of Flex can deal with (decimal 255). They should be 1.3734 + read as "\4177777" (decimal 1114111), which is the highest possible code 1.3735 + point in Unicode/ISO-10646. <a href="#UNICODE" 1.3736 + rel=biblioentry>[UNICODE]<!--{{!UNICODE}}--></a> 1.3737 + 1.3738 + <pre> 1.3739 + %option case-insensitive 1.3740 + 1.3741 + ident [-]?{nmstart}{nmchar}* 1.3742 + name {nmchar}+ 1.3743 + nmstart [_a-z]|{nonascii}|{escape} 1.3744 + nonascii [^\0-\177] 1.3745 + unicode \\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])? 1.3746 + escape {unicode}|\\[^\n\r\f0-9a-f] 1.3747 + nmchar [_a-z0-9-]|{nonascii}|{escape} 1.3748 + num [0-9]+|[0-9]*\.[0-9]+ 1.3749 + string {string1}|{string2} 1.3750 + string1 \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*\" 1.3751 + string2 \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*\' 1.3752 + invalid {invalid1}|{invalid2} 1.3753 + invalid1 \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})* 1.3754 + invalid2 \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})* 1.3755 + nl \n|\r\n|\r|\f 1.3756 + w [ \t\r\n\f]* 1.3757 + 1.3758 + D d|\\0{0,4}(44|64)(\r\n|[ \t\r\n\f])? 1.3759 + E e|\\0{0,4}(45|65)(\r\n|[ \t\r\n\f])? 1.3760 + N n|\\0{0,4}(4e|6e)(\r\n|[ \t\r\n\f])?|\\n 1.3761 + O o|\\0{0,4}(4f|6f)(\r\n|[ \t\r\n\f])?|\\o 1.3762 + T t|\\0{0,4}(54|74)(\r\n|[ \t\r\n\f])?|\\t 1.3763 + V v|\\0{0,4}(58|78)(\r\n|[ \t\r\n\f])?|\\v 1.3764 + 1.3765 + %% 1.3766 + 1.3767 + [ \t\r\n\f]+ return S; 1.3768 + 1.3769 + "~=" return INCLUDES; 1.3770 + "|=" return DASHMATCH; 1.3771 + "^=" return PREFIXMATCH; 1.3772 + "$=" return SUFFIXMATCH; 1.3773 + "*=" return SUBSTRINGMATCH; 1.3774 + {ident} return IDENT; 1.3775 + {string} return STRING; 1.3776 + {ident}"(" return FUNCTION; 1.3777 + {num} return NUMBER; 1.3778 + "#"{name} return HASH; 1.3779 + {w}"+" return PLUS; 1.3780 + {w}">" return GREATER; 1.3781 + {w}"," return COMMA; 1.3782 + {w}"~" return TILDE; 1.3783 + ":"{N}{O}{T}"(" return NOT; 1.3784 + @{ident} return ATKEYWORD; 1.3785 + {invalid} return INVALID; 1.3786 + {num}% return PERCENTAGE; 1.3787 + {num}{ident} return DIMENSION; 1.3788 + "<!--" return CDO; 1.3789 + "-->" return CDC; 1.3790 + 1.3791 + \/\*[^*]*\*+([^/*][^*]*\*+)*\/ /* ignore comments */ 1.3792 + 1.3793 + . return *yytext;</pre> 1.3794 + 1.3795 + <h2 id=profiling><span class=secno>17. </span> Profiles</h2> 1.3796 + 1.3797 + <p>Each specification using Selectors must define the subset of Selectors 1.3798 + it allows and excludes, and describe the local meaning of all the 1.3799 + components of that subset. 1.3800 + 1.3801 + <h3 id=css-profiles><span class=secno>17.1. </span> CSS Profiles</h3> 1.3802 + 1.3803 + <p><em>This section is non-normative.</em> 1.3804 + 1.3805 + <p> 1.3806 + 1.3807 + <p>In CSS, selectors express pattern matching rules that determine which 1.3808 + style rules apply to elements in the document tree. 1.3809 + 1.3810 + <p>The following selector (CSS level 2) will <b>match</b> all anchors 1.3811 + <code>a</code> with attribute <code>name</code> set inside a section 1 1.3812 + header <code>h1</code>: 1.3813 + 1.3814 + <pre>h1 a[name]</pre> 1.3815 + 1.3816 + <p>All CSS declarations attached to such a selector are applied to elements 1.3817 + matching it. 1.3818 + 1.3819 + <table class=tprofile> 1.3820 + <caption>CSS Level 1 Selectors Profile</caption> 1.3821 + 1.3822 + <tbody> 1.3823 + <tr> 1.3824 + <th>Specification 1.3825 + 1.3826 + <td><a href="http://www.w3.org/TR/CSS1/">CSS level 1</a> 1.3827 + 1.3828 + <tr> 1.3829 + <th>Accepts 1.3830 + 1.3831 + <td>type selectors<br> 1.3832 + class selectors<br> 1.3833 + ID selectors<br> 1.3834 + :link, :visited and :active pseudo-classes<br> 1.3835 + descendant combinator <br> 1.3836 + ::first-line and ::first-letter pseudo-elements 1.3837 + 1.3838 + <tr> 1.3839 + <th>Excludes 1.3840 + 1.3841 + <td>namespace prefixes 1.3842 + 1.3843 + <tr> 1.3844 + <th>Extra constraints 1.3845 + 1.3846 + <td>only one class selector allowed per <a href="#compound"><i>compound 1.3847 + selector</i></a>, pseudo-elements only accept one-colon syntax 1.3848 + </table> 1.3849 + 1.3850 + <table class=tprofile> 1.3851 + <caption>CSS Level 2 Selectors Profile</caption> 1.3852 + 1.3853 + <tbody> 1.3854 + <tr> 1.3855 + <th>Specification 1.3856 + 1.3857 + <td><a href="http://www.w3.org/TR/CSS2/">CSS level 2</a> 1.3858 + 1.3859 + <tr> 1.3860 + <th>Accepts 1.3861 + 1.3862 + <td>type selectors<br> 1.3863 + universal selector<br> 1.3864 + attribute presence and values selectors<br> 1.3865 + class selectors<br> 1.3866 + ID selectors<br> 1.3867 + :link, :visited, :active, :hover, :focus, :lang() and :first-child 1.3868 + pseudo-classes <br> 1.3869 + descendant combinator<br> 1.3870 + child combinator<br> 1.3871 + adjacent-sibling combinator<br> 1.3872 + ::first-line and ::first-letter pseudo-elements<br> 1.3873 + ::before and ::after pseudo-elements 1.3874 + 1.3875 + <tr> 1.3876 + <th>Excludes 1.3877 + 1.3878 + <td>namespaces, case-insensitive attribute selectors 1.3879 + 1.3880 + <tr> 1.3881 + <th>Extra constraints 1.3882 + 1.3883 + <td>pseudo-elements only accept one-colon syntax 1.3884 + </table> 1.3885 + 1.3886 + <h3 id=stts-profile><span class=secno>17.2. </span> STTS Profiles</h3> 1.3887 + 1.3888 + <p><em>This section is non-normative.</em> 1.3889 + 1.3890 + <p>Selectors can be used in STTS 3 in two different manners: 1.3891 + 1.3892 + <ol> 1.3893 + <li>a selection mechanism equivalent to CSS selection mechanism: 1.3894 + declarations attached to a given selector are applied to elements 1.3895 + matching that selector, 1.3896 + 1.3897 + <li>fragment descriptions that appear on the right side of declarations. 1.3898 + </ol> 1.3899 + 1.3900 + <table class=tprofile> 1.3901 + <caption>STTS3 Selectors Profile</caption> 1.3902 + 1.3903 + <tbody> 1.3904 + <tr> 1.3905 + <th>Specification 1.3906 + 1.3907 + <td><a href="http://www.w3.org/TR/NOTE-STTS3">STTS 3</a> 1.3908 + 1.3909 + <tr> 1.3910 + <th>Accepts 1.3911 + 1.3912 + <td>type selectors<br> 1.3913 + universal selectors<br> 1.3914 + attribute selectors<br> 1.3915 + class selectors<br> 1.3916 + ID selectors<br> 1.3917 + level 3 structural pseudo-classes<br> 1.3918 + all combinators except reference combinator<br> 1.3919 + namespaces 1.3920 + 1.3921 + <tr> 1.3922 + <th>Excludes 1.3923 + 1.3924 + <td>namespaces, case-insensitive attribute selectors 1.3925 + 1.3926 + <tr> 1.3927 + <th>Extra constraints 1.3928 + 1.3929 + <td>some selectors and combinators are not allowed in fragment 1.3930 + descriptions on the right side of STTS declarations. 1.3931 + </table> 1.3932 + 1.3933 + <h2 id=conformance><span class=secno>18. </span> Conformance</h2> 1.3934 + 1.3935 + <h3 id=conventions><span class=secno>18.1. </span>Document Conventions</h3> 1.3936 + 1.3937 + <p>Conformance requirements are expressed with a combination of descriptive 1.3938 + assertions and RFC 2119 terminology. The key words “MUST”, “MUST 1.3939 + NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, 1.3940 + “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the 1.3941 + normative parts of this document are to be interpreted as described in RFC 1.3942 + 2119. However, for readability, these words do not appear in all uppercase 1.3943 + letters in this specification. 1.3944 + 1.3945 + <p>All of the text of this specification is normative except sections 1.3946 + explicitly marked as non-normative, examples, and notes. <a 1.3947 + href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a> 1.3948 + 1.3949 + <p>Examples in this specification are introduced with the words “for 1.3950 + example” or are set apart from the normative text with 1.3951 + <code>class="example"</code>, like this: 1.3952 + 1.3953 + <div class=example> 1.3954 + <p>This is an example of an informative example.</p> 1.3955 + </div> 1.3956 + 1.3957 + <p>Informative notes begin with the word “Note” and are set apart from 1.3958 + the normative text with <code>class="note"</code>, like this: 1.3959 + 1.3960 + <p class=note>Note, this is an informative note. 1.3961 + 1.3962 + <h3 id=conformance-classes><span class=secno>18.2. </span> Conformance 1.3963 + Classes</h3> 1.3964 + 1.3965 + <p>Conformance to Selectors Level 4 is defined for three conformance 1.3966 + classes: 1.3967 + 1.3968 + <dl> 1.3969 + <dt><dfn id=selector-instance 1.3970 + title="selector instance!!as conformance class">selector instance</dfn> 1.3971 + 1.3972 + <dd>A written selector. 1.3973 + 1.3974 + <dt><dfn id=interpreter>interpreter</dfn> 1.3975 + 1.3976 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 1.3977 + that interprets the semantics of a selector. 1.3978 + 1.3979 + <dt><dfn id=authoring-tool>authoring tool</dfn> 1.3980 + 1.3981 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 1.3982 + that writes a style sheet. 1.3983 + </dl> 1.3984 + 1.3985 + <p>A selector instance is conformant to Selectors Level 4 if it is valid 1.3986 + according to the selector syntax rules defined in this specification. 1.3987 + 1.3988 + <p>An interpreter is conformant to Selectors Level 4 if it parses 1.3989 + interprets selectors according to the semantics defined in Selectors Level 1.3990 + 4 (including following the error-handling rules). However, the inability 1.3991 + of a user agent to implement part of this specification due to the 1.3992 + limitations of a particular device (e.g., non interactive user agents will 1.3993 + probably not implement dynamic pseudo-classes because they make no sense 1.3994 + without interactivity) does not imply non-conformance. 1.3995 + 1.3996 + <p>An authoring tool is conformant to Selectors Level 4 if it writes 1.3997 + syntactically correct selectors. 1.3998 + 1.3999 + <p>Any specification reusing Selectors must contain a <a 1.4000 + href="#profiling">Profile</a> listing the subset of Selectors it accepts 1.4001 + or excludes, and describing any constraints it adds to the current 1.4002 + specification. 1.4003 + 1.4004 + <p>Specifications reusing Selectors must define how to handle invalid 1.4005 + selectors. (In the case of CSS, the entire rule in which the selector is 1.4006 + used is effectively dropped.) 1.4007 + 1.4008 + <h3 id=partial><span class=secno>18.3. </span> Partial Implementations</h3> 1.4009 + 1.4010 + <p>So that authors can exploit the forward-compatible parsing rules to 1.4011 + trigger fallback behavior, UAs <strong>must</strong> treat as <a 1.4012 + href="#invalid">invalid</a> any selectors for which they have no usable 1.4013 + level of support. 1.4014 + 1.4015 + <h3 id=experimental><span class=secno>18.4. </span> Experimental 1.4016 + Implementations</h3> 1.4017 + 1.4018 + <p>To avoid clashes with future Selectors features, the Selectors 1.4019 + specification reserves a <a 1.4020 + href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed 1.4021 + syntax</a> for proprietary extensions to Selectors. The CSS Working Group 1.4022 + recommends that experimental implementations of features in Selectors 1.4023 + Working Drafts also use vendor-prefixed pseudo-element or pseudo-class 1.4024 + names. This avoids any incompatibilities with future changes in the draft. 1.4025 + Once a specification reaches the Candidate Recommendation stage, 1.4026 + implementors should implement the non-prefixed syntax for any feature they 1.4027 + consider to be correctly implemented according to spec.</p> 1.4028 + <!-- 1.4029 + <h2 id="Tests">Tests</h2> 1.4030 + 1.4031 + <p>This specification has <a 1.4032 + href="http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/">a test 1.4033 + suite</a> allowing user agents to verify their basic conformance to 1.4034 + the specification. This test suite does not pretend to be exhaustive 1.4035 + and does not cover all possible combined cases of Selectors.</p> 1.4036 +--> 1.4037 + 1.4038 + <h2 id=acknowledgements><span class=secno>19. </span> Acknowledgements</h2> 1.4039 + 1.4040 + <p>The CSS working group would like to thank everyone who contributed to 1.4041 + the <a href="http://www.w3.org/TR/css3-selectors">previous Selectors</a> 1.4042 + specifications over the years, as those specifications formed the basis 1.4043 + for this one. 1.4044 + 1.4045 + <p>In particular, the working group would like to extend special thanks to 1.4046 + the following for their specific contributions to Selectors Level 4: L. 1.4047 + David Baron, Andrew Fedoniouk, Ian Hickson, Grey Hodge, Lachlan Hunt, 1.4048 + Jason Cranford Teague 1.4049 + 1.4050 + <h2 id=references><span class=secno>20. </span> References</h2> 1.4051 + 1.4052 + <h3 id=normative-references><span class=secno>20.1. </span> Normative 1.4053 + References</h3> 1.4054 + <!--begin-normative--> 1.4055 + <!-- Sorted by label --> 1.4056 + 1.4057 + <dl class=bibliography> 1.4058 + <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> 1.4059 + <!----> 1.4060 + 1.4061 + <dt id=CSS21>[CSS21] 1.4062 + 1.4063 + <dd>Bert Bos; et al. <a 1.4064 + href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style 1.4065 + Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June 1.4066 + 2011. W3C Recommendation. URL: <a 1.4067 + href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a> 1.4068 + </dd> 1.4069 + <!----> 1.4070 + 1.4071 + <dt id=CSS3NAMESPACE>[CSS3NAMESPACE] 1.4072 + 1.4073 + <dd>Elika J. Etemad; Anne van Kesteren. <a 1.4074 + href="http://www.w3.org/TR/2011/REC-css3-namespace-20110929/"><cite>CSS 1.4075 + Namespaces Module.</cite></a> 29 September 2011. W3C Recommendation. URL: 1.4076 + <a 1.4077 + href="http://www.w3.org/TR/2011/REC-css3-namespace-20110929/">http://www.w3.org/TR/2011/REC-css3-namespace-20110929/</a> 1.4078 + </dd> 1.4079 + <!----> 1.4080 + 1.4081 + <dt id=FLEX>[FLEX] 1.4082 + 1.4083 + <dd><cite>Flex: The Lexical Scanner Generator.</cite> Version 2.3.7, ISBN 1.4084 + 1882114213</dd> 1.4085 + <!----> 1.4086 + 1.4087 + <dt id=RFC2119>[RFC2119] 1.4088 + 1.4089 + <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key 1.4090 + words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet 1.4091 + RFC 2119. URL: <a 1.4092 + href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a> 1.4093 + </dd> 1.4094 + <!----> 1.4095 + 1.4096 + <dt id=SELECT>[SELECT] 1.4097 + 1.4098 + <dd>Tantek Çelik; et al. <a 1.4099 + href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/"><cite>Selectors 1.4100 + Level 3.</cite></a> 29 September 2011. W3C Recommendation. URL: <a 1.4101 + href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/">http://www.w3.org/TR/2011/REC-css3-selectors-20110929/</a> 1.4102 + </dd> 1.4103 + <!----> 1.4104 + 1.4105 + <dt id=UNICODE>[UNICODE] 1.4106 + 1.4107 + <dd>The Unicode Consortium. <a 1.4108 + href="http://www.unicode.org/standard/versions/enumeratedversions.html"><cite>The 1.4109 + Unicode Standard.</cite></a> 2003. Defined by: The Unicode Standard, 1.4110 + Version 4.0 (Boston, MA, Addison-Wesley, ISBN 0-321-18578-1), as updated 1.4111 + from time to time by the publication of new versions URL: <a 1.4112 + href="http://www.unicode.org/standard/versions/enumeratedversions.html">http://www.unicode.org/standard/versions/enumeratedversions.html</a> 1.4113 + </dd> 1.4114 + <!----> 1.4115 + 1.4116 + <dt id=YACC>[YACC] 1.4117 + 1.4118 + <dd>S. C. Johnson. <cite>YACC - Yet another compiler compiler.</cite> 1.4119 + Murray Hill. 1975. Technical Report.</dd> 1.4120 + <!----> 1.4121 + </dl> 1.4122 + <!--end-normative--> 1.4123 + 1.4124 + <h3 id=informative-references><span class=secno>20.2. </span> Informative 1.4125 + References</h3> 1.4126 + <!--begin-informative--> 1.4127 + <!-- Sorted by label --> 1.4128 + 1.4129 + <dl class=bibliography> 1.4130 + <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> 1.4131 + <!----> 1.4132 + 1.4133 + <dt id=BCP47>[BCP47] 1.4134 + 1.4135 + <dd>A. Phillips; M. Davis. <a 1.4136 + href="ftp://ftp.rfc-editor.org/in-notes/bcp/bcp47.txt"><cite>Tags for 1.4137 + Identifying Languages.</cite></a> September 2009. BCP 47. Internet Best 1.4138 + Current Practice. Currently represented by RFC 5646. URL: <a 1.4139 + href="ftp://ftp.rfc-editor.org/in-notes/bcp/bcp47.txt">ftp://ftp.rfc-editor.org/in-notes/bcp/bcp47.txt</a> 1.4140 + </dd> 1.4141 + <!----> 1.4142 + 1.4143 + <dt id=CSS3UI>[CSS3UI] 1.4144 + 1.4145 + <dd>Tantek Çelik. <a 1.4146 + href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/"><cite>CSS Basic 1.4147 + User Interface Module Level 3 (CSS3 UI).</cite></a> 17 January 2012. W3C 1.4148 + Working Draft. (Work in progress.) URL: <a 1.4149 + href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/">http://www.w3.org/TR/2012/WD-css3-ui-20120117/</a> 1.4150 + </dd> 1.4151 + <!----> 1.4152 + 1.4153 + <dt id=DOM-LEVEL-3-CORE>[DOM-LEVEL-3-CORE] 1.4154 + 1.4155 + <dd>Gavin Nicol; et al. <a 1.4156 + href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407"><cite>Document 1.4157 + Object Model (DOM) Level 3 Core Specification.</cite></a> 7 April 2004. 1.4158 + W3C Recommendation. URL: <a 1.4159 + href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407">http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407</a> 1.4160 + </dd> 1.4161 + <!----> 1.4162 + 1.4163 + <dt id=HTML401>[HTML401] 1.4164 + 1.4165 + <dd>Dave Raggett; Arnaud Le Hors; Ian Jacobs. <a 1.4166 + href="http://www.w3.org/TR/1999/REC-html401-19991224"><cite>HTML 4.01 1.4167 + Specification.</cite></a> 24 December 1999. W3C Recommendation. URL: <a 1.4168 + href="http://www.w3.org/TR/1999/REC-html401-19991224">http://www.w3.org/TR/1999/REC-html401-19991224</a> 1.4169 + </dd> 1.4170 + <!----> 1.4171 + 1.4172 + <dt id=HTML5>[HTML5] 1.4173 + 1.4174 + <dd>Ian Hickson. <a 1.4175 + href="http://www.w3.org/TR/2011/WD-html5-20110525/"><cite>HTML5.</cite></a> 1.4176 + 25 May 2011. W3C Working Draft. (Work in progress.) URL: <a 1.4177 + href="http://www.w3.org/TR/2011/WD-html5-20110525/">http://www.w3.org/TR/2011/WD-html5-20110525/</a> 1.4178 + </dd> 1.4179 + <!----> 1.4180 + 1.4181 + <dt id=MATHML>[MATHML] 1.4182 + 1.4183 + <dd>Patrick Ion; Robert Miner. <a 1.4184 + href="http://www.w3.org/1999/07/REC-MathML-19990707"><cite>Mathematical 1.4185 + Markup Language (MathML) 1.01 Specification.</cite></a> 7 July 1999. W3C 1.4186 + Recommendation. URL: <a 1.4187 + href="http://www.w3.org/1999/07/REC-MathML-19990707">http://www.w3.org/1999/07/REC-MathML-19990707</a> 1.4188 + </dd> 1.4189 + <!----> 1.4190 + 1.4191 + <dt id=RFC4647>[RFC4647] 1.4192 + 1.4193 + <dd>A. Phillips; M. Davis. <a 1.4194 + href="http://www.ietf.org/rfc/rfc4647.txt"><cite>Matching of Language 1.4195 + Tags.</cite></a> September 2006. Internet RFC 4647. URL: <a 1.4196 + href="http://www.ietf.org/rfc/rfc4647.txt">http://www.ietf.org/rfc/rfc4647.txt</a> 1.4197 + </dd> 1.4198 + <!----> 1.4199 + 1.4200 + <dt id=SELECTORS-API2>[SELECTORS-API2] 1.4201 + 1.4202 + <dd>Lachlan Hunt. <a 1.4203 + href="http://www.w3.org/TR/2012/WD-selectors-api2-20120628/"><cite>Selectors 1.4204 + API Level 2.</cite></a> 28 June 2012. W3C Working Draft. (Work in 1.4205 + progress.) URL: <a 1.4206 + href="http://www.w3.org/TR/2012/WD-selectors-api2-20120628/">http://www.w3.org/TR/2012/WD-selectors-api2-20120628/</a> 1.4207 + </dd> 1.4208 + <!----> 1.4209 + 1.4210 + <dt id=SVG11>[SVG11] 1.4211 + 1.4212 + <dd>Erik Dahlström; et al. <a 1.4213 + href="http://www.w3.org/TR/2011/REC-SVG11-20110816/"><cite>Scalable 1.4214 + Vector Graphics (SVG) 1.1 (Second Edition).</cite></a> 16 August 2011. 1.4215 + W3C Recommendation. URL: <a 1.4216 + href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">http://www.w3.org/TR/2011/REC-SVG11-20110816/</a> 1.4217 + </dd> 1.4218 + <!----> 1.4219 + 1.4220 + <dt id=XML-NAMES>[XML-NAMES] 1.4221 + 1.4222 + <dd>Tim Bray; et al. <a 1.4223 + href="http://www.w3.org/TR/2009/REC-xml-names-20091208/"><cite>Namespaces 1.4224 + in XML 1.0 (Third Edition).</cite></a> 8 December 2009. W3C 1.4225 + Recommendation. URL: <a 1.4226 + href="http://www.w3.org/TR/2009/REC-xml-names-20091208/">http://www.w3.org/TR/2009/REC-xml-names-20091208/</a> 1.4227 + </dd> 1.4228 + <!----> 1.4229 + 1.4230 + <dt id=XML10>[XML10] 1.4231 + 1.4232 + <dd>C. M. Sperberg-McQueen; et al. <a 1.4233 + href="http://www.w3.org/TR/2008/REC-xml-20081126/"><cite>Extensible 1.4234 + Markup Language (XML) 1.0 (Fifth Edition).</cite></a> 26 November 2008. 1.4235 + W3C Recommendation. URL: <a 1.4236 + href="http://www.w3.org/TR/2008/REC-xml-20081126/">http://www.w3.org/TR/2008/REC-xml-20081126/</a> 1.4237 + </dd> 1.4238 + <!----> 1.4239 + </dl> 1.4240 + <!--end-informative-->
