8000 csswg-drafts/selectors/Overview.html at 161569a5afb788c2ebcdb04c006f2b19cd880a89 · xfq/csswg-drafts · GitHub
Skip to content

Overview.html

Latest commit

 

History

History
3816 lines (3087 loc) · 242 KB

Overview.html

File metadata and controls

3816 lines (3087 loc) · 242 KB
<!DOCTYPE html><html lang=en><head>
<meta content="text/html; charset=utf-8" http-equiv=Content-Type>
<title>Selectors Level 4</title>
<link href=../default.css rel=stylesheet type=text/css>
<link href=../csslogo.ico rel="shortcut icon" type=image/x-icon>
<style>
body {
background: url("https://www.w3.org/StyleSheets/TR/logo-ED") top left no-repeat white;
background-attachment: fixed;
color: black;
font-family: sans-serif;
margin: 0 auto;
max-width: 50em;
padding: 2em 1em 2em 70px;
}
:link { color: #00C; background: transparent }
:visited { color: #609; background: transparent }
a[href]:active { color: #C00; background: transparent }
a[href]:hover { background: #ffa }
a[href] img { border-style: none }
h1, h2, h3, h4, h5, h6 { text-align: left }
h1, h2, h3 { color: #005A9C; }
h1 { font: 170% sans-serif }
h2 { font: 140% sans-serif }
h3 { font: 120% sans-serif }
h4 { font: bold 100% sans-serif }
h5 { font: italic 100% sans-serif }
h6 { font: small-caps 100% sans-serif }
.hide { display: none }
div.head { margin-bottom: 1em }
div.head h1 { margin-top: 2em; clear: both }
div.head table { margin-left: 2em; margin-top: 2em }
p.copyright { font-size: small }
p.copyright small { font-size: small }
pre { margin-left: 2em }
dt { font-weight: bold }
ul.toc, ol.toc {
list-style: none;
}
</style>
<style>
#selector-examples td:first-child {
white-space: nowrap;
}
</style>
</head>
<body class=h-entry>
<div class=head>
<p data-fill-with=logo><a class=logo href=http://www.w3.org/>
<img alt=W3C height=48 src=https://www.w3.org/Icons/w3c_home width=72>
</a>
</p>
<h1 class="p-name no-ref" id=title>Selectors Level 4</h1>
<h2 class="no-num no-toc no-ref heading settled" id=subtitle><span class=content>Editor’s Draft,
<span class=dt-updated><span class=value-title title=20141113>13 November 2014</span></span></span></h2>
<div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/selectors>http://dev.w3.org/csswg/selectors</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/selectors/>http://www.w3.org/TR/selectors/</a><dt>Previous Versions:<dd><a href=http://www.w3.org/TR/2013/WD-selectors4-20130502/ rel=previous>http://www.w3.org/TR/2013/WD-selectors4-20130502/</a><dd><a href=http://www.w3.org/TR/2012/WD-selectors4-20120823/ rel=previous>http://www.w3.org/TR/2012/WD-selectors4-20120823/</a><dd><a href=http://www.w3.org/TR/2011/WD-selectors4-20110929/ rel=previous>http://www.w3.org/TR/2011/WD-selectors4-20110929/</a><dt>Feedback:<dd><span><a href="mailto:www-style@w3.org?subject=%5Bselectors%5D%20feedback">www-style@w3.org</a> with subject line “<kbd>[selectors] <var>… message topic …</var></kbd>” (<a href=http://lists.w3.org/Archives/Public/www-style/ rel=discussion>archives</a>)</span><dt class=editor>Editors:<dd class=editor><div class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://fantasai.inkedblade.net/contact>Elika J. Etemad</a> (<span class="p-org org">Invited Expert</span>)</div><dd class=editor><div class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://xanthir.com/contact/>Tab Atkins Jr.</a> (<span class="p-org org">Google</span>)</div><dt>Former Editors:<dd><div class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://www.tantek.com>Tantek Çelik</a></div><dd><div class="p-author h-card vcard"><span class="p-name fn">Daniel Glazman</span></div><dd><div class="p-author h-card vcard"><span class="p-name fn">Ian Hickson</span></div><dd><div class="p-author h-card vcard"><span class="p-name fn">Peter Linss</span></div><dd><div class="p-author h-card vcard"><span class="p-name fn">John Williams</span></div></dl></div>
<div data-fill-with=warning></div>
<p class=copyright data-fill-with=copyright><a href=http://www.w3.org/Consortium/Legal/ipr-notice#Copyright>Copyright</a> © 2014 <a href=http://www.w3.org/><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href=http://www.csail.mit.edu/><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href=http://www.ercim.eu/><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href=http://www.keio.ac.jp/>Keio</a>, <a href=http://ev.buaa.edu.cn/>Beihang</a>), All Rights Reserved. W3C <a href=http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer>liability</a>, <a href=http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks>trademark</a> and <a href=http://www.w3.org/Consortium/Legal/copyright-documents>document use</a> rules apply.
</p>
<hr title="Separator for header">
</div>
<h2 class="no-num no-toc no-ref heading settled" id=abstract><span class=content>Abstract</span></h2>
<div class=p-summary data-fill-with=abstract><p><b>Selectors</b> are patterns that match against elements in a tree, and as such form one of several technologies that can be used to select nodes in a document. Selectors have been optimized for use with HTML and XML, and are designed to be usable in performance-critical code. They are a core component of <abbr title="Cascading Style Sheets">CSS</abbr> (Cascading Style Sheets), which uses Selectors to bind style properties to elements in the document.
Selectors Level 4 describes the selectors that already exist in <a data-biblio-type=normative data-link-type=biblio href=#biblio-select title=SELECT>[SELECT]</a>, and further introduces new selectors for CSS and other languages that may need them.</p>
<a href=http://www.w3.org/TR/CSS/>CSS</a> is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, in speech, etc.</div>
<h2 class="no-num no-toc no-ref heading settled" id=status><span class=content>Status of this document</span></h2>
<div data-fill-with=status><p>
This is a public copy of the editors’ draft.
It is provided for discussion only and may change at any moment.
Its publication here does not imply endorsement of its contents by W3C.
Don’t cite this document other than as work in progress.
<p>
The (<a href=http://lists.w3.org/Archives/Public/www-style/>archived</a>) public mailing list
<a href="mailto:www-style@w3.org?Subject=%5Bselectors%5D%20PUT%20SUBJECT%20HERE">www-style@w3.org</a>
(see <a href=http://www.w3.org/Mail/Request>instructions</a>)
is preferred for discussion of this specification.
When sending e-mail,
please put the text “selectors” in the subject,
preferably like this:
“[selectors] <em>…summary of comment…</em>”
<p>
This document was produced by the <a href=http://www.w3.org/Style/CSS/members>CSS Working Group</a>
(part of the <a href=http://www.w3.org/Style/>Style Activity</a>).
<p>
This document was produced by a group operating under
the <a href=http://www.w3.org/Consortium/Patent-Policy-20040205/>5 February 2004 W3C Patent Policy</a>.
W3C maintains a <a href=http://www.w3.org/2004/01/pp-impl/32061/status rel=disclosure>public list of any patent disclosures</a>
made in connection with the deliverables of the group;
that page also includes instructions for disclosing a patent.
An individual who has actual knowledge of a patent which the individual believes contains <a href=http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential>Essential Claim(s)</a>
must disclose the information in accordance with <a href=http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure>section 6 of the W3C Patent Policy</a>.
<p>
This document is governed by the <a href=http://www.w3.org/2014/Process-20140801/>1 August 2014 W3C Process Document</a>.
</div>
<div data-fill-with=at-risk><p>The following features are at-risk, and may be dropped during the CR period:
<ul><li>the column combinator<li>the <a class=css data-link-type=maybe href=#selectordef-drop-function title=:drop()>:drop()</a> pseudo-class<li>the <a class=css data-link-type=maybe href=#read-write-pseudo title=:read-write>:read-write</a> pseudo-class</ul></div>
<h2 class="no-num no-toc no-ref heading settled" id=contents><span class=content>Table of Conten 2343 ts</span></h2>
<div data-fill-with=table-of-contents role=navigation><ul class=toc role=directory><li><a href=#context><span class=secno>1</span> <span class=content>
Introduction</span></a><ul class=toc><li><a href=#placement><span class=secno>1.1</span> <span class=content>Module Interactions</span></a></ul><li><a href=#overview><span class=secno>2</span> <span class=content>
Selectors Overview</span></a><ul class=toc><li><a href=#profiles><span class=secno>2.1</span> <span class=content>
<span data-link-type=dfn title=Fast>Fast</span> vs <span data-link-type=dfn title=Complete>Complete</span> Selector Profiles</span></a></ul><li><a href=#syntax><span class=secno>3</span> <span class=content>
Selector Syntax and Structure</span></a><ul class=toc><li><a href=#structure><span class=secno>3.1</span> <span class=content>
Structure and Terminology</span></a><li><a href=#evaluating-selectors><span class=secno>3.2</span> <span class=content>
Evaluating a Selector</span></a><li><a href=#data-model><span class=secno>3.3</span> <span class=content>
Data Model</span></a><ul class=toc><li><a href=#dom-mapping><span class=secno>3.3.1</span> <span class=content>
Guidance on Mapping Document Languages to DOM</span></a></ul><li><a href=#scoping><span class=secno>3.4</span> <span class=content>
Scoped Selectors</span></a><li><a href=#relative><span class=secno>3.5</span> <span class=content>
Relative Selectors</span></a><ul class=toc><li><a href=#absolutizing><span class=secno>3.5.1</span> <span class=content>
Absolutizing a Relative Selector</span></a></ul><li><a href=#pseudo-classes><span class=secno>3.6</span> <span class=content>
Pseudo-classes</span></a><li><a href=#pseudo-elements><span class=secno>3.7</span> <span class=content>Pseudo-elements</span></a><ul class=toc><li><a href=#pseudo-element-types><span class=secno>3.7.1</span> <span class=content>
Types of Pseudo-Elements</span></a></ul><li><a href=#case-sensitive><span class=secno>3.8</span> <span class=content>
Characters and case sensitivity</span></a><li><a href=#namespaces><span class=secno>3.9</span> <span class=content>
Namespaces</span></a><li><a href=#invalid><span class=secno>3.10</span> <span class=content>
Invalid Selectors and Error Handling</span></a></ul><li><a href=#logical-combination><span class=secno>4</span> <span class=content>
Logical Combinations</span></a><ul class=toc><li><a href=#grouping><span class=secno>4.1</span> <span class=content>
Selector Lists</span></a><li><a href=#matches><span class=secno>4.2</span> <span class=content>
The Matches-Any Pseudo-class: <span class=css data-link-type=maybe title=:matches()>:matches()</span></span></a><li><a href=#negation><span class=secno>4.3</span> <span class=content>
The Negation Pseudo-class: <span class=css data-link-type=maybe title=:not()>:not()</span></span></a><li><a href=#relational><span class=secno>4.4</span> <span class=content>
The Relational Pseudo-class: <span class=css data-link-type=maybe title=:has()>:has()</span></span></a>< 7D67 /ul><li><a href=#elemental-selectors><span class=secno>5</span> <span class=content>
Elemental selectors</span></a><ul class=toc><li><a href=#type-selectors><span class=secno>5.1</span> <span class=content>
Type (tag name) selector</span></a><li><a href=#the-universal-selector><span class=secno>5.2</span> <span class=content>
Universal selector </span></a><li><a href=#type-nmsp><span class=secno>5.3</span> <span class=content>
Namespaces in Selectors</span></a></ul><li><a href=#attribute-selectors><span class=secno>6</span> <span class=content>
Attribute selectors</span></a><ul class=toc><li><a href=#attribute-representation><span class=secno>6.1</span> <span class=content>
Attribute presence and value selectors</span></a><li><a href=#attribute-substrings><span class=secno>6.2</span> <span class=content>
Substring matching attribute selectors</span></a><li><a href=#attribute-case><span class=secno>6.3</span> <span class=content>
Case-sensitivity</span></a><li><a href=#attrnmsp><span class=secno>6.4</span> <span class=content>
Attribute selectors and namespaces</span></a><li><a href=#def-values><span class=secno>6.5</span> <span class=content>
Default attribute values in DTDs</span></a><li><a href=#class-html><span class=secno>6.6</span> <span class=content>
Class selectors</span></a><li><a href=#id-selectors><span class=secno>6.7</span> <span class=content>
ID selectors</span></a></ul><li><a href=#linguistic-pseudos><span class=secno>7</span> <span class=content>
Linguistic Pseudo-classes</span></a><ul class=toc><li><a href=#the-dir-pseudo><span class=secno>7.1</span> <span class=content>
The directionality pseudo-class <span class=css data-link-type=maybe title=:dir()>:dir()</span></span></a><li><a href=#the-lang-pseudo><span class=secno>7.2</span> <span class=content>
The language pseudo-class <span class=css data-link-type=maybe title=:lang()>:lang()</span></span></a></ul><li><a href=#location><span class=secno>8</span> <span class=content>
Location Pseudo-classes</span></a><ul class=toc><li><a href=#the-any-link-pseudo><span class=secno>8.1</span> <span class=content>
The hyperlink pseudo-class: <span class=css data-link-type=maybe title=:any-link>:any-link</span></span></a><li><a href=#link><span class=secno>8.2</span> <span class=content>
The link history pseudo-classes: <span class=css data-link-type=maybe title=:link>:link</span> and <span class=css data-link-type=maybe title=:visited>:visited</span></span></a><li><a href=#the-target-pseudo><span class=secno>8.3</span> <span class=content>
The target pseudo-class <span class=css data-link-type=maybe title=:target>:target</span></span></a><li><a href=#the-scope-pseudo><span class=secno>8.4</span> <span class=content>
The reference element pseudo-class <span class=css data-link-type=maybe title=:scope>:scope</span></span></a></ul><li><a href=#useraction-pseudos><span class=secno>9</span> <span class=content>
User Action Pseudo-classes</span></a><ul class=toc><li><a href=#the-hover-pseudo><span class=secno>9.1</span> <span class=content>
The pointer hover pseudo-class <span class=css data-link-type=maybe title=:hover>:hover</span></span></a><li><a href=#the-active-pseudo><span class=secno>9.2</span> <span class=content>
The activation pseudo-class <span class=css data-link-type=maybe title=:active>:active</span></span></a><li><a href=#the-focus-pseudo><span class=secno>9.3</span> <span class=content>
The input focus pseudo-class <span class=css data-link-type=maybe title=:focus>:focus</span></span></a><li><a href=#drag-pseudos><span class=secno>9.4</span> <span class=content>
The drag-and-drop pseudo-class <span class=css data-link-type=maybe title=:drop>:drop</span> and <span class=css data-link-type=maybe title=:drop()>:drop()</span></span></a></ul><li><a href=#time-pseudos><span class=secno>10</span> <span class=content>
Time-dimensional Pseudo-classes</span></a><ul class=toc><li><a href=#the-current-pseudo><span class=secno>10.1</span> <span class=content>
The current-element pseudo-class <span class=css data-link-type=maybe title=:current>:current</span></span></a><li><a href=#the-past-pseudo><span class=secno>10.2</span> <span class=content>
The past-element pseudo-class <span class=css data-link-type=maybe title=:past>:past</span></span></a><li><a href=#the-future-pseudo><span class=secno>10.3</span> <span class=content>
The future-element pseudo-class <span class=css data-link-type=maybe title=:future>:future</span></span></a></ul><li><a href=#input-pseudos><span class=secno>11</span> <span class=content>
The Input Pseudo-classes</span></a><ul class=toc><li><a href=#input-states><span class=secno>11.1</span> <span class=content>
Input Control States</span></a><ul class=toc><li><a href=#enableddisabled><span class=secno>11.1.1</span> <span class=content>
The <span class=css data-link-type=maybe title=:enabled>:enabled</span> and <span class=css data-link-type=maybe title=:disabled>:disabled</span> pseudo-classes</span></a><li><a href=#rw-pseudos><span class=secno>11.1.2</span> <span class=content>
The mutability pseudo-classes <span class=css data-link-type=maybe title=:read-only>:read-only</span> and <span class=css data-link-type=maybe title=:read-write>:read-write</span></span></a><li><a href=#placeholder><span class=secno>11.1.3</span> <span class=content>
The placeholder-shown pseudo-class <span class=css data-link-type=maybe title=:placeholder-shown>:placeholder-shown</span></span></a><li><a href=#the-default-pseudo><span class=secno>11.1.4</span> <span class=content>
The default-option pseudo-class <span class=css data-link-type=maybe title=:default>:default</span></span></a></ul><li><a href=#input-value-states><span class=secno>11.2</span> <span class=content>
Input Value States</span></a><ul class=toc><li><a href=#checked><span class=secno>11.2.1</span> <span class=content>
The selected-option pseudo-class <span class=css data-link-type=maybe title=:checked>:checked</span></span></a><li><a href=#indeterminate><span class=secno>11.2.2</span> <span class=content>
The indeterminate-value pseudo-class <span class=css data-link-type=maybe title=:indeterminate>:indeterminate</span></span></a></ul><li><a href=#ui-validity><span class=secno>11.3</span> <span class=content>
Input Value-checking</span></a><ul class=toc><li><a href=#validity-pseudos><span class=secno>11.3.1</span> <span class=content>
The validity pseudo-classes: <span class=css data-link-type=maybe title=:valid>:valid</span> and <span class=css data-link-type=maybe title=:invalid>:invalid</span></span></a><li><a href=#range-pseudos><span class=secno>11.3.2</span> <span class=content>
The range pseudo-classes <span class=css data-link-type=maybe title=:in-range>:in-range</span> and <span class=css data-link-type=maybe title=:out-of-range>:out-of-range</span></span></a><li><a href=#opt-pseudos><span class=secno>11.3.3</span> <span class=content>
The optionality pseudo-classes <span class=css data-link-type=maybe title=:required>:required</span> and <span class=css data-link-type=maybe title=:optional>:optional</span></span></a><li><a href=#user-pseudos><span class=secno>11.3.4</span> <span class=content>
The user-interaction pseudo-class <span class=css data-link-type=maybe title=:user-error>:user-error</span></span></a></ul></ul><li><a href=#structural-pseudos><span class=secno>12</span> <span class=content>
Tree-Structural pseudo-classes</span></a><ul class=toc><li><a href=#the-root-pseudo><span class=secno>12.1</span> <span class=content>
<span class=css data-link-type=maybe title=:root>:root</span> pseudo-class</span></a><li><a href=#the-empty-pseudo><span class=secno>12.2</span> <span class=content>
<span class=css data-link-type=maybe title=:empty>:empty</span> pseudo-class</span></a><li><a href=#the-blank-pseudo><span class=secno>12.3</span> <span class=content>
<span class=css data-link-type=maybe title=:blank>:blank</span> pseudo-class</span></a><li><a href=#child-index><span class=secno>12.4</span> <span class=content>
Child-indexed Pseudo-classes</span></a><ul class=toc><li><a href=#the-nth-child-pseudo><span class=secno>12.4.1</span> <span class=content>
<span class=css data-link-type=maybe title=:nth-child()>:nth-child()</span> pseudo-class</span></a><li><a href=#the-nth-last-child-pseudo><span class=secno>12.4.2</span> <span class=content>
<span class=css data-link-type=maybe title=:nth-last-child()>:nth-last-child()</span> pseudo-class</span></a><li><a href=#the-first-child-pseudo><span class=secno>12.4.3</span> <span class=content>
<span class=css data-link-type=maybe title=:first-child>:first-child</span> pseudo-class</span></a><li><a href=#the-last-child-pseudo><span class=secno>12.4.4</span> <span class=content>
<span class=css data-link-type=maybe title=:last-child>:last-child</span> pseudo-class</span></a><li><a href=#the-only-child-pseudo><span class=secno>12.4.5</span> <span class=content>
<span class=css data-link-type=maybe title=:only-child>:only-child</span> pseudo-class</span></a></ul><li><a href=#typed-child-index><span class=secno>12.5</span> <span class=content>
Typed Child-indexed Pseudo-classes</span></a><ul class=toc><li><a href=#the-nth-of-type-pseudo><span class=secno>12.5.1</span> <span class=content>
<span class=css data-link-type=maybe title=:nth-of-type()>:nth-of-type()</span> pseudo-class</span></a><li><a href=#the-nth-last-of-type-pseudo><span class=secno>12.5.2</span> <span class=content>
<span class=css data-link-type=maybe title=:nth-last-of-type()>:nth-last-of-type()</span> pseudo-class</span></a><li><a href=#the-first-of-type-pseudo><span class=secno>12.5.3</span> <span class=content>
<span class=css data-link-type=maybe title=:first-of-type>:first-of-type</span> pseudo-class</span></a><li><a href=#the-last-of-type-pseudo><span class=secno>12.5.4</span> <span class=content>
<span class=css data-link-type=maybe title=:last-of-type>:last-of-type</span> pseudo-class</span></a><li><a href=#the-only-of-type-pseudo><span class=secno>12.5.5</span> <span class=content>
<span class=css data-link-type=maybe title=:only-of-type>:only-of-type</span> pseudo-class</span></a></ul></ul><li><a href=#combinators><span class=secno>13</span> <span class=content>
Combinators</span></a><ul class=toc><li><a href=#descendant-combinators><span class=secno>13.1</span> <span class=content>
Descendant combinator (<code> </code>)</span></a><li><a href=#child-combinators><span class=secno>13.2</span> <span class=content>
Child combinator (<code>&gt;</code>)</span></a><li><a href=#adjacent-sibling-combinators><span class=secno>13.3</span> <span class=content>
Next-sibling combinator (<code>+</code>)</span></a><li><a href=#general-sibling-combinators><span class=secno>13.4</span> <span class=content>
Following-sibling combinator (<code>~</code>)</span></a></ul><li><a href=#table-pseudos><span class=secno>14</span> <span class=content>
Grid-Structural Selectors</span></a><ul class=toc><li><a href=#the-column-combinator><span class=secno>14.1</span> <span class=content>
Column combinator</span></a><li><a href=#the-nth-column-pseudo><span class=secno>14.2</span> <span class=content>
<span class=css data-link-type=maybe title=:nth-column()>:nth-column()</span> pseudo-class</span></a><li><a href=#the-nth-last-column-pseudo><span class=secno>14.3</span> <span class=content>
<span class=css data-link-type=maybe title=:nth-last-column()>:nth-last-column()</span> pseudo-class</span></a></ul><li><a href=#specificity><span class=secno>15</span> <span class=content>
Calculating a selector’s specificity</span></a><li><a href=#grammar><span class=secno>16</span> <span class=content><span></span>
Grammar</span></a><li><a href=#api-hooks><span class=secno>17</span> <span class=content>
API Hooks</span></a><ul class=toc><li><a href=#parse-selector><span class=secno>17.1</span> <span class=content>
Parse A Selector</span></a><li><a href=#parse-relative-selector><span class=secno>17.2</span> <span class=content>
Parse A Relative Selector</span></a><li><a href=#match-against- 8E59 tree><span class=secno>17.3</span> <span class=content>
Match a Selector Against A Tree</span></a><li><a href=#match-against-element><span class=secno>17.4</span> <span class=content>
Match a Selector Against an Element</span></a></ul><li><a href=#changes><span class=secno>18</span> <span class=content>
Changes</span></a><li><a href=#acknowledgements><span class=secno>19</span> <span class=content>
Acknowledgements</span></a><li><a href=#conformance><span class=secno></span> <span class=content>
Conformance</span></a><ul class=toc><li><a href=#conventions><span class=secno></span> <span class=content>
Document conventions</span></a><li><a href=#conformance-classes><span class=secno></span> <span class=content>
Conformance classes</span></a><li><a href=#partial><span class=secno></span> <span class=content>
Partial implementations</span></a><li><a href=#experimental><span class=secno></span> <span class=content>
Experimental implementations</span></a><li><a href=#testing><span class=secno></span> <span class=content>
Non-experimental implementations</span></a></ul><li><a href=#references><span class=secno></span> <span class=content>References</span></a><ul class=toc><li><a href=#normative><span class=secno></span> <span class=content>Normative References</span></a><li><a href=#informative><span class=secno></span> <span class=content>Informative References</span></a></ul><li><a href=#index><span class=secno></span> <span class=content>Index</span></a><li><a href=#issues-index><span class=secno></span> <span class=content>Issues Index</span></a></ul></div>
<main>
<h2 class="heading settled" data-level=1 id=context><span class=secno>1. </span><span class=content>
Introduction</span><a class=self-link href=#context></a></h2>
<p><em>This section is not normative.</em></p>
<p>A selector is a boolean predicate
that takes an element in a tree structure
and tests whether the element matches the selector or not.</p>
<p>These expressions may be used for many things:</p>
<ul>
<li>
directly on an element to test whether it matches some criteria,
such as in the <code>element.matches()</code> function defined in <a data-biblio-type=informative data-link-type=biblio href=#biblio-dom title=DOM>[DOM]</a>
<li>
applied to an entire tree of elements
to filter it into a set of elements that match the criteria,
such as in the <code>document.queryAll()</code> function defined in <a data-biblio-type=informative data-link-type=biblio href=#biblio-dom title=DOM>[DOM]</a>
or the selector of a CSS style rule.
<li>
used "in reverse" to generate markup that would match a given selector,
such as in <a href=http://haml.info/>HAML</a> or <a href=http://en.wikipedia.org/wiki/Zen_Coding>Zen Coding</a>
</ul>
<p>Selectors Levels 1, 2, and 3 are defined as the subsets of selector
functionality defined in the <a href=http://www.w3.org/TR/REC-CSS1>CSS1</a>,
<a href=http://www.w3.org/TR/CSS21/>CSS2.1</a>, and
<a href=http://www.w3.org/TR/css3-selectors/>Selectors Level 3</a>
specifications, respectively. This module defines Selectors Level 4.</p>
<h3 class="heading settled" data-level=1.1 id=placement><span class=secno>1.1. </span><span class=content>Module Interactions</span><a class=self-link href=#placement></a></h3>
<p>This module replaces the definitions of
and extends the set of selectors defined for CSS in <a data-biblio-type=informative data-link-type=biblio href=#biblio-select title=SELECT>[SELECT]</a> and <a data-biblio-type=informative data-link-type=biblio href=#biblio-css21 title=CSS21>[CSS21]</a>.</p>
<p>Pseudo-element selectors,
which define abstract elements in a rendering tree,
are not part of this specification:
their generic syntax is described here,
but, due to their close integration with the rendering model and irrelevance to other uses such as DOM queries,
they will be defined in other modules.</p>
<h2 class="heading settled" data-level=2 id=overview><span class=secno>2. </span><span class=content>
Selectors Overview</span><a class=self-link href=#overview></a></h2>
<p><em>This section is non-normative, as it merely summarizes the
following sections.</em></p>
<p>A selector represents a structure. This structure can be used as a
condition (e.g. in a CSS rule) that determines which elements a
selector matches in the document tree, or as a flat description of the
HTML or XML fragment corresponding to that structure.</p>
<p>Selectors may range from simple element names to rich contextual
representations.</p>
<p>The following table summarizes the Selector syntax:</p>
<table class=data id=selector-examples>
<col class=pattern>
<col class=meaning>
<col class=section>
<col class=level>
<thead>
<tr>
<th>Pattern
<th>Represents
<th>Section
<th>Level
<tbody>
<tr>
<td><code>*</code>
<td>any element
<td><a data-section="" href=#the-universal-selector>§5.2
Universal selector </a>
<td>2
<tr>
<td><code>E</code>
<td>an element of type E
<td><a data-section="" href=#type-selectors>§5.1
Type (tag name) selector</a>
<td>1
<tbody>
<tr>
<td><code>E:not(<var>s1</var>, <var>s2</var>)</code>
<td>an E element that does not match either <a data-link-type=dfn href=#compound title="compound selector">compound selector</a> <var>s1</var>
or <a data-link-type=dfn href=#compound title="compound selector">compound selector</a> <var>s2</var>
<td><a data-section="" href=#negation>§4.3
The Negation Pseudo-class: :not()</a>
<td>3/4
<tr>
<td><code>E:matches(<var>s1</var>, <var>s2</var>)</code>
<td>an E element that matches <a data-link-type=dfn href=#compound title="compound selector">compound selector</a> <var>s1</var>
and/or <a data-link-type=dfn href=#compound title="compound selector">compound selector</a> <var>s2</var>
<td><a data-section="" href=#matches>§4.2
The Matches-Any Pseudo-class: :matches()</a>
<td>4
<tr>
<td><code>E:has(<var>rs1</var>, <var>rs2</var>)</code>
<td>an E element,
if either of the <a data-link-type=dfn href=#relative-selector title="relative selectors">relative selectors</a> <var>rs1</var> or <var>rs2</var>,
when evaluated with E as the <a data-link-type=dfn href=#scope-element title=":scope elements">:scope elements</a>,
match an element
<td><a data-section="" href=#relational>§4.4
The Relational Pseudo-class: :has()</a>
<td>4
<tbody>
<tr>
<td><code>E.warning</code>
<td>an E element belonging to the class <code>warning</code>
(the document language specifies how class is determined).
<td><a data-section="" href=#class-html>§6.6
Class selectors</a>
<td>1
<tr>
<td><code>E#myid</code>
<td>an E element with ID equal to <code>myid</code>.
<td><a data-section="" href=#id-selectors>§6.7
ID selectors</a>
<td>1
<tr>
<td><code>E[foo]</code>
<td>an E element with a <code>foo</code> attribute
<td><a data-section="" href=#attribute-selectors>§6
Attribute selectors</a>
<td>2
<tr>
<td><code>E[foo="bar"]</code>
<td>an E element whose <code>foo</code> attribute value is
exactly equal to <code>bar</code>
<td><a data-section="" href=#attribute-selectors>§6
Attribute selectors</a>
<td>2
<tr>
<td><code>E[foo="bar" i]</code>
<td>an E element whose <code>foo</code> attribute value is
exactly equal to any (ASCII-range) case-permutation of <code>bar</code>
<td><a data-section="" href=#attribute-case>§6.3
Case-sensitivity</a>
<td>4
<tr>
<td><code>E[foo~="bar"]</code>
<td>an E element whose <code>foo</code> attribute value is
a list of whitespace-separated values, one of which is
exactly equal to <code>bar</code>
<td><a data-section="" href=#attribute-selectors>§6
Attribute selectors</a>
<td>2
<tr>
<td><code>E[foo^="bar"]</code>
<td>an E element whose <code>foo</code> attribute value
begins exactly with the string "bar"
<td><a data-section="" href=#attribute-substrings>§6.2
Substring matching attribute selectors</a>
<td>3
<tr>
<td><code>E[foo$="bar"]</code>
<td>an E element whose <code>foo</code> attribute value
ends exactly with the string <code>bar</code>
<td><a data-section="" href=#attribute-substrings>§6.2
Substring matching attribute selectors</a>
<td>3
<tr>
<td><code>E[foo*="bar"]</code>
<td>an E element whose <code>foo</code> attribute value
contains the substring <code>bar</code>
<td><a data-section="" href=#attribute-substrings>§6.2
Substring matching attribute selectors</a>
<td>3
<tr>
<td><code>E[foo|="en"]</code>
<td>an E element whose <code>foo</code> attribute value is
a hyphen-separated list of values beginning with <code>en</code>
<td><a data-section="" href=#attribute-selectors>§6
Attribute selectors</a>
<td>2
<tbody>
<tr>
<td><code>E:dir(ltr)</code>
<td>an element of type E in with left-to-right directionality
(the document language specifies how directionality is determined)
<td><a data-section="" href=#the-dir-pseudo>§7.1
The directionality pseudo-class :dir()</a>
<td>4
<tr>
<td><code>E:lang(zh, *-hant)</code>
<td>an element of type E tagged as being either in Chinese
(any dialect or writing system)
or othewise written with traditional Chinese characters
<td><a data-section="" href=#the-lang-pseudo>§7.2
The language pseudo-class :lang()</a>
<td>2/4
<tbody>
<tr>
<td><code>E:any-link</code>
<td>an E element being the source anchor of a hyperlink
<td><a data-section="" href=#the-any-link-pseudo>§8.1
The hyperlink pseudo-class: :any-link</a>
<td>4
<tr>
<td><code>E:link</code>
<td>an E element being the source anchor of a hyperlink
of which the target is not yet visited
<td><a data-section="" href=#link>§8.2
The link history pseudo-classes: :link and :visited</a>
<td>1
<tr>
<td><code>E:visited</code>
<td>an E element being the source anchor of a hyperlink
of which the target is already visited
<td><a data-section="" href=#link>§8.2
The link history pseudo-classes: :link and :visited</a>
<td>1
<tr>
<td><code>E:target</code>
<td>an E element being the target of the referring URL
<td><a data-section="" href=#the-target-pseudo>§8.3
The target pseudo-class :target</a>
<td>3
<tr>
<td><code>E:scope</code>
<td>an E element being a designated reference element
<td><a data-section="" href=#the-scope-pseudo>§8.4
The reference element pseudo-class :scope</a>
<td>4
<tbody>
<tr>
<td><code>E:current</code>
<td>an E element that is currently presented in a time-dimensional canvas
<td><a data-section="" href=#time-pseudos>§10
Time-dimensional Pseudo-classes</a>
<td>4
<tr>
<td><code>E:current(<var>s</var>)</code>
<td>an E element that is the deepest <a class=css data-link-type=maybe href=#current-pseudo title=:current>:current</a> element that
matches selector <var>s</var>
<td><a data-section="" href=#time-pseudos>§10
Time-dimensional Pseudo-classes</a>
<td>4
<tr>
<td><code>E:past</code>
<td>an E element that is in the past in a time-dimensional canvas
<td><a data-section="" href=#time-pseudos>§10
Time-dimensional Pseudo-classes</a>
<td>4
<tr>
<td><code>E:future</code>
<td>an E element that is in the future in a time-dimensional canvas
<td><a data-section="" href=#time-pseudos>§10
Time-dimensional Pseudo-classes</a>
<td>4
<tbody>
<tr>
<td><code>E:active</code>
<td>an E element that is in an activated state
<td><a data-section="" href=#useraction-pseudos>§9
User Action Pseudo-classes</a>
<td>1
<tr>
<td><code>E:hover</code>
<td>an E element that is under the cursor,
or that has a descendant under the cursor
<td><a data-section="" href=#useraction-pseudos>§9
User Action Pseudo-classes</a>
<td>2
<tr>
<td><code>E:focus</code>
<td>an E element that has user input focus
<td><a data-section="" href=#useraction-pseudos>§9
User Action Pseudo-classes</a>
<td>2
<tr>
<td><code>E:drop</code>
<td>an E element that can possibly receieve a drop
<td><a data-section="" href=#drag-pseudos>§9.4
The drag-and-drop pseudo-class :drop and :drop()</a>
<td>4
<tr>
<td><code>E:drop(active)</code>
<td>an E element that is the current drop target for the item being dragged
<td><a data-section="" href=#drag-pseudos>§9.4
The drag-and-drop pseudo-class :drop and :drop()</a>
<td>4
<tr>
<td><code>E:drop(valid)</code>
<td>an E element that could receive the item currently being dragged
<td><a data-section="" href=#drag-pseudos>§9.4
The drag-and-drop pseudo-class :drop and :drop()</a>
<td>4
<tr>
<td><code>E:drop(invalid)</code>
<td>an E element that cannot receive the item currently being dragged, but could receive some other item
<td><a data-section="" href=#drag-pseudos>§9.4
The drag-and-drop pseudo-class :drop and :drop()</a>
<td>4
<tbody>
<tr>
<td><code>E:enabled<br>E:disabled</code>
<td>a user interface element E that is enabled or disabled, respectively
<td><a data-section="" href=#enableddisabled>§11.1.1
The :enabled and :disabled pseudo-classes</a>
<td>3
<tr>
<td><code>E:read-only</code><br><code>E:read-write</code>
<td>a user interface element E that
<td><a data-section="" href=#rw-pseudos>§11.1.2
The mutability pseudo-classes :read-only and :read-write</a>
<td>3-UI/4
<tr>
<td><code>E:placeholder-shown</code>
<td>an input control currently showing placeholder text
<td><a data-section="" href=#rw-pseudos>§11.1.2
The mutability pseudo-classes :read-only and :read-write</a>
<td>3-UI/4
<tr>
<td><code>E:default</code>
<td>a user interface element E that
<td><a data-section="" href=#the-default-pseudo>§11.1.4
The default-option pseudo-class :default</a>
<td>3-UI/4
<tr>
<td><code>E:checked</code>
<td>a user interface element E that is checked/selected
(for instance a radio-button or checkbox)
<td><a data-section="" href=#checked>§11.2.1
The selected-option pseudo-class :checked</a>
<td>3
<tr>
<td><code>E:indeterminate</code>
<td>a user interface element E that is in an indeterminate state
(neither checked nor unchecked)
<td><a data-section="" href=#indeterminate>§11.2.2
The indeterminate-value pseudo-class :indeterminate</a>
<td>4
<tr>
<td><code>E:valid</code><br><code>E:invalid</code>
<td>a user-input element E that
<td><a data-section="" href=#range-pseudos>§11.3.2
The range pseudo-classes :in-range and :out-of-range</a>
<td>3-UI/4
<tr>
<td><code>E:in-range</code><br><code>E:out-of-range</code>
<td>a user-input element E whose value is in-range/out-of-range
<td><a data-section="" href=#range-pseudos>§11.3.2
The range pseudo-classes :in-range and :out-of-range</a>
<td>3-UI/4
<tr>
<td><code>E:required</code><br><code>E:optional</code>
<td>a user-input element E that requires/does not require input
<td><a data-section="" href=#opt-pseudos>§11.3.3
The optionality pseudo-classes :required and :optional</a>
<td>3-UI/4
<tr>
<td><code>E:required</code><br><code>E:optional</code>
<td>a user-input element E with incorrect input
<td><a data-section="" href=#opt-pseudos>§11.3.3
The optionality pseudo-classes :required and :optional</a>
<td>4
<tbody>
<tr>
<td><code>E:root</code>
<td>an E element, root of the document
<td><a data-section="" href=#structural-pseudos>§12
Tree-Structural pseudo-classes 1251 </a>
<td>3
<tr>
<td><code>E:empty</code>
<td>an E element that has no children (not even text nodes)
<td><a data-section="" href=#structural-pseudos>§12
Tree-Structural pseudo-classes</a>
<td>3
<tr>
<td><code>E:blank</code>
<td>an E element that has no content except maybe white space
<td><a data-section="" href=#structural-pseudos>§12
Tree-Structural pseudo-classes</a>
<td>4
<tr>
<td><code>E:nth-child(<var>n</var> [of <var>sel</var>]?)</code>
<td>an E element, the <var>n</var>-th child of its parent matching <var>sel</var>
<td><a data-section="" href=#child-index>§12.4
Child-indexed Pseudo-classes</a>
<td>3
<tr>
<td><code>E:nth-last-child(<var>n</var> [of <var>sel</var>]?)</code>
<td>an E element, the <var>n</var>-th child of its parent matching <var>sel</var>,
counting from the last one
<td><a data-section="" href=#child-index>§12.4
Child-indexed Pseudo-classes</a>
<td>3
<tr>
<td><code>E:first-child</code>
<td>an E element, first child of its parent
<td><a data-section="" href=#child-index>§12.4
Child-indexed Pseudo-classes</a>
<td>2
<tr>
<td><code>E:last-child</code>
<td>an E element, last child of its parent
<td><a data-section="" href=#child-index>§12.4
Child-indexed Pseudo-classes</a>
<td>3
<tr>
<td><code>E:only-child</code>
<td>an E element, only child of its parent
<td><a data-section="" href=#child-index>§12.4
Child-indexed Pseudo-classes</a>
<td>3
<tr>
<td><code>E:nth-of-type(<var>n</var>)</code>
<td>an E element, the <var>n</var>-th sibling of its type
<td><a data-section="" href=#typed-child-index>§12.5
Typed Child-indexed Pseudo-classes</a>
<td>3
<tr>
<td><code>E:nth-last-of-type(<var>n</var>)</code>
<td>an E element, the <var>n</var>-th sibling of its type,
counting from the last one
<td><a data-section="" href=#typed-child-index>§12.5
Typed Child-indexed Pseudo-classes</a>
<td>3
<tr>
<td><code>E:first-of-type</code>
<td>an E element, first sibling of its type
<td><a data-section="" href=#typed-child-index>§12.5
Typed Child-indexed Pseudo-classes</a>
<td>3
<tr>
<td><code>E:last-of-type</code>
<td>an E element, last sibling of its type
<td><a data-section="" href=#typed-child-index>§12.5
Typed Child-indexed Pseudo-classes</a>
<td>3
<tr>
<td><code>E:only-of-type</code>
<td>an E element, only sibling of its type
<td><a data-section="" href=#typed-child-index>§12.5
Typed Child-indexed Pseudo-classes</a>
<td>3
<tbody>
<tr>
<td><code>E F</code>
<td>an F element descendant of an E element
<td><a data-section="" href=#descendant-combinators>§13.1
Descendant combinator ( )</a>
<td>1
<tr>
<td><code>E &gt; F</code>
<td>an F element child of an E element
<td><a data-section="" href=#child-combinators>§13.2
Child combinator (&gt;)</a>
<td>2
<tr>
<td><code>E + F</code>
<td>an F element immediately preceded by an E element
<td><a data-section="" href=#adjacent-sibling-combinators>§13.3
Next-sibling combinator (+)</a>
<td>2
<tr>
<td><code>E ~ F</code>
<td>an F element preceded by an E element
<td><a data-section="" href=#general-sibling-combinators>§13.4
Following-sibling combinator (~)</a>
<td>3
<tbody>
<tr>
<td><code>F || E</code>
<td>an E element that represents a cell in a grid/table
belonging to a column represented by an element F
<td><a data-section="" href=#table-pseudos>§14
Grid-Structural Selectors</a>
<td>4
<tr>
<td><code>E:nth-column(<var>n</var>)</code>
<td>an E element that represents a cell belonging to the
<var>n</var>th column in a grid/table
<td><a data-section="" href=#table-pseudos>§14
Grid-Structural Selectors</a>
<td>4
<tr>
<td><code>E:nth-last-column(<var>n</var>)</code>
<td>an E element that represents a cell belonging to the
<var>n</var>th column in a grid/table, counting from the last one
<td><a data-section="" href=#table-pseudos>§14
Grid-Structural Selectors</a>
<td>4
</table>
<p class=note role=note>Note: Some Level 4 selectors (noted above as "3-UI") were introduced in <a data-biblio-type=informative data-link-type=biblio href=#biblio-css3ui title=CSS3UI>[CSS3UI]</a>.</p>
<h3 class="heading settled" data-level=2.1 id=profiles><span class=secno>2.1. </span><span class=content>
<a data-link-type=dfn href=#fast-profile title=Fast>Fast</a> vs <a data-link-type=dfn href=#complete-profile title=Complete>Complete</a> Selector Profiles</span><a class=self-link href=#profiles></a></h3>
<p>Selectors are used in many different contexts,
with wildly varying performance characteristics.
Some powerful selectors are unfortunately too slow
to realistically include in the more performance-sensitive contexts.
To accommodate this, two profiles of the Selectors spec are defined:</p>
<dl>
<dt><dfn data-dfn-type=dfn data-noexport="" id=fast-profile>fast<a class=self-link href=#fast-profile></a></dfn>
<dd>
The <a data-link-type=dfn href=#fast-profile title=fast>fast</a> profile is appropriate for use in any context,
including dynamic browser CSS selector matching.
It includes every selector defined in this document,
except for:
<ul>
<li>The <a class=css data-link-type=maybe href=#has-pseudo title=:has()>:has()</a> pseudo-class
</ul>
<dt><dfn data-dfn-type=dfn data-noexport="" id=complete-profile>complete<a class=self-link href=#complete-profile></a></dfn>
<dd>
The <a data-link-type=dfn href=#complete-profile title=complete>complete</a> profile is appropriate for contexts which aren’t extremely performance sensitive.
For example, the <a class=idl-code data-link-for=Element data-link-type=method title=query()>query()</a> method defined in <a data-biblio-type=informative data-link-type=biblio href=#biblio-dom title=DOM>[DOM]</a> should use the <span class=css>complete</span> profile.
It includes all of the selectors defined in this document.
</dl>
<p>CSS implementations conformant to Selectors Level 4 must use the <span class=css>fast</span> profile for CSS selection.</p>
<p class=issue id=issue-cbdc0c66><a class=self-link href=#issue-cbdc0c66></a>
The categorization of things into the "fast" or "complete" profiles needs implementor review.
If some things currently not in the fast profile can reasonably be done in CSS Selectors,
we should move them.
<h2 class="heading settled" data-level=3 id=syntax><span class=secno>3. </span><span class=content>
Selector Syntax and Structure</span><a class=self-link href=#syntax></a></h2>
<h3 class="heading settled" data-level=3.1 id=structure><span class=secno>3.1. </span><span class=content>
Structure and Terminology</span><a class=self-link href=#structure></a></h3>
<p>The term <dfn data-dfn-type=dfn data-export="" id=selector>selector<a class=self-link href=#selector></a></dfn> can refer to a <a data-link-type=dfn href=#simple title="simple selector">simple selector</a>,
<a data-link-type=dfn href=#compound title="compound selector">compound selector</a>, <a data-link-type=dfn href=#complex title="complex selector">complex selector</a>, or <a data-link-type=dfn href=#selector-list title="selector list">selector list</a>.</p>
<p>A <a data-link-type=dfn href=#selector-list title="selector list">selector list</a> is a comma-separated list of <a data-link-type=dfn href=#selector title=selectors>selectors</a>;
see <a href=#grouping>Selector Lists</a>.</p>
<p>A <dfn data-dfn-type=dfn data-export="" id=complex>complex selector<a class=self-link href=#complex></a></dfn> is a sequence of one or more <a data-link-type=dfn href=#compound title="compound selectors">compound selectors</a>
separated by <a data-link-type=dfn href=#combinator title=combinators>combinators</a>.</p>
<p>A <dfn data-dfn-type=dfn data-export="" id=compound>compound selector<a class=self-link href=#compound></a></dfn>
is a sequence of <a data-link-type=dfn href=#simple title="simple selectors">simple selectors</a>
that are not separated by a <a data-link-type=dfn href=#combinator title=combinator>combinator</a>.
If it contains a <a data-link-type=dfn href=#type-selector title="type selector">type selector</a> or <a data-link-type=dfn href=#universal-selector title="universal selector">universal selector</a>,
that selector comes first in the sequence.
Only one type selector or universal selector is allowed in the sequence.</p>
<p>A <dfn data-dfn-type=dfn data-export="" id=simple>simple selector<a class=self-link href=#simple></a></dfn> represents an aspect of an element to be matched against.
A simple selector is either a
<a data-link-type=dfn href=#type-selector title="type selector">type selector</a>,
<a data-link-type=dfn href=#universal-selector title="universal selector">universal selector</a>,
<a data-link-type=dfn href=#attribute-selector title="attribute selector">attribute selector</a>,
<a data-link-type=dfn href=#class-selector title="class selector">class selector</a>,
<a data-link-type=dfn href=#id-selector title="ID selector">ID selector</a>,
or <a data-link-type=dfn href=#pseudo-class title=pseudo-class>pseudo-class</a>.</p>
<p>A <dfn data-dfn-type=dfn data-export="" id=combinator>combinator<a class=self-link href=#combinator></a></dfn> represents a particular kind of relationship
between the elements matched by the <a data-link-type=dfn href=#compound title="compound selectors">compound selectors</a> on either side.
Combinators in Selectors level 4 include:
whitespace,
“greater-than sign” (U+003E, <code>&gt;</code>),
“plus sign” (U+002B, <code>+</code>),
and “tilde” (U+007E, <code>~</code>).</p>
<p class=issue id=issue-2c7c31ce><a class=self-link href=#issue-2c7c31ce></a>Fill in more combinators.</p>
<p>An empty selector,
containing no <a data-link-type=dfn href=#compound title="compound selector">compound selector</a>,
is an <a href=#invalid>invalid selector</a>.</p>
<p class=note role=note>Note: As whitespace is a valid <a data-link-type=dfn href=#combinator title=combinator>combinator</a>,
no whitespace is allowed between the <a data-link-type=dfn href=#simple title="simple selectors">simple selectors</a>
in a <a data-link-type=dfn href=#compound title="compound selector">compound selector</a>.</p>
<h3 class="heading settled" data-level=3.2 id=evaluating-selectors><span class=secno>3.2. </span><span class=content>
Evaluating a Selector</span><a class=self-link href=#evaluating-selectors></a></h3>
<p>This section describes how to <dfn data-dfn-type=dfn data-export="" id=evaluate-a-selector>evaluate a selector<a class=self-link href=#evaluate-a-selector></a></dfn> against a set of elements.</p>
<p>APIs using this algorithm must provide a selector,
and one or more root elements
indicating the trees that will be searched by the selector.
They may optionally provide:</p>
<ul>
<li>
a <a data-link-type=dfn href=#scoping-method title="scoping method">scoping method</a> and <a data-link-type=dfn href=#scoping-root title="scoping root">scoping root</a>.
If not specified, the selector defaults to being unscoped.
<li>
a set of <a data-link-type=dfn href=#scope-element title=":scope elements">:scope elements</a>,
for resolving the <a class=css data-link-type=maybe href=#scope-pseudo title=:scope>:scope</a> pseudo-class against.
If not specified,
the set defaults to being empty.
<p>If the selector is a <a data-link-type=dfn href=#relative-selector title="relative selector">relative selector</a>,
the set of <a data-link-type=dfn href=#scope-element title=":scope elements">:scope elements</a> must not be empty.</p>
<p class=note role=note>Note: Note that if the selector is scoped,
the scoping root is automatically taken as the <a data-link-type=dfn href=#scope-element title=":scope element">:scope element</a>,
so it doesn’t have to be provided explicitly
unless a different result is desired.</p>
<li>
which <a data-link-type=dfn href=#pseudo-element title=pseudo-elements>pseudo-elements</a> are allowed to show up in the match list, if any.
If not specified, this defaults to allowing all pseudo-elements.
</ul>
<p>A <a data-link-type=dfn href=#selector title=selector>selector</a> is evaluated against some initial list of elements:
the <dfn data-dfn-type=dfn data-export="" id=selector-match-list>selector match list<a class=self-link href=#selector-match-list></a></dfn>.
The <a data-link-type=dfn href=#selector-match-list title="selector match list">selector match list</a> is initially populated with the root elements
provided to the algorithm,
and all elements reachable from them by traversing any number of child lists.</p>
<p>If the selector is <a data-link-type=dfn href=#scope-contained title=scope-contained>scope-contained</a>,
the <a data-link-type=dfn href=#selector-match-list title="selector match list">selector match list</a> is immediately filtered
to contain only elements that are either the <a data-link-type=dfn href=#scoping-root title="scoping root">scoping root</a>
or descendants of the <a data-link-type=dfn href=#scoping-root title="scoping root">scoping root</a>.</p> 8096
<p>The selector is processed from left to right in order,
with <a data-link-type=dfn href=#simple title="simple selectors">simple selectors</a> filtering the <a data-link-type=dfn href=#selector-match-list title="selector match list">selector match list</a>,
and <a data-link-type=dfn href=#combinator title=combinators>combinators</a> and <a data-link-type=dfn href=#pseudo-element title=pseudo-elements>pseudo-elements</a> changing the <a data-link-type=dfn href=#selector-match-list title="selector match list">selector match list</a> into something new.
If the selector is <a data-link-type=dfn href=#scope-contained title=scope-contained>scope-contained</a>
then after each <a data-link-type=dfn href=#combinator title=combinator>combinator</a>
the <a data-link-type=dfn href=#selector-match-list title="selector match list">selector match list</a> must be filtered
to contain only elements that are either the <a data-link-type=dfn href=#scoping-root title="scoping root">scoping root</a>
or descendants of the <a data-link-type=dfn href=#scoping-root title="scoping root">scoping root</a>.</p>
<p>If the selector is <a data-link-type=dfn href=#scope-filtered title=scope-filtered>scope-filtered</a>,
then after the selector is finished processing,
the <a data-link-type=dfn href=#selector-match-list title="selector match list">selector match list</a> must be filtered
to contain only elements that are either the <a data-link-type=dfn href=#scoping-root title="scoping root">scoping root</a>
or descendants of the <a data-link-type=dfn href=#scoping-root title="scoping root">scoping root</a>.</p>
<p>After the selector is finished matching,
the <a data-link-type=dfn href=#selector-match-list title="selector match list">selector match list</a> must be filtered
to only contain elements and <a data-link-type=dfn href=#pseudo-element title=pseudo-elements>pseudo-elements</a>
allowed by the invoker of this algorithm.</p>
<p>When this process is done, the elements in the <a data-link-type=dfn href=#selector-match-list title="selector match list">selector match list</a>
are the elements said to match the selector.
If the order of elements matter,
they must be sorted in document order,
unless otherwise specified.</p>
<div class=example>
For example, to evaluate the selector "div &gt; i.name" against a document,
the <a data-link-type=dfn href=#selector-match-list title="selector match list">selector match list</a> is first set to all the elements in the entire document.
Then, the "div" type selector is evaluated, filtering the <a data-link-type=dfn href=#selector-match-list title="selector match list">selector match list</a>
to only contain elements with a tagname of "div".
Then, the "&gt;" child combinator is evaluated, transforming the <a data-link-type=dfn href=#selector-match-list title="selector match list">selector match list</a>
by replacing each element currently in it with the element’s children.
Then, the "i" type selector is evaluated, filtering the <a data-link-type=dfn href=#selector-match-list title="selector match list">selector match list</a>
to only contain elements with a tagname of "i".
Finally, the ".name" class selector is evaluated, filter the <a data-link-type=dfn href=#selector-match-list title="selector match list">selector match list</a>
to only contain elements with a class of "name".
</div>
<p class=note role=note>Note: Many implementations of selectors instead evaluate them right to left,
as it’s more efficient to do so in many cases.
This, as usual, is completely valid,
as long as it results in the same elements being returned
as the spec’s algorithm would.</p>
<p class=issue id=issue-1bcc9de6><a class=self-link href=#issue-1bcc9de6></a>The relative position of pseudo-elements in the <a data-link-type=dfn href=#selector-match-list title="selector match list">selector match list</a> is undefined.
There’s not yet a context that exposes this information,
but we need to decide on something eventually,
before something <em>is</em> exposed.</p>
<h3 class="heading settled" data-level=3.3 id=data-model><span class=secno>3.3. </span><span class=content>
Data Model</span><a class=self-link href=#data-model></a></h3>
<p>Selectors are evaluated against a DOM tree. <a data-biblio-type=normative data-link-type=biblio href=#biblio-dom title=DOM>[DOM]</a>
Within this specification,
this may be referred to as the "document tree".</p>
<p>In addition to the information present in the document tree,
for the purpose of selectors,
elements are assumed to have arbitrary <a data-link-type=dfn href=#pseudo-class title=pseudo-class>pseudo-class</a> flags
and <a data-link-type=dfn href=#pseudo-element title=pseudo-element>pseudo-element</a> slots,
as defined by the given <a data-link-type=dfn href=#pseudo-class title=pseudo-class>pseudo-class</a> and <a data-link-type=dfn href=#pseudo-element title=pseudo-element>pseudo-element</a>.</p>
<div class=example>
For example, the first element child of each element
has a flag indicating that it matches the <a class=css data-link-type=maybe href=#first-child-pseudo title=:first-child>:first-child</a> pseudo-element.
<p>For another example,
all elements have <span class=css>::before</span> pseudo-elements,
but not only elements with <a data-link-type=dfn href=http://dev.w3.org/csswg/css-scoping-1/#shadow-tree title="shadow trees">shadow trees</a> have <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-scoping-1/#selectordef-shadow title=::shadow>::shadow</a> pseudo-elements.</p>
</div>
<p>Five aspects of a DOM element are especially relevant for selectors:</p>
<ul>
<li>The element’s type (also known as tagname), which is a string.
<li>The element’s namespace, which is a string.
<li>An ID, which is a string.
<li>Classes, which are strings.
<li>Attributes, which are pairs of strings consisting of an attribute name and an attribute value.
</ul>
<p>These aspects are referred to as <dfn data-dfn-type=dfn data-export="" id=feature title=feature>features<a class=self-link href=#feature></a></dfn>.
The <a data-link-type=dfn href=#simple title="simple selectors">simple selectors</a> which are keyed off of them
(<a data-link-type=dfn href=#universal-selector title="universal selector">universal selector</a>, <a data-link-type=dfn href=#type-selector title="type selectors">type selectors</a>, <a data-link-type=dfn href=#id-selector title="ID selectors">ID selectors</a>, <a data-link-type=dfn href=#class-selector title="class selectors">class selectors</a>, and <a data-link-type=dfn href=#attribute-selector title="attribute selectors">attribute selectors</a>)
are called <dfn data-dfn-type=dfn data-export="" id=feature-selector title="feature selector">feature selectors<a class=self-link href=#feature-selector></a></dfn>.</p>
<p>While elements may lack any of the individual <a data-link-type=dfn href=#feature title=features>features</a>,
some elements are <dfn data-dfn-type=dfn data-export="" id=featureless>featureless<a class=self-link href=#featureless></a></dfn>.
A <a data-link-type=dfn href=#featureless title=featureless>featureless</a> element does not match any <a data-link-type=dfn href=#feature-selector title="feature selector">feature selector</a>,
or any selector that resolves based on <a data-link-type=dfn href=#feature title=features>features</a>
(such as <span class=css>:not(div)</span>),
with the exception of namespace selectors—<wbr>a <a data-link-type=dfn href=#featureless title=featureless>featureless</a> element is treated as having <em>all</em> namespaces.
Thus, only <a data-link-type=dfn href=#pseudo-class title=pseudo-classes>pseudo-classes</a> or <a data-link-type=dfn href=#pseudo-element title=pseudo-elements>pseudo-elements</a> can be used to select them.
Individual <a data-link-type=dfn href=#featureless title=featureless>featureless</a> elements may define additional restrictions on what kinds of selectors can match them.</p>
<div class=example>
For example, the <a data-link-type=dfn href=http://dev.w3.org/csswg/css-scoping-1/#host-element0 title="host element">host element</a> in a <a data-link-type=dfn href=http://dev.w3.org/csswg/css-scoping-1/#shadow-tree title="shadow tree">shadow tree</a> is <a data-link-type=dfn href=#featureless title=featureless>featureless</a>,
and can’t be matched by <em>any</em> <a data-link-type=dfn href=#pseudo-class title=pseudo-class>pseudo-class</a> except for <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-scoping-1/#selectordef-host0 title=:host>:host</a> and <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-scoping-1/#selectordef-host-context title=:host-context()>:host-context()</a>.)
</div>
6A5E
<details class=why>
<summary>Why do featureless elements match all namespaces?</summary>
<p>In a previous version of Selectors,
all <a data-link-type=dfn href=#compound title="compound selectors">compound selectors</a> contained a <a data-link-type=dfn href=#type-selector title="type selector">type selector</a>;
if you didn’t supply one explicitly,
a <a data-link-type=dfn href=#universal-selector title="universal selector">universal selector</a> was implied.
Default namespaces <a data-biblio-type=informative data-link-type=biblio href=#biblio-css3namespace title=CSS3NAMESPACE>[CSS3NAMESPACE]</a> affected the implied universal selector,
so that selectors like <a class=css data-link-type=maybe href=#hover-pseudo title=:hover>:hover</a> actually meant <span class=css>defaultNS|*:hover</span>.</p>
<p>The universal selector is no longer implied,
but default namespaces still exist,
and have to apply to all compound selectors.
The behavior of <a data-link-type=dfn href=#featureless title=featureless>featureless</a> elements,
like the <a data-link-type=dfn href=http://dev.w3.org/csswg/css-scoping-1/#host-element0 title="host element">host element</a> in a shadow tree,
thus needs to accommodate that and work appropriately.
In this case, "appropriately" means "ignoring the default namespace".</p>
</details>
<p>When matching a selector against a document which is in <a data-link-type=dfn title="quirks mode">quirks mode</a>,
class and ID selectors must be matched <a data-link-type=dfn href=http://dev.w3.org/csswg/css-syntax-3/#ascii-case-insensitive title="ASCII case-insensitive">ASCII case-insensitively</a>
against the classes and ID of the elements in the document.</p>
<h4 class="heading settled" data-level=3.3.1 id=dom-mapping><span class=secno>3.3.1. </span><span class=content>
Guidance on Mapping Document Languages to DOM</span><a class=self-link href=#dom-mapping></a></h4>
<p>The DOM document structure is powerful and useful,
but generic enough to model pretty much any langauge that describes tree-based data
(or even graph-based, with a suitable interpretation).</p>
<p>Some languages, like HTML, already have well-defined procedures
for producing a DOM object from a resource.
If a given language does not,
such a procedure must be defined
in order for Selectors to apply to documents in that language.</p>
<p>At minimum,
the document language must define what maps to the DOM concept of an "element".</p>
<p>The primary one-to-many relationship between nodes—<wbr>parent/child in tree-based structures,
element/neighbors in graph-based structures—<wbr>should be reflected as the child nodes of an element.</p>
<p>Other features of the element should be reflected as <a data-link-type=dfn href=#feature title=features>features</a> when possible,
mapping to something that serves a similar purpose to the same feature in DOM:</p>
<dl>
<dt>type
<dd>
If the elements in the document language have some notion of "type"
as a basic distinguisher between different groups of elements,
it should be reflected as the "type" <a data-link-type=dfn href=#feature title=feature>feature</a>.
View remainder of file in raw view