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