You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
3945 lines
146 KiB
3945 lines
146 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
|
|
|
<html lang=en>
|
|
<head>
|
|
<title>Selectors Level 4</title>
|
|
<link href=default.css rel=stylesheet type="text/css">
|
|
|
|
<style type="text/css">
|
|
.tprofile td, th { vertical-align: baseline; padding: 0 0.5em; }
|
|
.tprofile th { text-align: right; }
|
|
</style>
|
|
<link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" rel=stylesheet
|
|
type="text/css">
|
|
|
|
<body>
|
|
<div class=head> <!--begin-logo-->
|
|
<p><a href="http://www.w3.org/"><img alt=W3C height=48
|
|
src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
|
|
|
|
<h1 id=title>Selectors Level 4</h1>
|
|
|
|
<h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 29
|
|
September 2011</h2>
|
|
|
|
<dl>
|
|
<dt>This version:
|
|
|
|
<dd><a href="http://www.w3.org/TR/2011/WD-selectors4-20110929/">
|
|
http://www.w3.org/TR/2011/WD-selectors4-20110929/</a>
|
|
|
|
<dt>Editor's draft:
|
|
|
|
<dd><a href="http://dev.w3.org/csswg/selectors4/">
|
|
http://dev.w3.org/csswg/selectors4/</a>
|
|
|
|
<dt>Latest version of Selectors Level 4:
|
|
|
|
<dd><a href="http://www.w3.org/TR/selectors4/">
|
|
http://www.w3.org/TR/selectors4/</a>
|
|
|
|
<dt>Latest Selectors specification:
|
|
|
|
<dd><a href="http://www.w3.org/TR/selectors/">
|
|
http://www.w3.org/TR/selectors/</a>
|
|
|
|
<dt>Previous version:
|
|
|
|
<dd>-
|
|
|
|
<dt>Editors:
|
|
|
|
<dd class=vcard><a class="url fn"
|
|
href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a>
|
|
(Mozilla)
|
|
|
|
<dt>Previous Editors:
|
|
|
|
<dd class=vcard><a class="url fn" href="http://www.tantek.com/"
|
|
lang=tr>Tantek Çelik</a> (Microsoft)
|
|
|
|
<dd class=vcard><span class=fn>Daniel Glazman</span> (Disruptive
|
|
Innovations SARL)
|
|
|
|
<dd class=vcard><span class=fn>Ian Hickson</span> (Opera Softare ASA)
|
|
|
|
<dd class=vcard><span class=fn>Peter Linss</span> (Netscape/AOL)
|
|
|
|
<dd class=vcard><span class=fn>John Williams</span> (Quark, Inc.)
|
|
</dl>
|
|
<!--begin-copyright-->
|
|
<p class=copyright><a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
|
|
rel=license>Copyright</a> © 2011 <a
|
|
href="http://www.w3.org/"><acronym title="World Wide Web
|
|
Consortium">W3C</acronym></a><sup>®</sup> (<a
|
|
href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
|
|
of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym
|
|
title="European Research Consortium for Informatics and
|
|
Mathematics">ERCIM</acronym></a>, <a
|
|
href="http://www.keio.ac.jp/">Keio</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>
|
|
<!--end-copyright-->
|
|
<hr title="Separator for header">
|
|
</div>
|
|
|
|
<h2 class="no-num no-toc" id=abstract> Abstract</h2>
|
|
|
|
<p><em>Selectors</em> 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 an XML 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.
|
|
|
|
<p>Selectors Level 4 describes the selectors that already exist in <a
|
|
href="#SELECT" rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>, and further
|
|
introduces new selectors for CSS and other languages that may need them.
|
|
|
|
<h2 class="no-num no-toc" id=status>Status of this Document</h2>
|
|
<!--begin-status-->
|
|
|
|
<p><em>This section describes the status of this document at the time of
|
|
its publication. Other documents may supersede this document. A list of
|
|
current W3C publications and the latest revision of this technical report
|
|
can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
|
|
index at http://www.w3.org/TR/.</a></em>
|
|
|
|
<p>Publication as a Working Draft does not imply endorsement by the W3C
|
|
Membership. This is a draft document and may be updated, replaced or
|
|
obsoleted by other documents at any time. It is inappropriate to cite this
|
|
document as other than 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">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 “selectors4” in the subject, preferably like this:
|
|
“[<!---->selectors4<!---->] <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>
|
|
<!--end-status-->
|
|
|
|
<p><strong>This module is an early-stage Working Draft. If you are looking
|
|
for a stable Selectors specification, use <a
|
|
href="http://www.w3.org/TR/css3-selectors/">Selectors 3</a>.</strong> Read
|
|
the <a href="http://www.w3.org/TR/CSS/">CSS Snapshot</a> for an overview
|
|
of the CSS development process. See the <a href="#overview">Selectors
|
|
Overview</a> for a summary of additions to level 3.
|
|
|
|
<p>This is the first public Working Draft of this new specification.
|
|
|
|
<h2 class="no-num no-toc" id=contents>Table of Contents</h2>
|
|
<!--begin-toc-->
|
|
|
|
<ul class=toc>
|
|
<li><a href="#context"><span class=secno>1. </span> Introduction</a>
|
|
<ul class=toc>
|
|
<li><a href="#placement"><span class=secno>1.1. </span>Module
|
|
Interactions</a>
|
|
</ul>
|
|
|
|
<li><a href="#overview"><span class=secno>2. </span> Selectors
|
|
Overview</a>
|
|
|
|
<li><a href="#syntax"><span class=secno>3. </span> Selector Syntax and
|
|
Structure</a>
|
|
<ul class=toc>
|
|
<li><a href="#structure"><span class=secno>3.1. </span> Structure and
|
|
Terminology</a>
|
|
|
|
<li><a href="#subject"><span class=secno>3.2. </span> Determining the
|
|
Subject of a Selector</a>
|
|
|
|
<li><a href="#pseudo-classes"><span class=secno>3.3. </span>
|
|
Pseudo-classes</a>
|
|
|
|
<li><a href="#pseudo-elements"><span class=secno>3.4.
|
|
</span>Pseudo-elements</a>
|
|
|
|
<li><a href="#case-sensitive"><span class=secno>3.5. </span> Characters
|
|
and case sensitivity</a>
|
|
|
|
<li><a href="#namespaces"><span class=secno>3.6. </span> Namespaces</a>
|
|
|
|
<li><a href="#invalid"><span class=secno>3.7. </span> Invalid Selectors
|
|
and Error Handling</a>
|
|
</ul>
|
|
|
|
<li><a href="#logical-combination"><span class=secno>4. </span> Logical
|
|
Combinations</a>
|
|
<ul class=toc>
|
|
<li><a href="#grouping"><span class=secno>4.1. </span> Selector
|
|
Lists</a>
|
|
|
|
<li><a href="#matches"><span class=secno>4.2. </span> The Matches-Any
|
|
Pseudo-class: ‘<code class=css>:matches()</code>’</a>
|
|
|
|
<li><a href="#negation"><span class=secno>4.3. </span> The Negation
|
|
Pseudo-class: ‘<code class=css>:not()</code>’</a>
|
|
</ul>
|
|
|
|
<li><a href="#elemental-selectors"><span class=secno>5. </span> Elemental
|
|
selectors</a>
|
|
<ul class=toc>
|
|
<li><a href="#type-selectors"><span class=secno>5.1. </span> Type
|
|
selector</a>
|
|
<ul class=toc>
|
|
<li><a href="#typenmsp"><span class=secno>5.1.1. </span> Type
|
|
selectors and namespaces</a>
|
|
</ul>
|
|
|
|
<li><a href="#universal-selector"><span class=secno>5.2. </span>
|
|
Universal selector </a>
|
|
<ul class=toc>
|
|
<li><a href="#univnmsp"><span class=secno>5.2.1. </span> Universal
|
|
selector and namespaces</a>
|
|
</ul>
|
|
</ul>
|
|
|
|
<li><a href="#attribute-selectors"><span class=secno>6. </span> Attribute
|
|
selectors</a>
|
|
<ul class=toc>
|
|
<li><a href="#attribute-representation"><span class=secno>6.1. </span>
|
|
Attribute presence and value selectors</a>
|
|
|
|
<li><a href="#attribute-substrings"><span class=secno>6.2. </span>
|
|
Substring matching attribute selectors</a>
|
|
|
|
<li><a href="#attribute-case"><span class=secno>6.3. </span>
|
|
Case-sensitivity</a>
|
|
|
|
<li><a href="#attrnmsp"><span class=secno>6.4. </span> Attribute
|
|
selectors and namespaces</a>
|
|
|
|
<li><a href="#def-values"><span class=secno>6.5. </span> Default
|
|
attribute values in DTDs</a>
|
|
|
|
<li><a href="#class-html"><span class=secno>6.6. </span> Class
|
|
selectors</a>
|
|
|
|
<li><a href="#id-selectors"><span class=secno>6.7. </span> ID
|
|
selectors</a>
|
|
</ul>
|
|
|
|
<li><a href="#location"><span class=secno>7. </span> Location
|
|
Pseudo-classes</a>
|
|
<ul class=toc>
|
|
<li><a href="#any-link-pseudo"><span class=secno>7.1. </span> The
|
|
hyperlink pseudo-class: ‘<code
|
|
class=css>:any-link</code>’</a>
|
|
|
|
<li><a href="#link"><span class=secno>7.2. </span> The link history
|
|
pseudo-classes: ‘<code class=css>:link</code>’ and
|
|
‘<code class=css>:visited</code>’</a>
|
|
|
|
<li><a href="#local-pseudo"><span class=secno>7.3. </span> The local
|
|
link pseudo-class ‘<code class=css>:local-link</code>’</a>
|
|
|
|
<li><a href="#target-pseudo"><span class=secno>7.4. </span> The target
|
|
pseudo-class ‘<code class=css>:target</code>’</a>
|
|
|
|
<li><a href="#scope-pseudo"><span class=secno>7.5. </span> The
|
|
contextual reference element pseudo-class ‘<code
|
|
class=css>:scope</code>’</a>
|
|
</ul>
|
|
|
|
<li><a href="#useraction-pseudos"><span class=secno>8. </span> User Action
|
|
Pseudo-classes</a>
|
|
<ul class=toc>
|
|
<li><a href="#hover-pseudo"><span class=secno>8.1. </span> The pointer
|
|
hover pseudo-class ‘<code class=css>:hover</code>’</a>
|
|
|
|
<li><a href="#active-pseudo"><span class=secno>8.2. </span> The
|
|
activation pseudo-class ‘<code
|
|
class=css>:active</code>’</a>
|
|
|
|
<li><a href="#focus-pseudo"><span class=secno>8.3. </span> The input
|
|
focus pseudo-class ‘<code class=css>:focus</code>’</a>
|
|
</ul>
|
|
|
|
<li><a href="#time-pseudos"><span class=secno>9. </span> Time-dimensional
|
|
Pseudo-classes</a>
|
|
<ul class=toc>
|
|
<li><a href="#current-pseudo"><span class=secno>9.1. </span> The
|
|
current-element pseudo-class ‘<code
|
|
class=css>:current</code>’</a>
|
|
|
|
<li><a href="#past-pseudo"><span class=secno>9.2. </span> The
|
|
past-element pseudo-class ‘<code
|
|
class=css>:past</code>’</a>
|
|
|
|
<li><a href="#future-pseudo"><span class=secno>9.3. </span> The
|
|
future-element pseudo-class ‘<code
|
|
class=css>:future</code>’</a>
|
|
</ul>
|
|
|
|
<li><a href="#linguistic-pseudos"><span class=secno>10. </span> Linguistic
|
|
Pseudo-classes</a>
|
|
<ul class=toc>
|
|
<li><a href="#dir-pseudo"><span class=secno>10.1. </span> The
|
|
directionality pseudo-class ‘<code
|
|
class=css>:dir()</code>’</a>
|
|
|
|
<li><a href="#lang-pseudo"><span class=secno>10.2. </span> The language
|
|
pseudo-class ‘<code class=css>:lang</code>’</a>
|
|
</ul>
|
|
|
|
<li><a href="#ui-states-pseudos"><span class=secno>11. </span> The UI
|
|
states pseudo-classes</a>
|
|
<ul class=toc>
|
|
<li><a href="#enableddisabled"><span class=secno>11.1. </span> The
|
|
‘<code class=css>:enabled</code>’ and ‘<code
|
|
class=css>:disabled</code>’ pseudo-classes</a>
|
|
|
|
<li><a href="#checked"><span class=secno>11.2. </span> The
|
|
selected-option pseudo-class ‘<code
|
|
class=css>:checked</code>’</a>
|
|
|
|
<li><a href="#indeterminate"><span class=secno>11.3. </span> The
|
|
indeterminate-value pseudo-class ‘<code
|
|
class=css>:indeterminate</code>’</a>
|
|
|
|
<li><a href="#default-pseudo"><span class=secno>11.4. </span> The
|
|
default option pseudo-class ‘<code
|
|
class=css>:default</code>’</a>
|
|
|
|
<li><a href="#validity-pseudos"><span class=secno>11.5. </span> The
|
|
validity pseudo-classes ‘<code class=css>:valid</code>’ and
|
|
‘<code class=css>:invalid</code>’</a>
|
|
|
|
<li><a href="#range-pseudos"><span class=secno>11.6. </span> The range
|
|
pseudo-classes ‘<code class=css>:in-range</code>’ and
|
|
‘<code class=css>:out-of-range</code>’</a>
|
|
|
|
<li><a href="#opt-pseudos"><span class=secno>11.7. </span> The
|
|
optionality pseudo-classes ‘<code
|
|
class=css>:required</code>’ and ‘<code
|
|
class=css>:optional</code>’</a>
|
|
|
|
<li><a href="#rw-pseudos"><span class=secno>11.8. </span> The mutability
|
|
pseudo-classes ‘<code class=css>:read-only</code>’ and
|
|
‘<code class=css>:read-write</code>’</a>
|
|
</ul>
|
|
|
|
<li><a href="#structural-pseudos"><span class=secno>12. </span>
|
|
Tree-Structural pseudo-classes</a>
|
|
<ul class=toc>
|
|
<li><a href="#root-pseudo"><span class=secno>12.1. </span> ‘<code
|
|
class=css>:root</code>’ pseudo-class</a>
|
|
|
|
<li><a href="#nth-child-pseudo"><span class=secno>12.2. </span>
|
|
‘<code class=css>:nth-child()</code>’ pseudo-class</a>
|
|
|
|
<li><a href="#nth-last-child-pseudo"><span class=secno>12.3. </span>
|
|
‘<code class=css>:nth-last-child()</code>’ pseudo-class</a>
|
|
|
|
|
|
<li><a href="#nth-of-type-pseudo"><span class=secno>12.4. </span>
|
|
‘<code class=css>:nth-of-type()</code>’ pseudo-class</a>
|
|
|
|
<li><a href="#nth-last-of-type-pseudo"><span class=secno>12.5. </span>
|
|
‘<code class=css>:nth-last-of-type()</code>’
|
|
pseudo-class</a>
|
|
|
|
<li><a href="#nth-match"><span class=secno>12.6. </span> ‘<code
|
|
class=css>:nth-match()</code>’ pseudo-class</a>
|
|
|
|
<li><a href="#nth-last-match"><span class=secno>12.7. </span>
|
|
‘<code class=css>:nth-last-match()</code>’ pseudo-class</a>
|
|
|
|
|
|
<li><a href="#first-child-pseudo"><span class=secno>12.8. </span>
|
|
‘<code class=css>:first-child</code>’ pseudo-class</a>
|
|
|
|
<li><a href="#last-child-pseudo"><span class=secno>12.9. </span>
|
|
‘<code class=css>:last-child</code>’ pseudo-class</a>
|
|
|
|
<li><a href="#first-of-type-pseudo"><span class=secno>12.10. </span>
|
|
‘<code class=css>:first-of-type</code>’ pseudo-class</a>
|
|
|
|
<li><a href="#last-of-type-pseudo"><span class=secno>12.11. </span>
|
|
‘<code class=css>:last-of-type</code>’ pseudo-class</a>
|
|
|
|
<li><a href="#only-child-pseudo"><span class=secno>12.12. </span>
|
|
‘<code class=css>:only-child</code>’ pseudo-class</a>
|
|
|
|
<li><a href="#only-of-type-pseudo"><span class=secno>12.13. </span>
|
|
‘<code class=css>:only-of-type</code>’ pseudo-class</a>
|
|
|
|
<li><a href="#empty-pseudo"><span class=secno>12.14. </span>
|
|
‘<code class=css>:empty</code>’ pseudo-class</a>
|
|
</ul>
|
|
|
|
<li><a href="#table-pseudos"><span class=secno>13. </span> Grid-Structural
|
|
Selectors</a>
|
|
<ul class=toc>
|
|
<li><a href="#column-pseudo"><span class=secno>13.1. </span>
|
|
‘<code class=css>:column()</code>’ pseudo-class</a>
|
|
|
|
<li><a href="#nth-column-pseudo"><span class=secno>13.2. </span>
|
|
‘<code class=css>:nth-column()</code>’ pseudo-class</a>
|
|
|
|
<li><a href="#nth-last-column-pseudo"><span class=secno>13.3. </span>
|
|
‘<code class=css>:nth-last-column()</code>’
|
|
pseudo-class</a>
|
|
</ul>
|
|
|
|
<li><a href="#combinators"><span class=secno>14. </span> Combinators</a>
|
|
<ul class=toc>
|
|
<li><a href="#descendant-combinators"><span class=secno>14.1. </span>
|
|
Descendant combinator</a>
|
|
|
|
<li><a href="#child-combinators"><span class=secno>14.2. </span> Child
|
|
combinators</a>
|
|
|
|
<li><a href="#adjacent-sibling-combinators"><span class=secno>14.3.
|
|
</span> Adjacent sibling combinator</a>
|
|
|
|
<li><a href="#general-sibling-combinators"><span class=secno>14.4.
|
|
</span> General sibling combinator</a>
|
|
|
|
<li><a href="#idref-combinators"><span class=secno>14.5. </span>
|
|
Reference combinators</a>
|
|
</ul>
|
|
|
|
<li><a href="#specificity"><span class=secno>15. </span> Calculating a
|
|
selector's specificity</a>
|
|
|
|
<li><a href="#formal-syntax"><span class=secno>16. </span> Formal
|
|
Syntax</a>
|
|
<ul class=toc>
|
|
<li><a href="#grammar"><span class=secno>16.1. </span> Grammar</a>
|
|
|
|
<li><a href="#lex"><span class=secno>16.2. </span> Lexical scanner</a>
|
|
</ul>
|
|
|
|
<li><a href="#profiling"><span class=secno>17. </span> Profiles</a>
|
|
<ul class=toc>
|
|
<li><a href="#css-profiles"><span class=secno>17.1. </span> CSS
|
|
Profiles</a>
|
|
|
|
<li><a href="#stts-profile"><span class=secno>17.2. </span> STTS
|
|
Profiles</a>
|
|
</ul>
|
|
|
|
<li><a href="#conformance"><span class=secno>18. </span> Conformance</a>
|
|
<ul class=toc>
|
|
<li><a href="#conventions"><span class=secno>18.1. </span>Document
|
|
Conventions</a>
|
|
|
|
<li><a href="#conformance-classes"><span class=secno>18.2. </span>
|
|
Conformance Classes</a>
|
|
|
|
<li><a href="#partial"><span class=secno>18.3. </span> Partial
|
|
Implementations</a>
|
|
|
|
<li><a href="#experimental"><span class=secno>18.4. </span> Experimental
|
|
Implementations</a>
|
|
</ul>
|
|
|
|
<li><a href="#acknowledgements"><span class=secno>19. </span>
|
|
Acknowledgements</a>
|
|
|
|
<li><a href="#references"><span class=secno>20. </span> References</a>
|
|
<ul class=toc>
|
|
<li><a href="#normative-references"><span class=secno>20.1. </span>
|
|
Normative References</a>
|
|
|
|
<li><a href="#informative-references"><span class=secno>20.2. </span>
|
|
Informative References</a>
|
|
</ul>
|
|
</ul>
|
|
<!--end-toc-->
|
|
|
|
<h2 id=context><span class=secno>1. </span> Introduction</h2>
|
|
|
|
<p><em>This section is not normative.</em>
|
|
|
|
<p>Selectors define the following function for elements in a tree
|
|
structure:
|
|
|
|
<pre>expression ∗ element → boolean</pre>
|
|
|
|
<p>That is, given an element and a selector, this specification defines
|
|
whether that element matches the selector.
|
|
|
|
<p>These expressions can also be used, for instance, to select a set of
|
|
elements, or a single element from a set of elements, by evaluating the
|
|
expression across all the elements in a subtree. <abbr title="Simple Tree
|
|
Transformation Sheets">STTS</abbr> (Simple Tree Transformation Sheets), a
|
|
language for transforming XML trees, uses this mechanism. <a href="#STTS3"
|
|
rel=biblioentry>[STTS3]<!--{{STTS3}}--></a>
|
|
|
|
<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.
|
|
|
|
<h3 id=placement><span class=secno>1.1. </span>Module Interactions</h3>
|
|
|
|
<p>This module replaces the definitions for, and extends the set of
|
|
selectors defined for CSS in <a href="#SELECT"
|
|
rel=biblioentry>[SELECT]<!--{{SELECT}}--></a> and <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{CSS21}}--></a>.
|
|
|
|
<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.
|
|
|
|
<h2 id=overview><span class=secno>2. </span> Selectors Overview</h2>
|
|
|
|
<p><em>This section is non-normative, as it merely summarizes the following
|
|
sections.</em>
|
|
|
|
<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>Selectors may range from simple element names to rich contextual
|
|
representations.
|
|
|
|
<p>The following table summarizes the Selector syntax:
|
|
|
|
<table class=data><col class=pattern><col class=meaning><col
|
|
class=section><col class=level>
|
|
<thead>
|
|
<tr>
|
|
<th>Pattern
|
|
|
|
<th>Meaning
|
|
|
|
<th>Section
|
|
|
|
<th>Level
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td><code>*</code>
|
|
|
|
<td>any element
|
|
|
|
<td><a href="#universal-selector">Universal selector</a>
|
|
|
|
<td>2
|
|
|
|
<tr>
|
|
<td><code>E</code>
|
|
|
|
<td>an element of type E
|
|
|
|
<td><a href="#type-selectors">Type selector</a>
|
|
|
|
<td>1
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td><code>E:not(<var>s</var>)</code>
|
|
|
|
<td>an E element that does not match simple selector <var>s</var>
|
|
|
|
<td><a href="#negation">Negation pseudo-class</a>
|
|
|
|
<td>3
|
|
|
|
<tr>
|
|
<td><code>E:not(<var>s1</var>, <var>s2</var>)</code>
|
|
|
|
<td>an E element that does not match either compound selector
|
|
<var>s1</var> or compound selector <var>s2</var>
|
|
|
|
<td><a href="#negation">Negation pseudo-class</a>
|
|
|
|
<td>4
|
|
|
|
<tr>
|
|
<td><code>E:matches(<var>s1</var>, <var>s2</var>)</code>
|
|
|
|
<td>an E element that matches compound selector <var>s1</var> and/or
|
|
compound selector <var>s2</var>
|
|
|
|
<td><a href="#matches">Matches-any pseudo-class</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 href="#class-html">Class selectors</a>
|
|
|
|
<td>1
|
|
|
|
<tr>
|
|
<td><code>E#myid</code>
|
|
|
|
<td>an E element with ID equal to <code>myid</code>.
|
|
|
|
<td><a href="#id-selectors">ID selectors</a>
|
|
|
|
<td>1
|
|
|
|
<tr>
|
|
<td><code>E[foo]</code>
|
|
|
|
<td>an E element with a <code>foo</code> attribute
|
|
|
|
<td><a href="#attribute-selectors">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 href="#attribute-selectors">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 href="#attribute-case">Attribute selectors: 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 href="#attribute-selectors">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 href="#attribute-selectors">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 href="#attribute-selectors">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 href="#attribute-selectors">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 href="#attribute-selectors">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 href="#dir-pseudo">The :dir() pseudo-class</a>
|
|
|
|
<td>2
|
|
|
|
<tr>
|
|
<td><code>E:lang(fr)</code>
|
|
|
|
<td>an element of type E in language "fr" (the document language
|
|
specifies how language is determined)
|
|
|
|
<td><a href="#lang-pseudo">The :lang() pseudo-class</a>
|
|
|
|
<td>2
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td><code>E:any-link</code>
|
|
|
|
<td>an E element being the source anchor of a hyperlink
|
|
|
|
<td><a href="#any-link-pseudo">The hyperlink pseudo-class</a>
|
|
|
|
<td>1
|
|
|
|
<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 href="#link">The link history pseudo-classes</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 href="#link">The link history pseudo-classes</a>
|
|
|
|
<td>1
|
|
|
|
<tr>
|
|
<td><code>E:local-link</code>
|
|
|
|
<td>an E element being the source anchor of a hyperlink of which the
|
|
target is the current document
|
|
|
|
<td><a href="#local-pseudo">The local link pseudo-class</a>
|
|
|
|
<td>4
|
|
|
|
<tr>
|
|
<td><code>E:local-link(0)</code>
|
|
|
|
<td>an E element being the source anchor of a hyperlink of which the
|
|
target is within the current domain
|
|
|
|
<td><a href="#local-pseudo">The local link pseudo-class</a>
|
|
|
|
<td>4
|
|
|
|
<tr>
|
|
<td><code>E:target</code>
|
|
|
|
<td>an E element being the target of the referring URI
|
|
|
|
<td><a href="#target-pseudo">The target pseudo-class</a>
|
|
|
|
<td>3
|
|
|
|
<tr>
|
|
<td><code>E:scope</code>
|
|
|
|
<td>an E element being a designated contextual reference element
|
|
|
|
<td><a href="#scope-pseudo">The scope pseudo-class</a>
|
|
|
|
<td>3
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td><code>E:current</code>
|
|
|
|
<td>an E element that is currently presented in a time-dimensional
|
|
canvas
|
|
|
|
<td><a href="#time-pseudos">Time-dimensional Pseudo-classes</a>
|
|
|
|
<td>4
|
|
|
|
<tr>
|
|
<td><code>E:current(<var>s</var></code>
|
|
|
|
<td>an E element that is the deepest <code>:current</code> element that
|
|
matches selector <var>s</var>
|
|
|
|
<td><a href="#time-pseudos">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 href="#time-pseudos">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 href="#time-pseudos">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 href="#useraction-pseudos">The 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 href="#useraction-pseudos">The user action pseudo-classes</a>
|
|
|
|
<td>2
|
|
|
|
<tr>
|
|
<td><code>E:focus</code>
|
|
|
|
<td>an E element that has user input focus
|
|
|
|
<td><a href="#useraction-pseudos">The user action pseudo-classes</a>
|
|
|
|
<td>2
|
|
|
|
<tr>
|
|
<td><code>E:enabled<br>
|
|
E:disabled</code>
|
|
|
|
<td>a user interface element E that is enabled or disabled, respectively
|
|
|
|
|
|
<td><a href="#enableddisabled">The :enabled and :disabled
|
|
pseudo-classes</a>
|
|
|
|
<td>3
|
|
|
|
<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 href="#checked">The selected-option pseudo-class</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 href="#indeterminate">The indeterminate-value pseudo-class</a>
|
|
|
|
<td>4
|
|
|
|
<tr>
|
|
<td><code>E:default</code>
|
|
|
|
<td>a user interface element E that
|
|
|
|
<td><a href="#default-pseudo">The default option pseudo-class
|
|
:default</a>
|
|
|
|
<td>3-UI/4
|
|
|
|
<tr>
|
|
<td><code>E:in-range</code><br>
|
|
<code>E:out-of-range</code>
|
|
|
|
<td>a user interface element E that
|
|
|
|
<td><a href="#range-pseudos">The validity pseudo-classes</a>
|
|
|
|
<td>3-UI/4
|
|
|
|
<tr>
|
|
<td><code>E:required</code><br>
|
|
<code>E:optional</code>
|
|
|
|
<td>a user interface element E that
|
|
|
|
<td><a href="#opt-pseudos">The optionality pseudo-classes</a>
|
|
|
|
<td>3-UI/4
|
|
|
|
<tr>
|
|
<td><code>E:read-only</code><br>
|
|
<code>E:read-write</code>
|
|
|
|
<td>a user interface element E that
|
|
|
|
<td><a href="#rw-pseudos">The mutability pseudo-classes</a>
|
|
|
|
<td>3-UI/4
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td><code>E:root</code>
|
|
|
|
<td>an E element, root of the document
|
|
|
|
<td><a href="#structural-pseudos">Structural pseudo-classes</a>
|
|
|
|
<td>3
|
|
|
|
<tr>
|
|
<td><code>E:empty</code>
|
|
|
|
<td>an E element that has no children (not even text nodes)
|
|
|
|
<td><a href="#structural-pseudos">Structural pseudo-classes</a>
|
|
|
|
<td>3
|
|
|
|
<tr>
|
|
<td><code>E:first-child</code>
|
|
|
|
<td>an E element, first child of its parent
|
|
|
|
<td><a href="#structural-pseudos">Structural pseudo-classes</a>
|
|
|
|
<td>2
|
|
|
|
<tr>
|
|
<td><code>E:nth-child(<var>n</var>)</code>
|
|
|
|
<td>an E element, the <var>n</var>-th child of its parent
|
|
|
|
<td><a href="#structural-pseudos">Structural pseudo-classes</a>
|
|
|
|
<td>3
|
|
|
|
<tr>
|
|
<td><code>E:last-child</code>
|
|
|
|
<td>an E element, last child of its parent
|
|
|
|
<td><a href="#structural-pseudos">Structural pseudo-classes</a>
|
|
|
|
<td>3
|
|
|
|
<tr>
|
|
<td><code>E:nth-last-child(<var>n</var>)</code>
|
|
|
|
<td>an E element, the <var>n</var>-th child of its parent, counting from
|
|
the last one
|
|
|
|
<td><a href="#structural-pseudos">Structural pseudo-classes</a>
|
|
|
|
<td>3
|
|
|
|
<tr>
|
|
<td><code>E:only-child</code>
|
|
|
|
<td>an E element, only child of its parent
|
|
|
|
<td><a href="#structural-pseudos">Structural pseudo-classes</a>
|
|
|
|
<td>3
|
|
|
|
<tr>
|
|
<td><code>E:first-of-type</code>
|
|
|
|
<td>an E element, first sibling of its type
|
|
|
|
<td><a href="#structural-pseudos">Structural 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 href="#structural-pseudos">Structural pseudo-classes</a>
|
|
|
|
<td>3
|
|
|
|
<tr>
|
|
<td><code>E:last-of-type</code>
|
|
|
|
<td>an E element, last sibling of its type
|
|
|
|
<td><a href="#structural-pseudos">Structural 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 href="#structural-pseudos">Structural pseudo-classes</a>
|
|
|
|
<td>3
|
|
|
|
<tr>
|
|
<td><code>E:only-of-type</code>
|
|
|
|
<td>an E element, only sibling of its type
|
|
|
|
<td><a href="#structural-pseudos">Structural pseudo-classes</a>
|
|
|
|
<td>3
|
|
|
|
<tr>
|
|
<td><code>E:nth-match(<var>n</var> of <a
|
|
href="#selector"><var>selector</var></a>)</code>
|
|
|
|
<td>an E element, the <var>n</var>-th sibling matching <a
|
|
href="#selector"><var>selector</var></a>
|
|
|
|
<td><a href="#structural-pseudos">Structural pseudo-classes</a>
|
|
|
|
<td>4
|
|
|
|
<tr>
|
|
<td><code>E:nth-match(<var>n</var> of <a
|
|
href="#selector"><var>selector</var></a>)</code>
|
|
|
|
<td>an E element, the <var>n</var>-th sibling matching <a
|
|
href="#selector"><var>selector</var></a>
|
|
|
|
<td><a href="#structural-pseudos">Structural pseudo-classes</a>
|
|
|
|
<td>4
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td><code>E:column(<a href="#selector"><var>selector</var></a>)</code>
|
|
|
|
<td>an E element that represents a cell in a grid/table belonging to a
|
|
column represented by an element that matches <a
|
|
href="#selector"><var>selector</var></a>
|
|
|
|
<td><a href="#table-pseudos">Grid-Structural pseudo-classes</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 href="#table-pseudos">Grid-Structural pseudo-classes</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 href="#table-pseudos">Grid-Structural pseudo-classes</a>
|
|
|
|
<td>4
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td><code>E F</code>
|
|
|
|
<td>an F element descendant of an E element
|
|
|
|
<td><a href="#descendant-combinators">Descendant combinator</a>
|
|
|
|
<td>1
|
|
|
|
<tr>
|
|
<td><code>E > F</code>
|
|
|
|
<td>an F element child of an E element
|
|
|
|
<td><a href="#child-combinators">Child combinator</a>
|
|
|
|
<td>2
|
|
|
|
<tr>
|
|
<td><code>E + F</code>
|
|
|
|
<td>an F element immediately preceded by an E element
|
|
|
|
<td><a href="#adjacent-sibling-combinators">Adjacent sibling
|
|
combinator</a>
|
|
|
|
<td>2
|
|
|
|
<tr>
|
|
<td><code>E ~ F</code>
|
|
|
|
<td>an F element preceded by an E element
|
|
|
|
<td><a href="#general-sibling-combinators">General sibling
|
|
combinator</a>
|
|
|
|
<td>3
|
|
|
|
<tr>
|
|
<td><code>E /foo/ F</code>
|
|
|
|
<td>an F element ID-referenced by an E element's <code>foo</code>
|
|
attribute
|
|
|
|
<td><a href="#idref-combinators">Reference combinator</a>
|
|
|
|
<td>4
|
|
|
|
<tr>
|
|
<td><code>$E > F</code>
|
|
|
|
<td>an E element parent of an E element
|
|
|
|
<td><a href="#subject">Determining the subject of a selector</a> + <a
|
|
href="#child-combinators">Child combinator</a>
|
|
|
|
<td>4
|
|
</table>
|
|
|
|
<p>The meaning of each selector is derived from the table above by
|
|
prepending "matches" to the contents of each cell in the "Meaning" column.
|
|
|
|
<p class=note>Some Level 4 selectors (noted above as "3-UI") were
|
|
introduced in <a href="#CSS3UI"
|
|
rel=biblioentry>[CSS3UI]<!--{{CSS3UI}}--></a>.
|
|
|
|
<h2 id=syntax><span class=secno>3. </span> Selector Syntax and Structure</h2>
|
|
|
|
<h3 id=structure><span class=secno>3.1. </span> Structure and Terminology</h3>
|
|
|
|
<p>The term <dfn id=selector>selector</dfn> can refer to a <i>simple
|
|
selector</i>, <a href="#compound"><i>compound selector</i></a>, <a
|
|
href="#complex"><i>complex selector</i></a>, or <a
|
|
href="#selector-list"><i>selector list</i></a>.
|
|
|
|
<p>A <dfn id=complex>complex selector</dfn> is a chain of one or more <a
|
|
href="#compound">compound selectors</a> separated by <a
|
|
href="#combinators">combinators</a>.
|
|
|
|
<p>A <dfn id=compound>compound selector</dfn> is a chain of <a
|
|
href="#simple">simple selectors</a> that are not separated by a <a
|
|
href="#combinators">combinator</a>. It always begins with a <a
|
|
href="#type-selectors">type selector</a> or a (possibly implied) <a
|
|
href="#universal-selector">universal selector</a>. No other type selector
|
|
or universal selector is allowed in the sequence.
|
|
|
|
<p>A <dfn id=simple><a href="#simple">simple selector</a></dfn> is either a
|
|
<a href="#type-selectors">type selector</a>, <a
|
|
href="#universal-selector">universal selector</a>, <a
|
|
href="#attribute-selectors">attribute selector</a>, <a
|
|
href="#class-html">class selector</a>, <a href="#id-selectors">ID
|
|
selector</a>, or <a href="#pseudo-classes">pseudo-class</a>.
|
|
|
|
<p><dfn id=combinator>Combinators</dfn> are punctuation that represent a
|
|
particular kind of relationship between the compound selectors on either
|
|
side. Combinators in Selectors level 4 include: whitespace,
|
|
"greater-than sign" (U+003E, <code>></code>), "plus
|
|
sign" (U+002B, <code>+</code>) and "tilde" (U+007E,
|
|
<code>~</code>). <a href="#whitespace">White space</a> may appear between
|
|
a combinator and the simple selectors around it.
|
|
|
|
<p>An empty selector, containing no compound selector, is an <a
|
|
href="#invalid">invalid selector</a>.
|
|
|
|
<h3 id=subject><span class=secno>3.2. </span> Determining the Subject of a
|
|
Selector</h3>
|
|
|
|
<p>The elements of a document tree that are represented by a selector are
|
|
the <dfn id=subjects>subjects</dfn> of the selector.
|
|
|
|
<p>By default, the subjects of a selector are the elements represented by
|
|
the last compound selector in the selector. Thus a selector consisting of
|
|
a single compound selector represents any element satisfying its
|
|
requirements. Prepending another compound selector and a combinator to a
|
|
sequence imposes additional matching constraints, so the subjects of the
|
|
selector are always a subset of the elements represented by the last
|
|
compound selector.
|
|
|
|
<p>The subject of the selector can be explicitly identified by prepending a
|
|
dollar sign ($) to one of the compound selectors in a selector. Although
|
|
the element structure that the selector represents is the same with or
|
|
without the dollar sign, indicating the subject in this way can change
|
|
which compound selector represents the subject in that structure.
|
|
|
|
<div class=example>
|
|
<p>For example, the following selector represents a list item
|
|
<code>LI</code> unique child of an ordered list <code>OL</code>:
|
|
|
|
<pre>OL > LI:only-child</pre>
|
|
|
|
<p>However the following one represents an ordered list <code>OL</code>
|
|
having a unique child, that child being a <code>LI</code>:
|
|
|
|
<pre>$OL > LI:only-child</pre>
|
|
|
|
<p>The structures represented by these two selectors are the same, but the
|
|
subjects of the selectors are not.
|
|
</div>
|
|
|
|
<h3 id=pseudo-classes><span class=secno>3.3. </span> Pseudo-classes</h3>
|
|
|
|
<p>The pseudo-class concept is introduced to permit selection based on
|
|
information that lies outside of the document tree or that cannot be
|
|
expressed using the other simple selectors.
|
|
|
|
<p>A pseudo-class always consists of a "colon" (<code>:</code>)
|
|
followed by the name of the pseudo-class and, for functional
|
|
pseudo-classes, by a value between parentheses. White space is optionally
|
|
allowed between the parentheses and the argument, but not between the
|
|
pseudo-class name and the parentheses.
|
|
|
|
<p>Pseudo-classes are allowed in all compound selectors contained in a
|
|
selector. Pseudo-classes are allowed anywhere in a compound selector after
|
|
the leading type selector or (possibly omitted) universal selector.
|
|
Pseudo-class names are case-insensitive. Some pseudo-classes are mutually
|
|
exclusive (such that a compound selector containing them, while valid,
|
|
will never match anything), while others can apply simultaneously to the
|
|
same element. Pseudo-classes may be dynamic, in the sense that an element
|
|
can acquire or lose a pseudo-class while a user interacts with the
|
|
document.
|
|
|
|
<p>Dynamic pseudo-classes classify elements on characteristics other than
|
|
their name, attributes, or content, in principle characteristics that
|
|
cannot be deduced from the document tree.
|
|
|
|
<p>Dynamic pseudo-classes do not appear in the document source or document
|
|
tree.
|
|
|
|
<h3 id=pseudo-elements><span class=secno>3.4. </span>Pseudo-elements</h3>
|
|
|
|
<p>Pseudo-elements create abstractions about the document tree beyond those
|
|
specified by the document language. For instance, document languages do
|
|
not offer mechanisms to access the first letter or first line of an
|
|
element's content. Pseudo-elements allow authors to refer to this
|
|
otherwise inaccessible information. Pseudo-elements may also provide
|
|
authors a way to refer to content that does not exist in the source
|
|
document (e.g., the <code>::before</code> and <code>::after</code>
|
|
pseudo-elements give access to generated content in CSS <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{CSS21}}--></a>).
|
|
|
|
<p>A pseudo-element is made of two colons (<code>::</code>) followed by the
|
|
name of the pseudo-element.
|
|
|
|
<p>This <code>::</code> notation was chosen in order to establish a
|
|
discrimination between pseudo-classes (which subclass existing elements)
|
|
and pseudo-elements (which are elements not represented in the document
|
|
tree). However, for compatibility with existing style sheets, user agents
|
|
must also accept the previous one-colon notation for pseudo-elements
|
|
introduced in CSS levels 1 and 2 (namely, <code>:first-line</code>,
|
|
<code>:first-letter</code>, <code>:before</code> and <code>:after</code>).
|
|
This compatibility notation is not allowed any other pseudo-elements.
|
|
|
|
<p>Only one pseudo-element may appear per selector, and only if the subject
|
|
of the selector is the last compound selector in the selector. If present
|
|
the pseudo-element must appear after the compound selector that represents
|
|
the <a href="#subject">subjects</a> of the selector.
|
|
|
|
<p class=note>A future version of this specification may allow multiple
|
|
pseudo-elements per selector.
|
|
|
|
<p>Syntactically, a pseudo-element may be followed by any combination of
|
|
the <a href="#useraction-pseudos">user action pseudo-classes</a>. Whether
|
|
these pseudo-classes can match on the pseudo-element depends on the
|
|
pseudo-class and pseudo-element's definition: unless otherwise-specified,
|
|
none of these pseudo-classes will match on the pseudo-element.
|
|
|
|
<div class=example>
|
|
<p>For example, the <code>:hover</code> pseudo-class specifies that it can
|
|
apply to any pseudo-element, i.e. <code>::first-line:hover</code> will
|
|
match when the first line is hovered. However, since neither
|
|
<code>:focus</code> nor <code>::first-line</code> define that
|
|
<code>:focus</code> can apply to <code>::first-line</code>, the selector
|
|
<code>::first-line:focus</code> will never match anything.
|
|
</div>
|
|
|
|
<h3 id=case-sensitive><span class=secno>3.5. </span> Characters and case
|
|
sensitivity</h3>
|
|
|
|
<p>All Selectors syntax is case-insensitive within the ASCII range (i.e.
|
|
[a-z] and [A-Z] are equivalent), except for parts that are not under the
|
|
control of Selectors. The case sensitivity of document language element
|
|
names, attribute names, and attribute values in selectors depends on the
|
|
document language. For example, in HTML, element names are
|
|
case-insensitive, but in XML, they are case-sensitive. Case sensitivity of
|
|
namespace prefixes is defined in <a href="#CSS3NAMESPACE"
|
|
rel=biblioentry>[CSS3NAMESPACE]<!--{{!CSS3NAMESPACE}}--></a>.
|
|
|
|
<p><dfn id=whitespace>White space</dfn> in Selectors consists of the
|
|
characters SPACE (U+0020), TAB (U+0009), LINE FEED (U+000A), CARRIAGE
|
|
RETURN (U+000D), and FORM FEED (U+000C) can occur in whitespace. Other
|
|
space-like characters, such as EM SPACE (U+2003) and IDEOGRAPHIC SPACE
|
|
(U+3000), are never part of white space.
|
|
|
|
<p>Characters in Selectors can be escaped with a backslash according to the
|
|
same <a href="http://www.w3.org/TR/CSS21/syndata.html#characters">escaping
|
|
rules</a> as CSS. <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
|
|
|
|
<h3 id=namespaces><span class=secno>3.6. </span> Namespaces</h3>
|
|
|
|
<p>Certain selectors support namespace prefixes. The mechanism by which
|
|
namespace prefixes are <dfn id=nsdecl>declared</dfn> should be specified
|
|
by the language that uses Selectors. If the language does not specify a
|
|
namespace prefix declaration mechanism, then no prefixes are declared. In
|
|
CSS, namespace prefixes are declared with the <a
|
|
href="http://www.w3.org/TR/css3-namespace/#declaration"><code>@namespace</code></a>
|
|
rule. <a href="#CSS3NAMESPACE"
|
|
rel=biblioentry>[CSS3NAMESPACE]<!--{{!CSS3NAMESPACE}}--></a>
|
|
|
|
<h3 id=invalid><span class=secno>3.7. </span> Invalid Selectors and Error
|
|
Handling</h3>
|
|
|
|
<p>Invalidity is caused by a parsing error, e.g. an unrecognized token or a
|
|
token which is not allowed at the current parsing point.
|
|
|
|
<p>User agents must observe the rules for handling parsing errors:
|
|
|
|
<ul>
|
|
<li>a simple selector containing an <a href="#namespaces">undeclared
|
|
namespace prefix</a> is invalid
|
|
|
|
<li>a selector containing an invalid simple selector, an invalid
|
|
combinator or an invalid token is invalid.
|
|
|
|
<li>a selector list containing an invalid selector is invalid.
|
|
</ul>
|
|
|
|
<p>An invalid selector represents nothing.
|
|
|
|
<p class=issue>It's been <a
|
|
href="http://lists.w3.org/Archives/Public/www-style/2010Nov/0203.html">requested</a>
|
|
that the last rule be dropped in favor of Media Queries-style
|
|
error-handling.
|
|
|
|
<h2 id=logical-combination><span class=secno>4. </span> Logical
|
|
Combinations</h2>
|
|
|
|
<h3 id=grouping><span class=secno>4.1. </span> Selector Lists</h3>
|
|
|
|
<p>A comma-separated list of selectors represents the union of all elements
|
|
selected by each of the individual selectors in the <dfn
|
|
id=selector-list>selector list</dfn>. (A comma is U+002C.) For example, in
|
|
CSS when several selectors share the same declarations, they may be
|
|
grouped into a comma-separated list. White space may appear before and/or
|
|
after the comma.
|
|
|
|
<div class=example>
|
|
<p>CSS example:</p>
|
|
|
|
<p>In this example, we condense three rules with identical declarations
|
|
into one. Thus,</p>
|
|
|
|
<pre>h1 { font-family: sans-serif }
|
|
h2 { font-family: sans-serif }
|
|
h3 { font-family: sans-serif }</pre>
|
|
|
|
<p>is equivalent to:</p>
|
|
|
|
<pre>h1, h2, h3 { font-family: sans-serif }</pre>
|
|
</div>
|
|
|
|
<p><strong>Warning</strong>: the equivalence is true in this example
|
|
because all the selectors are valid selectors. If just one of these
|
|
selectors were invalid, the entire group of selectors would be invalid.
|
|
This would invalidate the rule for all three heading elements, whereas in
|
|
the former case only one of the three individual heading rules would be
|
|
invalidated.
|
|
|
|
<div class=example>
|
|
<p>Invalid CSS example:</p>
|
|
|
|
<pre>h1 { font-family: sans-serif }
|
|
h2..foo { font-family: sans-serif }
|
|
h3 { font-family: sans-serif }</pre>
|
|
|
|
<p>is not equivalent to:</p>
|
|
|
|
<pre>h1, h2..foo, h3 { font-family: sans-serif }</pre>
|
|
|
|
<p>because the above selector (<code>h1, h2..foo, h3</code>) is entirely
|
|
invalid and the entire style rule is dropped. (When the selectors are not
|
|
grouped, only the rule for <code>h2..foo</code> is dropped.)</p>
|
|
</div>
|
|
|
|
<h3 id=matches><span class=secno>4.2. </span> The Matches-Any Pseudo-class:
|
|
‘<code class=css>:matches()</code>’</h3>
|
|
|
|
<p>The matches-any pseudo-class, <code>:matches(<var>X</var>)</code>, is a
|
|
functional notation taking a <a href="#grouping">selector list</a> as its
|
|
argument. It represents an element that is represented by its argument.
|
|
|
|
<p>In Selectors Level 4, only <a href="#compound">compound selectors</a>
|
|
are allowed within <code>:matches()</code>: <a
|
|
href="#combinator">combinators</a> are not allowed. Additionally,
|
|
<code>:matches()</code> may not be nested within itself or within
|
|
<code>:not()</code>: <code>:matches(:matches(...))</code> and
|
|
<code>:not(:matches(...))</code> are invalid.
|
|
|
|
<p>Pseudo-elements cannot be represented by the matches-any pseudo-class;
|
|
they are not valid within <code>:matches()</code>.
|
|
|
|
<p>Default namespace declarations do not affect the subject of any selector
|
|
within a matches-any pseudo-class unless the argument is an explicit
|
|
universal selector or a type selector.
|
|
|
|
<div class=example>
|
|
<p>For example, following selector matches any element that is being
|
|
hovered or focused, regardless of its namespace. In particular, it is not
|
|
limited to only matching elements in the default namespace that are being
|
|
hovered or focused.</p>
|
|
|
|
<pre>*|*:matches(:hover, :focus)</pre>
|
|
|
|
<p>The following selector, however, represents only hovered or focused
|
|
elements that are in the default namespace, because it uses an explicit
|
|
universal selector within the <code>:matches()</code> notation:</p>
|
|
|
|
<pre>*|*:matches(*:hover, *:focus)</pre>
|
|
</div>
|
|
|
|
<h3 id=negation><span class=secno>4.3. </span> The Negation Pseudo-class:
|
|
‘<code class=css>:not()</code>’</h3>
|
|
|
|
<p>The negation pseudo-class, <code>:not(<var>X</var>)</code>, is a
|
|
functional notation taking a <a href="#grouping">selector list</a> as an
|
|
argument. It represents an element that is not represented by its
|
|
argument.
|
|
|
|
<p>In Selectors Level 4, only <a href="#compound">compound selectors</a>
|
|
are allowed within <code>:matches()</code>: <a
|
|
href="#combinator">combinators</a> are not allowed. Additionally,
|
|
negations may not be nested within itself or within
|
|
<code>:matches()</code>: <code>:not(:not(...))</code> and
|
|
<code>:matches(:not(...))</code> are invalid.
|
|
|
|
<p>Pseudo-elements cannot be represented by the negation pseudo-class; they
|
|
are not valid within <code>:not()</code>.
|
|
|
|
<div class=example>
|
|
<p>For example, the following selector matches all <code>button</code>
|
|
elements in an HTML document that are not disabled.</p>
|
|
|
|
<pre>button:not([DISABLED])</pre>
|
|
|
|
<p>The following selector represents all but <code>FOO</code> elements.</p>
|
|
|
|
<pre>*:not(FOO)</pre>
|
|
|
|
<p>The following compound selector represents all HTML elements except
|
|
links.</p>
|
|
|
|
<pre>html|*:not(:link):not(:visited)</pre>
|
|
</div>
|
|
|
|
<p>Default namespace declarations do not affect the subject of any selector
|
|
within a negation pseudo-class unless the argument is an explicit
|
|
universal selector or a type selector. (See <a
|
|
href="#matches"><code>:matches()</code></a> for examples.
|
|
|
|
<p class=note><strong>Note</strong>: the :not() pseudo allows useless
|
|
selectors to be written. For instance <code>:not(*|*)</code>, which
|
|
represents no element at all, or <code>foo:not(bar)</code>, which is
|
|
equivalent to <code>foo</code> but with a higher specificity.
|
|
|
|
<h2 id=elemental-selectors><span class=secno>5. </span> Elemental selectors</h2>
|
|
|
|
<h3 id=type-selectors><span class=secno>5.1. </span> Type selector</h3>
|
|
|
|
<p>A <dfn id=type-selector>type selector</dfn> is the name of a document
|
|
language element type written using the syntax of <a
|
|
href="http://www.w3.org/TR/css3-namespace/#css-qnames">CSS qualified
|
|
names</a> <a href="#CSS3NAMESPACE"
|
|
rel=biblioentry>[CSS3NAMESPACE]<!--{{!CSS3NAMESPACE}}--></a>. A type
|
|
selector represents an instance of the element type in the document tree.
|
|
|
|
<div class=example>
|
|
<p>Example:</p>
|
|
|
|
<p>The following selector represents an <code>h1</code> element in the
|
|
document tree:</p>
|
|
|
|
<pre>h1</pre>
|
|
</div>
|
|
|
|
<h4 id=typenmsp><span class=secno>5.1.1. </span> Type selectors and
|
|
namespaces</h4>
|
|
|
|
<p>Type selectors allow an optional namespace component: a namespace prefix
|
|
that has been previously <a href="#nsdecl">declared</a> may be prepended
|
|
to the element name separated by the namespace separator "vertical
|
|
bar" (U+007C, <code>|</code>). (See, e.g., <a href="#XML-NAMES"
|
|
rel=biblioentry>[XML-NAMES]<!--{{XML-NAMES}}--></a> for the use of
|
|
namespaces in XML.)
|
|
|
|
<p>The namespace component may be left empty (no prefix before the
|
|
namespace separator) to indicate that the selector is only to represent
|
|
elements with no namespace.
|
|
|
|
<p>An asterisk may be used for the namespace prefix, indicating that the
|
|
selector represents elements in any namespace (including elements with no
|
|
namespace).
|
|
|
|
<p>Element type selectors that have no namespace component (no namespace
|
|
separator) represent elements without regard to the element's namespace
|
|
(equivalent to "<code>*|</code>") unless a default namespace has been <a
|
|
href="#nsdecl">declared</a> for namespaced selectors (e.g. in CSS, in the
|
|
style sheet). If a default namespace has been declared, such selectors
|
|
will represent only elements in the default namespace.
|
|
|
|
<p>A type selector containing a namespace prefix that has not been
|
|
previously <a href="#nsdecl">declared</a> for namespaced selectors is an
|
|
<a href="#conformance">invalid</a> selector.
|
|
|
|
<p>In a namespace-aware client, the name part of element type selectors
|
|
(the part after the namespace separator, if it is present) will only match
|
|
against the <a
|
|
href="http://www.w3.org/TR/REC-xml-names/#NT-LocalPart">local part</a> of
|
|
the element's <a
|
|
href="http://www.w3.org/TR/REC-xml-names/#ns-qualnames">qualified
|
|
name</a>.
|
|
|
|
<p>In summary:
|
|
|
|
<dl>
|
|
<dt><code>ns|E</code>
|
|
|
|
<dd>elements with name E in namespace ns
|
|
|
|
<dt><code>*|E</code>
|
|
|
|
<dd>elements with name E in any namespace, including those without a
|
|
namespace
|
|
|
|
<dt><code>|E</code>
|
|
|
|
<dd>elements with name E without a namespace
|
|
|
|
<dt><code>E</code>
|
|
|
|
<dd>if no default namespace has been <a href="#nsdecl">declared</a> for
|
|
selectors, this is equivalent to *|E. Otherwise it is equivalent to ns|E
|
|
where ns is the default namespace.
|
|
</dl>
|
|
|
|
<div class=example>
|
|
<p>CSS examples:</p>
|
|
|
|
<pre>@namespace foo url(http://www.example.com);
|
|
foo|h1 { color: blue } /* first rule */
|
|
foo|* { color: yellow } /* second rule */
|
|
|h1 { color: red } /* ...*/
|
|
*|h1 { color: green }
|
|
h1 { color: green }</pre>
|
|
|
|
<p>The first rule (not counting the <code>@namespace</code> at-rule) will
|
|
match only <code>h1</code> elements in the "http://www.example.com"
|
|
namespace.</p>
|
|
|
|
<p>The second rule will match all elements in the "http://www.example.com"
|
|
namespace.</p>
|
|
|
|
<p>The third rule will match only <code>h1</code> elements with no
|
|
namespace.</p>
|
|
|
|
<p>The fourth rule will match <code>h1</code> elements in any namespace
|
|
(including those without any namespace).</p>
|
|
|
|
<p>The last rule is equivalent to the fourth rule because no default
|
|
namespace has been defined.</p>
|
|
</div>
|
|
|
|
<h3 id=universal-selector><span class=secno>5.2. </span> Universal selector
|
|
</h3>
|
|
|
|
<p>The <dfn id=universal-selector0>universal selector</dfn>, written as a
|
|
<a href="http://www.w3.org/TR/css3-namespace/#css-qnames">CSS qualified
|
|
name</a> <a href="#CSS3NAMESPACE"
|
|
rel=biblioentry>[CSS3NAMESPACE]<!--{{!CSS3NAMESPACE}}--></a> with an
|
|
asterisk (<code>*</code> U+002A) as the local name, represents the
|
|
qualified name of any element type. It represents any single element in
|
|
the document tree in any namespace (including those without a namespace)
|
|
if no default namespace has been specified for selectors. If a default
|
|
namespace has been specified, see <a href="#univnmsp">Universal selector
|
|
and Namespaces</a> below.
|
|
|
|
<p>If a universal selector represented by <code>*</code> (i.e. without a
|
|
namespace prefix) is not the only component of a <a
|
|
href="#compound">compound selector</a> or is immediately followed by a <a
|
|
href="#pseudo-elements">pseudo-element</a>, then the <code>*</code> may be
|
|
omitted and the universal selector's presence implied.
|
|
|
|
<div class=example>
|
|
<p>Examples:</p>
|
|
|
|
<ul>
|
|
<li><code>*[hreflang|=en]</code> and <code>[hreflang|=en]</code> are
|
|
equivalent,
|
|
|
|
<li><code>*.warning</code> and <code>.warning</code> are equivalent,
|
|
|
|
<li><code>*#myid</code> and <code>#myid</code> are equivalent.
|
|
</ul>
|
|
</div>
|
|
|
|
<p class=note><strong>Note:</strong> it is recommended that the
|
|
<code>*</code> not be omitted, because it decreases the potential
|
|
confusion between, for example, <code style="white-space: nowrap">div
|
|
:first-child</code> and <code style="white-space:
|
|
nowrap">div:first-child</code>. Here, <code style="white-space:
|
|
nowrap">div *:first-child</code> is more readable.
|
|
|
|
<h4 id=univnmsp><span class=secno>5.2.1. </span> Universal selector and
|
|
namespaces</h4>
|
|
|
|
<p>The universal selector allows an optional namespace component. It is
|
|
used as follows:
|
|
|
|
<dl>
|
|
<dt><code>ns|*</code>
|
|
|
|
<dd>all elements in namespace ns
|
|
|
|
<dt><code>*|*</code>
|
|
|
|
<dd>all elements
|
|
|
|
<dt><code>|*</code>
|
|
|
|
<dd>all elements without a namespace
|
|
|
|
<dt><code>*</code>
|
|
|
|
<dd>if no default namespace has been specified, this is equivalent to *|*.
|
|
Otherwise it is equivalent to ns|* where ns is the default namespace.
|
|
</dl>
|
|
|
|
<p>A universal selector containing a namespace prefix that has not been
|
|
previously <a href="#nsdecl">declared</a> is an <a
|
|
href="#conformance">invalid</a> selector.
|
|
|
|
<h2 id=attribute-selectors><span class=secno>6. </span> Attribute selectors</h2>
|
|
|
|
<p>Selectors allow the representation of an element's attributes. When a
|
|
selector is used as an expression to match against an element, attribute
|
|
selectors must be considered to match an element if that element has an
|
|
attribute that matches the attribute represented by the attribute
|
|
selector.
|
|
|
|
<h3 id=attribute-representation><span class=secno>6.1. </span> Attribute
|
|
presence and value selectors</h3>
|
|
|
|
<p>CSS2 introduced four attribute selectors:
|
|
|
|
<dl>
|
|
<dt><code>[att]</code>
|
|
|
|
<dd>Represents an element with the <code>att</code> attribute, whatever
|
|
the value of the attribute.
|
|
|
|
<dt><code>[att=val]</code>
|
|
|
|
<dd>Represents an element with the <code>att</code> attribute whose value
|
|
is exactly "val".
|
|
|
|
<dt><code>[att~=val]</code>
|
|
|
|
<dd>Represents an element with the <code>att</code> attribute whose value
|
|
is a <a href="#whitespace">whitespace</a>-separated list of words, one of
|
|
which is exactly "val". If "val" contains whitespace, it will never
|
|
represent anything (since the words are <em>separated</em> by spaces).
|
|
Also if "val" is the empty string, it will never represent anything.
|
|
|
|
<dt><code>[att|=val]</code>
|
|
|
|
<dd>Represents an element with the <code>att</code> attribute, its value
|
|
either being exactly "val" or beginning with "val" immediately followed
|
|
by "-" (U+002D). This is primarily intended to allow language subcode
|
|
matches (e.g., the <code>hreflang</code> attribute on the <code>a</code>
|
|
element in HTML) as described in BCP 47 (<a href="#BCP47"
|
|
rel=biblioentry>[BCP47]<!--{{BCP47}}--></a>) or its successor. For
|
|
<code>lang</code> (or <code>xml:lang</code>) language subcode matching,
|
|
please see <a href="#lang-pseudo">the <code>:lang</code>
|
|
pseudo-class</a>.
|
|
</dl>
|
|
|
|
<p>Attribute values must be CSS <a
|
|
href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifiers</a>
|
|
or <a href="http://www.w3.org/TR/CSS21/syndata.html#strings">strings</a>.
|
|
<a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
|
|
|
|
<div class=example>
|
|
<p>Examples:</p>
|
|
|
|
<p>The following attribute selector represents an <code>h1</code> element
|
|
that carries the <code>title</code> attribute, whatever its value:</p>
|
|
|
|
<pre>h1[title]</pre>
|
|
|
|
<p>In the following example, the selector represents a <code>span</code>
|
|
element whose <code>class</code> attribute has exactly the value
|
|
"example":</p>
|
|
|
|
<pre>span[class="example"]</pre>
|
|
|
|
<p>Multiple attribute selectors can be used to represent several
|
|
attributes of an element, or several conditions on the same attribute.
|
|
Here, the selector represents a <code>span</code> element whose
|
|
<code>hello</code> attribute has exactly the value "Cleveland" and whose
|
|
<code>goodbye</code> attribute has exactly the value "Columbus":</p>
|
|
|
|
<pre>span[hello="Cleveland"][goodbye="Columbus"]</pre>
|
|
|
|
<p>The following CSS rules illustrate the differences between "=" and
|
|
"~=". The first selector would match, for example, an <code>a</code>
|
|
element with the value "copyright copyleft copyeditor" on a
|
|
<code>rel</code> attribute. The second selector would only match an
|
|
<code>a</code> element with an <code>href</code> attribute having the
|
|
exact value "http://www.w3.org/".</p>
|
|
|
|
<pre>a[rel~="copyright"] { ... }
|
|
a[href="http://www.w3.org/"] { ... }</pre>
|
|
|
|
<p>The following selector represents an <code>a</code> element whose
|
|
<code>hreflang</code> attribute is exactly "fr".</p>
|
|
|
|
<pre>a[hreflang=fr]</pre>
|
|
|
|
<p>The following selector represents an <code>a</code> element for which
|
|
the value of the <code>hreflang</code> attribute begins with "en",
|
|
including "en", "en-US", and "en-scouse":</p>
|
|
|
|
<pre>a[hreflang|="en"]</pre>
|
|
|
|
<p>The following selectors represent a <code>DIALOGUE</code> element
|
|
whenever it has one of two different values for an attribute
|
|
<code>character</code>:</p>
|
|
|
|
<pre>DIALOGUE[character=romeo]
|
|
DIALOGUE[character=juliet]</pre>
|
|
</div>
|
|
|
|
<h3 id=attribute-substrings><span class=secno>6.2. </span> Substring
|
|
matching attribute selectors</h3>
|
|
|
|
<p>Three additional attribute selectors are provided for matching
|
|
substrings in the value of an attribute:
|
|
|
|
<dl>
|
|
<dt><code>[att^=val]</code>
|
|
|
|
<dd>Represents an element with the <code>att</code> attribute whose value
|
|
begins with the prefix "val". If "val" is the empty string then the
|
|
selector does not represent anything.
|
|
|
|
<dt><code>[att$=val]</code>
|
|
|
|
<dd>Represents an element with the <code>att</code> attribute whose value
|
|
ends with the suffix "val". If "val" is the empty string then the
|
|
selector does not represent anything.
|
|
|
|
<dt><code>[att*=val]</code>
|
|
|
|
<dd>Represents an element with the <code>att</code> attribute whose value
|
|
contains at least one instance of the substring "val". If "val" is the
|
|
empty string then the selector does not represent anything.
|
|
</dl>
|
|
|
|
<p>Attribute values must be CSS <a
|
|
href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifiers</a>
|
|
or <a href="http://www.w3.org/TR/CSS21/syndata.html#strings">strings</a>.
|
|
<a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
|
|
|
|
<div class=example>
|
|
<p>Examples:</p>
|
|
|
|
<p>The following selector represents an HTML <code>object</code>,
|
|
referencing an image:</p>
|
|
|
|
<pre>object[type^="image/"]</pre>
|
|
|
|
<p>The following selector represents an HTML anchor <code>a</code> with an
|
|
<code>href</code> attribute whose value ends with ".html".</p>
|
|
|
|
<pre>a[href$=".html"]</pre>
|
|
|
|
<p>The following selector represents an HTML paragraph with a
|
|
<code>title</code> attribute whose value contains the substring "hello"</p>
|
|
|
|
<pre>p[title*="hello"]</pre>
|
|
</div>
|
|
|
|
<h3 id=attribute-case><span class=secno>6.3. </span> Case-sensitivity</h3>
|
|
|
|
<p>By default case-sensitivity of attribute names and values in selectors
|
|
depends on the document language. To match attribute values
|
|
case-insensitively regardless of document language rules, the attribute
|
|
selector may include the identifier <code>i</code> immediately inside the
|
|
closing bracket (<code>]</code>). When this flag is present, UAs must
|
|
match the attribute's value case-insensitively within the ASCII range.
|
|
|
|
<div class=example>
|
|
<p>The following rule will style the <code>frame</code> attribute when it
|
|
has a value of <code>hsides</code>, whether that value is represented as
|
|
<code>hsides</code>, <code>HSIDES</code>, <code>hSides</code>, etc. even
|
|
in an XML environment where attribute values are case-sensitive.
|
|
|
|
<pre>
|
|
<!-- -->[frame=hsides i] { border-style: solid none; }
|
|
</pre>
|
|
</div>
|
|
|
|
<h3 id=attrnmsp><span class=secno>6.4. </span> Attribute selectors and
|
|
namespaces</h3>
|
|
|
|
<p>The attribute name in an attribute selector is given as a <a
|
|
href="http://www.w3.org/TR/css3-namespace/#css-qnames">CSS qualified
|
|
name</a>: a namespace prefix that has been previously <a
|
|
href="#nsdecl">declared</a> may be prepended to the attribute name
|
|
separated by the namespace separator "vertical bar"
|
|
(<code>|</code>). In keeping with the Namespaces in the XML
|
|
recommendation, default namespaces do not apply to attributes, therefore
|
|
attribute selectors without a namespace component apply only to attributes
|
|
that have no namespace (equivalent to "<code>|attr</code>"). An asterisk
|
|
may be used for the namespace prefix indicating that the selector is to
|
|
match all attribute names without regard to the attribute's namespace.
|
|
|
|
<p>An attribute selector with an attribute name containing a namespace
|
|
prefix that has not been previously <a href="#nsdecl">declared</a> is an
|
|
<a href="#conformance">invalid</a> selector.
|
|
|
|
<div class=example>
|
|
<p>CSS examples:</p>
|
|
|
|
<pre>@namespace foo "http://www.example.com";
|
|
[foo|att=val] { color: blue }
|
|
[*|att] { color: yellow }
|
|
[|att] { color: green }
|
|
[att] { color: green }</pre>
|
|
|
|
<p>The first rule will match only elements with the attribute
|
|
<code>att</code> in the "http://www.example.com" namespace with the value
|
|
"val".</p>
|
|
|
|
<p>The second rule will match only elements with the attribute
|
|
<code>att</code> regardless of the namespace of the attribute (including
|
|
no namespace).</p>
|
|
|
|
<p>The last two rules are equivalent and will match only elements with the
|
|
attribute <code>att</code> where the attribute is not in a namespace.</p>
|
|
</div>
|
|
|
|
<h3 id=def-values><span class=secno>6.5. </span> Default attribute values
|
|
in DTDs</h3>
|
|
|
|
<p>Attribute selectors represent attribute values in the document tree. How
|
|
that document tree is constructed is outside the scope of Selectors. In
|
|
some document formats default attribute values can be defined in a DTD or
|
|
elsewhere, but these can only be selected by attribute selectors if they
|
|
appear in the document tree. Selectors should be designed so that they
|
|
work whether or not the default values are included in the document tree.
|
|
|
|
<p>For example, a XML UA may, but is <em>not</em> required to read an
|
|
"external subset" of the DTD but <em>is</em> required to look for default
|
|
attribute values in the document's "internal subset." (See, e.g., <a
|
|
href="#XML10" rel=biblioentry>[XML10]<!--{{XML10}}--></a> for definitions
|
|
of these subsets.) Depending on the UA, a default attribute value defined
|
|
in the external subset of the DTD might or might not appear in the
|
|
document tree.
|
|
|
|
<p>A UA that recognizes an XML namespace may, but is not required to use
|
|
its knowledge of that namespace to treat default attribute values as if
|
|
they were present in the document. (For example, an XHTML UA is not
|
|
required to use its built-in knowledge of the XHTML DTD. See, e.g., <a
|
|
href="#XML-NAMES" rel=biblioentry>[XML-NAMES]<!--{{XML-NAMES}}--></a> for
|
|
details on namespaces in XML 1.0.)
|
|
|
|
<p class=note><strong>Note:</strong> Typically, implementations choose to
|
|
ignore external subsets. This corresponds to the behaviour of
|
|
non-validating processors as defined by the XML specification.
|
|
|
|
<div class=example>
|
|
<p>Example:</p>
|
|
|
|
<p>Consider an element <code>EXAMPLE</code> with an attribute
|
|
<code>radix</code> that has a default value of <code>"decimal"</code>.
|
|
The DTD fragment might be</p>
|
|
|
|
<pre
|
|
class=dtd-example><!ATTLIST EXAMPLE radix (decimal,octal) "decimal"></pre>
|
|
|
|
<p>If the style sheet contains the rules</p>
|
|
|
|
<pre>EXAMPLE[radix=decimal] { /*... default property settings ...*/ }
|
|
EXAMPLE[radix=octal] { /*... other settings...*/ }</pre>
|
|
|
|
<p>the first rule might not match elements whose <code>radix</code>
|
|
attribute is set by default, i.e. not set explicitly. To catch all cases,
|
|
the attribute selector for the default value must be dropped:</p>
|
|
|
|
<pre>EXAMPLE { /*... default property settings ...*/ }
|
|
EXAMPLE[radix=octal] { /*... other settings...*/ }</pre>
|
|
|
|
<p>Here, because the selector <code>EXAMPLE[radix=octal]</code> is more
|
|
specific than the type selector alone, the style declarations in the
|
|
second rule will override those in the first for elements that have a
|
|
<code>radix</code> attribute value of <code>"octal"</code>. Care has to
|
|
be taken that all property declarations that are to apply only to the
|
|
default case are overridden in the non-default cases' style rules.</p>
|
|
</div>
|
|
|
|
<h3 id=class-html><span class=secno>6.6. </span> Class selectors</h3>
|
|
|
|
<p>The class selector is given as a full stop (. U+002E) immediately
|
|
followed by an identifier. It represents an element belonging to the class
|
|
identified by the identifier, as defined by the document language. For
|
|
example, in <a href="#HTML5" rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>,
|
|
<a href="#SVG11" rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>, and <a
|
|
href="#MATHML" rel=biblioentry>[MATHML]<!--{{MATHML}}--></a> membership in
|
|
a class is given by the <code>class</code> attribute: in these languages
|
|
it is equivalent to the <code>~=</code> notation applied to the local
|
|
<code>class</code> attribute (i.e.
|
|
<code>[class~=<var>identifier</var>]</code>), except that it has a higher
|
|
<a href="#specificity">specificity</a>.
|
|
|
|
<div class=example>
|
|
<p>CSS examples:</p>
|
|
|
|
<p>We can assign style information to all elements with
|
|
<code>class~="pastoral"</code> as follows:</p>
|
|
|
|
<pre>*.pastoral { color: green } /* all elements with class~=pastoral */</pre>
|
|
|
|
<p>or just</p>
|
|
|
|
<pre>.pastoral { color: green } /* all elements with class~=pastoral */</pre>
|
|
|
|
<p>The following assigns style only to H1 elements with
|
|
<code>class~="pastoral"</code>:</p>
|
|
|
|
<pre>H1.pastoral { color: green } /* H1 elements with class~=pastoral */</pre>
|
|
|
|
<p>Given these rules, the first <code>H1</code> instance below would not
|
|
have green text, while the second would:</p>
|
|
|
|
<pre><H1>Not green</H1>
|
|
<H1 class="pastoral">Very green</H1></pre>
|
|
|
|
<p>The following rule matches any <code>P</code> element whose
|
|
<code>class</code> attribute has been assigned a list of <a
|
|
href="#whitespace">whitespace</a>-separated values that includes both
|
|
<code>pastoral</code> and <code>marine</code>:</p>
|
|
|
|
<pre>p.pastoral.marine { color: green }</pre>
|
|
|
|
<p>This rule matches when <code>class="pastoral blue aqua marine"</code>
|
|
but does not match for <code>class="pastoral blue"</code>.</p>
|
|
</div>
|
|
|
|
<p class=note><strong>Note:</strong> Because CSS gives considerable power
|
|
to the "class" attribute, authors could conceivably design their own
|
|
"document language" based on elements with almost no associated
|
|
presentation (such as <code>DIV</code> and <code>SPAN</code> in HTML) and
|
|
assigning style information through the "class" attribute. Authors should
|
|
avoid this practice since the structural elements of a document language
|
|
often have recognized and accepted meanings and author-defined classes may
|
|
not.
|
|
|
|
<p class=note><strong>Note:</strong> If an element has multiple class
|
|
attributes, their values must be concatenated with spaces between the
|
|
values before searching for the class. As of this time the working group
|
|
is not aware of any manner in which this situation can be reached,
|
|
however, so this behavior is explicitly non-normative in this
|
|
specification.
|
|
|
|
<h3 id=id-selectors><span class=secno>6.7. </span> ID selectors</h3>
|
|
|
|
<p>Document languages may contain attributes that are declared to be of
|
|
type ID. What makes attributes of type ID special is that no two such
|
|
attributes can have the same value in a conformant document, regardless of
|
|
the type of the elements that carry them; whatever the document language,
|
|
an ID typed attribute can be used to uniquely identify its element. In
|
|
HTML all ID attributes are named "id"; XML applications may name ID
|
|
attributes differently, but the same restriction applies.
|
|
|
|
<p>An ID-typed attribute of a document language allows authors to assign an
|
|
identifier to one element instance in the document tree. An ID selector
|
|
contains a "number sign" (U+0023, <code>#</code>) immediately
|
|
followed by the ID value, which must be an CSS <a
|
|
href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifiers</a>.
|
|
An ID selector represents an element instance that has an identifier that
|
|
matches the identifier in the ID selector.
|
|
|
|
<p>Selectors does not specify how a UA knows the ID-typed attribute of an
|
|
element. The UA may, e.g., read a document's DTD, have the information
|
|
hard-coded or ask the user.
|
|
|
|
<div class=example>
|
|
<p>Examples:</p>
|
|
|
|
<p>The following ID selector represents an <code>h1</code> element whose
|
|
ID-typed attribute has the value "chapter1":</p>
|
|
|
|
<pre>h1#chapter1</pre>
|
|
|
|
<p>The following ID selector represents any element whose ID-typed
|
|
attribute has the value "chapter1":</p>
|
|
|
|
<pre>#chapter1</pre>
|
|
|
|
<p>The following selector represents any element whose ID-typed attribute
|
|
has the value "z98y".</p>
|
|
|
|
<pre>*#z98y</pre>
|
|
</div>
|
|
|
|
<p class=note><strong>Note:</strong> In XML 1.0 <a href="#XML10"
|
|
rel=biblioentry>[XML10]<!--{{XML10}}--></a>, the information about which
|
|
attribute contains an element's IDs is contained in a DTD or a schema.
|
|
When parsing XML, UAs do not always read the DTD, and thus may not know
|
|
what the ID of an element is (though a UA may have namespace-specific
|
|
knowledge that allows it to determine which attribute is the ID attribute
|
|
for that namespace). If a style sheet author knows or suspects that a UA
|
|
may not know what the ID of an element is, he should use normal attribute
|
|
selectors instead: <code>[name=p371]</code> instead of <code>#p371</code>.
|
|
|
|
<p>If an element has multiple ID attributes, all of them must be treated as
|
|
IDs for that element for the purposes of the ID selector. Such a situation
|
|
could be reached using mixtures of xml:id, DOM3 Core, XML DTDs, and
|
|
namespace-specific knowledge.
|
|
|
|
<h2 id=location><span class=secno>7. </span> Location Pseudo-classes</h2>
|
|
|
|
<h3 id=any-link-pseudo><span class=secno>7.1. </span> The hyperlink
|
|
pseudo-class: ‘<code class=css>:any-link</code>’</h3>
|
|
|
|
<p>The <code>:any-link</code> pseudo-class represents an element that acts
|
|
as the source anchor of a hyperlink.
|
|
|
|
<p class=issue>Any better name suggestions for this pseudo?
|
|
|
|
<p>
|
|
|
|
<h3 id=link><span class=secno>7.2. </span> The link history pseudo-classes:
|
|
‘<code class=css>:link</code>’ and ‘<code
|
|
class=css>:visited</code>’</h3>
|
|
|
|
<p>User agents commonly display unvisited links differently from previously
|
|
visited ones. Selectors provides the pseudo-classes <code>:link</code> and
|
|
<code>:visited</code> to distinguish them:
|
|
|
|
<ul>
|
|
<li>The <code>:link</code> pseudo-class applies to links that have not yet
|
|
been visited.
|
|
|
|
<li>The <code>:visited</code> pseudo-class applies once the link has been
|
|
visited by the user.
|
|
</ul>
|
|
|
|
<p>After some amount of time, user agents may choose to return a visited
|
|
link to the (unvisited) ‘<code class=css>:link</code>’ state.
|
|
|
|
<p>The two states are mutually exclusive.
|
|
|
|
<div class=example>
|
|
<p>Example:</p>
|
|
|
|
<p>The following selector represents links carrying class
|
|
<code>footnote</code> and already visited:</p>
|
|
|
|
<pre>.footnote:visited</pre>
|
|
</div>
|
|
|
|
<p class=note><strong>Note:</strong> It is possible for style sheet authors
|
|
to abuse the :link and :visited pseudo-classes to determine which sites a
|
|
user has visited without the user's consent.
|
|
|
|
<p>UAs may therefore treat all links as unvisited links, or implement other
|
|
measures to preserve the user's privacy while rendering visited and
|
|
unvisited links differently.
|
|
|
|
<h3 id=local-pseudo><span class=secno>7.3. </span> The local link
|
|
pseudo-class ‘<code class=css>:local-link</code>’</h3>
|
|
|
|
<p>The <code>:local-link</code> pseudo-class allows authors to style links
|
|
based on the users current location within a site and to differentiate
|
|
site-internal versus site-external links. The <code>:local-link</code>
|
|
pseudo-class represents an element that is the source anchor of a
|
|
hyperlink whose target's absolute URI matches the element's own document
|
|
URI. The fragment identifier of the document URI is stripped before
|
|
matching against the link's URI; otherwise all portions of the URI are
|
|
considered.
|
|
|
|
<div class=example>
|
|
<p>For example, the following rule prevents links targetting the current
|
|
page from being underlined when they are part of the navigation list:
|
|
|
|
<pre>nav :local-link { text-decoration: none; }</pre>
|
|
</div>
|
|
|
|
<p>The pseudo-class can also accept a non-negative integer as its sole
|
|
argument, which, if the document's URI is a URL, indicates the number of
|
|
path levels to match: an argument of zero represents a link element whose
|
|
target is in the same domain as the document's URI, ‘<code
|
|
class=css>1</code>’ represents a link element whose target has the
|
|
same domain and first path segment, ‘<code class=css>2</code>’
|
|
represents a link element whose target has the same domain, first, and
|
|
second path segments, etc. Path segments are portions of the URL's path
|
|
that are separated by forward slashes (/). If a segment is missing from
|
|
the document's URL, a pseudo-class requiring that segment to match does
|
|
not match anything. Similarly if the document's URI is not a URL, the
|
|
pseudo-class does not match anything. The scheme, username, password,
|
|
port, query string, and fragment portions of the URL are not considered
|
|
when matching against <code>:local-link(<var>n</var>)</code>.
|
|
|
|
<p class=issue>Is there such a thing as IRL? Because we do want this to
|
|
work for internationalized URLs, just not URNs.
|
|
|
|
<div class=example>
|
|
<p>So, given the links:
|
|
|
|
<ol>
|
|
<li><code><a href="http://www.example.com">Home</a></code>
|
|
|
|
<li><code><a href="http://www.example.com/2011">2011</a></code>
|
|
|
|
<li><code><a
|
|
href="https://www.example.com/2011/03">March</a></code>
|
|
|
|
<li><code><a
|
|
href="http://www.example.com/2011/03/">March</a></code>
|
|
|
|
<li><code><a href="http://example.com/2011/03">March</a></code>
|
|
</ol>
|
|
|
|
<p>and the styles:
|
|
|
|
<ol>
|
|
<li><code>a:local-link {...}</code>
|
|
|
|
<li><code>a:local-link(0) {...}</code>
|
|
|
|
<li><code>a:local-link(1) {...}</code>
|
|
|
|
<li><code>a:local-link(2) {...}</code>
|
|
|
|
<li><code>a:local-link(3) {...}</code>
|
|
</ol>
|
|
|
|
<p>If the document's URI is <code>http://www.example.com/2011/03/</code>:
|
|
|
|
<ol>
|
|
<li>Link 1 would receive Style 2
|
|
|
|
<li>Link 2 would receive Styles 2 and 3
|
|
|
|
<li>Link 3 would receive Styles 2, 3, and 4
|
|
|
|
<li>Link 4 would receive Style 1
|
|
|
|
<li>Link 5 would remain unstyled, and Style 5 would not be applied to
|
|
anything.
|
|
</ol>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>The following example styles all site-external links with a dashed
|
|
underline.
|
|
|
|
<pre>:not(:local-link(0)) { text-decoration-style: dashed; }</pre>
|
|
</div>
|
|
|
|
<h3 id=target-pseudo><span class=secno>7.4. </span> The target pseudo-class
|
|
‘<code class=css>:target</code>’</h3>
|
|
|
|
<p>Some URIs refer to a location within a resource. This kind of URI ends
|
|
with a "number sign" (#) followed by an anchor identifier
|
|
(called the fragment identifier).
|
|
|
|
<p>URIs with fragment identifiers link to a certain element within the
|
|
document, known as the target element. For instance, here is a URI
|
|
pointing to an anchor named <code>section_2</code> in an HTML document:
|
|
|
|
<pre>http://example.com/html/top.html#section_2</pre>
|
|
|
|
<p>A target element can be represented by the <code>:target</code>
|
|
pseudo-class. If the document's URI has no fragment identifier, then the
|
|
document has no target element.
|
|
|
|
<div class=example>
|
|
<p>Example:</p>
|
|
|
|
<pre>p.note:target</pre>
|
|
|
|
<p>This selector represents a <code>p</code> element of class
|
|
<code>note</code> that is the target element of the referring URI.</p>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>CSS example:</p>
|
|
|
|
<p>Here, the <code>:target</code> pseudo-class is used to make the target
|
|
element red and place an image before it, if there is one:</p>
|
|
|
|
<pre>*:target { color : red }
|
|
*:target::before { content : url(target.png) }</pre>
|
|
</div>
|
|
|
|
<h3 id=scope-pseudo><span class=secno>7.5. </span> The contextual reference
|
|
element pseudo-class ‘<code class=css>:scope</code>’</h3>
|
|
|
|
<p>The <code>:scope</code> pseudo-class represents any element that is in
|
|
the <a href="#contextual-reference-element-set"><i>contextual reference
|
|
element set</i></a>. If no contextual reference element set is given,
|
|
<code>:scope</code> is equivalent to <code>:root</code>.
|
|
|
|
<p>The <dfn id=contextual-reference-element-set>contextual reference
|
|
element set</dfn> is a (potentially empty) explicitly-specified set of
|
|
elements, such as that specified by the <code>querySelector()</code> call
|
|
in <a href="#SELECTORS-API2"
|
|
rel=biblioentry>[SELECTORS-API2]<!--{{SELECTORS-API2}}--></a>.
|
|
Specifications intending for this pseudo-class to match specific elements
|
|
rather than the document's root element must define a contextual reference
|
|
element set.
|
|
|
|
<h2 id=useraction-pseudos><span class=secno>8. </span> User Action
|
|
Pseudo-classes</h2>
|
|
|
|
<p>Interactive user agents sometimes change the rendering in response to
|
|
user actions. Selectors provides three pseudo-classes for the selection of
|
|
an element the user is acting on.
|
|
|
|
<p>These pseudo-classes are not mutually exclusive. An element may match
|
|
several pseudo-classes at the same time.
|
|
|
|
<div class=example>
|
|
<p>Examples:</p>
|
|
|
|
<pre>a:link /* unvisited links */
|
|
a:visited /* visited links */
|
|
a:hover /* user hovers */
|
|
a:active /* active links */</pre>
|
|
|
|
<p>An example of combining dynamic pseudo-classes:</p>
|
|
|
|
<pre>a:focus
|
|
a:focus:hover</pre>
|
|
|
|
<p>The last selector matches <code>a</code> elements that are in the
|
|
pseudo-class :focus and in the pseudo-class :hover.</p>
|
|
</div>
|
|
|
|
<h3 id=hover-pseudo><span class=secno>8.1. </span> The pointer hover
|
|
pseudo-class ‘<code class=css>:hover</code>’</h3>
|
|
|
|
<p>The <code>:hover</code> pseudo-class applies while the user designates
|
|
an element with a pointing device, but does not necessarily activate it.
|
|
For example, a visual user agent could apply this pseudo-class when the
|
|
cursor (mouse pointer) hovers over a box generated by the element. User
|
|
agents not that do not support <a
|
|
href="http://www.w3.org/TR/CSS21/media.html#interactive-media-group">interactive
|
|
media</a> do not have to support this pseudo-class. Some conforming user
|
|
agents that support <a
|
|
href="http://www.w3.org/TR/CSS21/media.html#interactive-media-group">interactive
|
|
media</a> may not be able to support this pseudo-class (e.g., a pen device
|
|
that does not detect hovering).
|
|
|
|
<p>The parent of an element that is <code>:hover</code> is also in that
|
|
state.
|
|
|
|
<p class=note><strong>Note:</strong> Since the ‘<code
|
|
class=css>:hover</code>’ state can apply to an element because its
|
|
child is designated by a pointing device, then it is possible for
|
|
‘<code class=css>:hover</code>’ to apply to an element that is
|
|
not underneath the pointing device.
|
|
|
|
<p>The <code>:hover</code> pseudo-class can apply to any pseudo-element.
|
|
|
|
<h3 id=active-pseudo><span class=secno>8.2. </span> The activation
|
|
pseudo-class ‘<code class=css>:active</code>’</h3>
|
|
|
|
<p>The <code>:active</code> pseudo-class applies while an element is being
|
|
activated by the user. For example, between the times the user presses the
|
|
mouse button and releases it. On systems with more than one mouse button,
|
|
<code>:active</code> applies only to the primary or primary activation
|
|
button (typically the "left" mouse button), and any aliases thereof.
|
|
|
|
<p>There may be document language or implementation specific limits on
|
|
which elements can become <code>:active</code>.
|
|
|
|
<p>Selectors doesn't define if the parent of an element that is
|
|
‘<code class=css>:active</code>’ is also in that state.
|
|
|
|
<p class=note><strong>Note:</strong> An element can be both ‘<code
|
|
class=css>:visited</code>’ and ‘<code
|
|
class=css>:active</code>’ (or ‘<code
|
|
class=css>:link</code>’ and ‘<code
|
|
class=css>:active</code>’).
|
|
|
|
<h3 id=focus-pseudo><span class=secno>8.3. </span> The input focus
|
|
pseudo-class ‘<code class=css>:focus</code>’</h3>
|
|
|
|
<p>The <code>:focus</code> pseudo-class applies while an element has the
|
|
focus (accepts keyboard or mouse events, or other forms of input).
|
|
|
|
<p>There may be document language or implementation specific limits on
|
|
which elements can acquire <code>:focus</code>.
|
|
|
|
<h2 id=time-pseudos><span class=secno>9. </span> Time-dimensional
|
|
Pseudo-classes</h2>
|
|
|
|
<p>These pseudo-classes classify elements with respect to the
|
|
currently-displayed or active position in a time-dimensional canvas, such
|
|
as during speech rendering of an HTML document.
|
|
|
|
<h3 id=current-pseudo><span class=secno>9.1. </span> The current-element
|
|
pseudo-class ‘<code class=css>:current</code>’</h3>
|
|
|
|
<p>The <code>:current</code> pseudo-class represents the innermost element,
|
|
or ancestor of an element, that is currently being displayed.
|
|
|
|
<p>Its alternate form <code>:current()</code>, like
|
|
<code>:matches()</code>, takes a list of compound selectors as its
|
|
argument: it represents the <code>:current</code> element that matches the
|
|
argument or, if that does not match, the innermost ancestor of the
|
|
<code>:current</code> element that does. (If neither the
|
|
<code>:current</code> element nor its ancestors match the argument, then
|
|
the selector does not represent anything.)
|
|
|
|
<div class=example>
|
|
<p>For example, the following rule will highlight whichever paragraph or
|
|
list item is being read aloud in a speech rendering of the document:
|
|
|
|
<pre>
|
|
<!-- -->:current(p, li, dt, dd) {
|
|
<!-- --> background: yellow;
|
|
<!-- -->}</pre>
|
|
</div>
|
|
|
|
<h3 id=past-pseudo><span class=secno>9.2. </span> The past-element
|
|
pseudo-class ‘<code class=css>:past</code>’</h3>
|
|
|
|
<p>The <code>:past</code> pseudo-class represents any element that is
|
|
defined to occur entirely prior to a <code>:current</code> element. If a
|
|
time-based order of elements is not defined by the document language, then
|
|
this represents any element that is a (possibly indirect) previous sibling
|
|
of a <code>:current</code> element.
|
|
|
|
<h3 id=future-pseudo><span class=secno>9.3. </span> The future-element
|
|
pseudo-class ‘<code class=css>:future</code>’</h3>
|
|
|
|
<p>The <code>:future</code> pseudo-class represents any element that is
|
|
defined to occur entirely after a <code>:current</code> element. If a
|
|
time-based order of elements is not defined by the document language, then
|
|
this represents any element that is a (possibly indirect) next sibling of
|
|
a <code>:current</code> element.
|
|
|
|
<h2 id=linguistic-pseudos><span class=secno>10. </span> Linguistic
|
|
Pseudo-classes</h2>
|
|
|
|
<h3 id=dir-pseudo><span class=secno>10.1. </span> The directionality
|
|
pseudo-class ‘<code class=css>:dir()</code>’</h3>
|
|
|
|
<p>The <code>:dir()</code> pseudo-class allows the author to write
|
|
selectors that represent an element based on its directionality as
|
|
determined by the document language. For example, in HTML <a
|
|
href="#HTML401" rel=biblioentry>[HTML401]<!--{{HTML401}}--></a>, the
|
|
directionality of an element is determined by the <code>dir</code>
|
|
attribute. The <code>:dir()</code> pseudo-class does not select based on
|
|
stylistic states—for example, the CSS ‘<code
|
|
class=property>direction</code>’ property does not affect whether it
|
|
matches.
|
|
|
|
<p>The pseudo-class <code>:dir(ltr)</code> represents an element that has a
|
|
directionality of left-to-right (<code>ltr</code>). The pseudo-class
|
|
<code>:dir(rtl)</code> represents an element that has a directionality of
|
|
right-to-left (<code>rtl</code>). The argument to <code>:dir()</code> must
|
|
be a single identifier, otherwise the selector is invlaid. White space is
|
|
optionally allowed between the identifier and the parentheses. Values
|
|
other than <code>ltr</code> and <code>rtl</code> are not invalid, but do
|
|
not match anything. (If a future markup spec defines other
|
|
directionalities, then Selectors may be extended to allow corresponding
|
|
values.)
|
|
|
|
<p>The difference between <code>:dir(C)</code> and <code>[dir=C]</code> is
|
|
that <code>[dir=C]</code> only performs a comparison against a given
|
|
attribute on the element, while the <code>:dir(C)</code> pseudo-class uses
|
|
the UAs knowledge of the document's semantics to perform the comparison.
|
|
For example, in HTML, the directionality of an element inherits so that a
|
|
child without a <code>dir</code> attribute will have the same
|
|
directionality as its closest ancestor with a valid <code>dir</code>
|
|
attribute. As another example, <a
|
|
href="http://www.w3.org/TR/html5/elements.html#the-directionality">in
|
|
HTML5</a>, an element that matches <code>[dir=auto]</code> will match
|
|
either <code>:dir(ltr)</code> or <code>:dir(rtl)</code> depending on the
|
|
resolved directionality of the elements as determined by its contents. <a
|
|
href="#HTML5" rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>
|
|
|
|
<h3 id=lang-pseudo><span class=secno>10.2. </span> The language
|
|
pseudo-class ‘<code class=css>:lang</code>’</h3>
|
|
|
|
<p>If the document language specifies how the human language of an element
|
|
is determined, it is possible to write selectors that represent an element
|
|
based on its language. For example, in HTML <a href="#HTML401"
|
|
rel=biblioentry>[HTML401]<!--{{HTML401}}--></a>, the language is
|
|
determined by a combination of the <code>lang</code> attribute and
|
|
possibly information from the <code>meta</code> elements or the protocol
|
|
(such as HTTP headers). XML uses an attribute called
|
|
<code>xml:lang</code>, and there may be other document language-specific
|
|
methods for determining the language.
|
|
|
|
<p>The pseudo-class <code>:lang(C)</code> represents an element that is in
|
|
language C. Whether an element is represented by a <code>:lang()</code>
|
|
selector is based solely on the element's language value (normalized to
|
|
BCP 47 syntax if necessary) being equal to the identifier C, or beginning
|
|
with the identifier C immediately followed by "-" (U+002D). The matching
|
|
of C against the element's language value is performed case-insensitively
|
|
within the ASCII range. The identifier C does not have to be a valid
|
|
language name.
|
|
|
|
<p>C must be a valid CSS <a
|
|
href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifier</a>
|
|
<a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> and must not
|
|
be empty. (Otherwise, the selector is invalid.)
|
|
|
|
<p class=note><strong>Note:</strong> It is recommended that documents and
|
|
protocols indicate language using codes from BCP 47 <a href="#BCP47"
|
|
rel=biblioentry>[BCP47]<!--{{BCP47}}--></a> or its successor, and by means
|
|
of "xml:lang" attributes in the case of XML-based documents <a
|
|
href="#XML10" rel=biblioentry>[XML10]<!--{{XML10}}--></a>. See <a
|
|
href="http://www.w3.org/International/questions/qa-lang-2or3.html"> "FAQ:
|
|
Two-letter or three-letter language codes."</a>
|
|
|
|
<div class=example>
|
|
<p>Examples:</p>
|
|
|
|
<p>The two following selectors represent an HTML document that is in
|
|
Belgian French or German. The two next selectors represent <code>q</code>
|
|
quotations in an arbitrary element in Belgian French or German.</p>
|
|
|
|
<pre>html:lang(fr-be)
|
|
html:lang(de)
|
|
:lang(fr-be) > q
|
|
:lang(de) > q</pre>
|
|
</div>
|
|
|
|
<p>The difference between <code>:lang(C)</code> and the ‘<code
|
|
class=css>|=</code>’ operator is that the ‘<code
|
|
class=css>|=</code>’ operator only performs a comparison against a
|
|
given attribute on the element, while the <code>:lang(C)</code>
|
|
pseudo-class uses the UAs knowledge of the document's semantics to perform
|
|
the comparison.
|
|
|
|
<div class=example>
|
|
<p>In this HTML example, only the BODY matches <code>[lang|=fr]</code>
|
|
(because it has a LANG attribute) but both the BODY and the P match
|
|
<code>:lang(fr)</code> (because both are in French). The P does not match
|
|
the <code>[lang|=fr]</code> because it does not have a LANG attribute.</p>
|
|
|
|
<pre><body lang=fr>
|
|
<p>Je suis français.</p>
|
|
</body></pre>
|
|
</div>
|
|
|
|
<h2 id=ui-states-pseudos><span class=secno>11. </span> The UI states
|
|
pseudo-classes</h2>
|
|
|
|
<h3 id=enableddisabled><span class=secno>11.1. </span> The ‘<code
|
|
class=css>:enabled</code>’ and ‘<code
|
|
class=css>:disabled</code>’ pseudo-classes</h3>
|
|
|
|
<p>The <code>:enabled</code> pseudo-class represents user interface
|
|
elements that are in an enabled state; such elements have a corresponding
|
|
disabled state.
|
|
|
|
<p>Conversely, the <code>:disabled</code> pseudo-class represents user
|
|
interface elements that are in a disabled state; such elements have a
|
|
corresponding enabled state.
|
|
|
|
<p>What constitutes an enabled state, a disabled state, and a user
|
|
interface element is language-dependent. In a typical document most
|
|
elements will be neither <code>:enabled</code> nor <code>:disabled</code>.
|
|
|
|
<p class=note><strong>Note:</strong> CSS properties that might affect a
|
|
user’s ability to interact with a given user interface element do not
|
|
affect whether it matches <code>:enabled</code> or <code>:disabled</code>;
|
|
e.g., the <code>display</code> and <code>visibility</code> properties have
|
|
no effect on the enabled/disabled state of an element.
|
|
|
|
<h3 id=checked><span class=secno>11.2. </span> The selected-option
|
|
pseudo-class ‘<code class=css>:checked</code>’</h3>
|
|
|
|
<p>Radio and checkbox elements can be toggled by the user. Some menu items
|
|
are "checked" when the user selects them. When such elements are toggled
|
|
"on" the <code>:checked</code> pseudo-class applies. While the
|
|
<code>:checked</code> pseudo-class is dynamic in nature, and can altered
|
|
by user action, since it can also be based on the presence of semantic
|
|
attributes in the document, it applies to all media. For example, the
|
|
<code>:checked</code> pseudo-class initially applies to such elements that
|
|
have the HTML4 <code>selected</code> and <code>checked</code> attributes
|
|
as described in <a
|
|
href="http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.2.1">Section
|
|
17.2.1 of HTML4</a>, but of course the user can toggle "off" such elements
|
|
in which case the <code>:checked</code> pseudo-class would no longer
|
|
apply.
|
|
|
|
<div class=example>
|
|
<p>An unchecked checkbox can be selected by using the negation
|
|
pseudo-class:
|
|
|
|
<pre>:not(:checked)</pre>
|
|
</div>
|
|
|
|
<h3 id=indeterminate><span class=secno>11.3. </span> The
|
|
indeterminate-value pseudo-class ‘<code
|
|
class=css>:indeterminate</code>’</h3>
|
|
|
|
<p>The <code>:indeterminate</code> pseudo-class applies to UI elements
|
|
whose value is in an indeterminate state. For example, radio and checkbox
|
|
elements can be toggled between checked and unchecked states, but are
|
|
sometimes in an indeterminate state, neither checked nor unchecked.
|
|
Similarly a progress meter can be in an indeterminate state when the
|
|
percent completion is unknown.
|
|
|
|
<p>Like the <code>:checked</code> pseudo-class, <code>:indeterminate</code>
|
|
applies to all media. Components of a radio-group initialized with no
|
|
pre-selected choice, for example, would be <code>:indeterminate</code>
|
|
even in a static display.
|
|
|
|
<h3 id=default-pseudo><span class=secno>11.4. </span> The default option
|
|
pseudo-class ‘<code class=css>:default</code>’</h3>
|
|
|
|
<p>The <dfn id=default-pseudo-class><code>:default</code>
|
|
pseudo-class</dfn> applies to the one or more UI elements that are the
|
|
default among a set of similar elements. Typically applies to context menu
|
|
items, buttons and select lists/menus.
|
|
|
|
<p>One example is the default submit button among a set of buttons. Another
|
|
example is the default option from a popup menu. Multiple elements in a
|
|
select-many group could have multiple <code>:default</code> elements, like
|
|
a selection of pizza toppings for example.
|
|
|
|
<h3 id=validity-pseudos><span class=secno>11.5. </span> The validity
|
|
pseudo-classes ‘<code class=css>:valid</code>’ and
|
|
‘<code class=css>:invalid</code>’</h3>
|
|
|
|
<p>An element is <code id=valid-pseudo>:valid</code> or <code
|
|
id=invalid-pseudo>:invalid</code> when its contents or value is,
|
|
respectively, valid or invalid with respect to data validity semantics
|
|
defined by the document language (e.g. <a href="#XFORMS10"
|
|
rel=biblioentry>[XFORMS10]<!--{{XFORMS10}}--></a> or <a href="#HTML5"
|
|
rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>). An element which lacks data
|
|
validity semantics is neither <code>:valid</code> nor
|
|
<code>:invalid</code>. This is different from an element which otherwise
|
|
has no constraints. Such an element would always be <code>:valid</code>.
|
|
For example, a text input field with no constraints would always be
|
|
<code>:valid</code>.
|
|
|
|
<h3 id=range-pseudos><span class=secno>11.6. </span> The range
|
|
pseudo-classes ‘<code class=css>:in-range</code>’ and
|
|
‘<code class=css>:out-of-range</code>’</h3>
|
|
|
|
<p>The <code id=in-range-psuedo>:in-range</code> and <code
|
|
id=out-of-range-pseudo>:out-of-range</code> pseudo-classes apply only to
|
|
elements that have range limitations. An element is <code>:in-range</code>
|
|
or <code>:out-of-range</code> when the value that the element is bound to
|
|
is in range or out of range with respect to its range limits as defined by
|
|
the document language. An element that lacks data range limits or is not a
|
|
form control is neither <code>:in-range</code> nor
|
|
<code>:out-of-range</code>. E.g. a slider element with a value of 11
|
|
presented as a slider control that only represents the values from 1-10 is
|
|
:out-of-range. Another example is a menu element with a value of "E" that
|
|
happens to be presented in a popup menu that only has choices "A", "B" and
|
|
"C".
|
|
|
|
<h3 id=opt-pseudos><span class=secno>11.7. </span> The optionality
|
|
pseudo-classes ‘<code class=css>:required</code>’ and
|
|
‘<code class=css>:optional</code>’</h3>
|
|
|
|
<p>A form element is <code id=required-pseudo>:required</code> or <code
|
|
id=optional-pseudo>:optional</code> if a value for it is, respectively,
|
|
required or optional before the form it belongs to can be validly
|
|
submitted. Elements that are not form elements are neither required nor
|
|
optional.
|
|
|
|
<h3 id=rw-pseudos><span class=secno>11.8. </span> The mutability
|
|
pseudo-classes ‘<code class=css>:read-only</code>’ and
|
|
‘<code class=css>:read-write</code>’</h3>
|
|
|
|
<p>An element whose contents are not user-alterable is <code
|
|
id=read-only-pseudo>:read-only</code>. However, elements whose contents
|
|
are user-alterable (such as text input fields) are considered to be in a
|
|
:read-write state. In typical documents, most elements are
|
|
<code>:read-only</code>. However it may be possible, depending on the
|
|
document language, for any element to become <code
|
|
id=read-write-pseudo>:read-write</code>. For example, in HTML5 any element
|
|
with the <code>contenteditable</code> attribute set to the true state is
|
|
considered user-alterable. <a href="#HTML5"
|
|
rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>
|
|
|
|
<h2 id=structural-pseudos><span class=secno>12. </span> Tree-Structural
|
|
pseudo-classes</h2>
|
|
|
|
<p>Selectors introduces the concept of <dfn
|
|
id=structural-pseudo-classes>structural pseudo-classes</dfn> to permit
|
|
selection based on extra information that lies in the document tree but
|
|
cannot be represented by other simple selectors or combinators.
|
|
|
|
<p>Standalone text and other non-element nodes are not counted when
|
|
calculating the position of an element in the list of children of its
|
|
parent. When calculating the position of an element in the list of
|
|
children of its parent, the index numbering starts at 1.
|
|
|
|
<h3 id=root-pseudo><span class=secno>12.1. </span> ‘<code
|
|
class=css>:root</code>’ pseudo-class</h3>
|
|
|
|
<p>The <code>:root</code> pseudo-class represents an element that is the
|
|
root of the document. In HTML 4, this is always the <code>HTML</code>
|
|
element.
|
|
|
|
<h3 id=nth-child-pseudo><span class=secno>12.2. </span> ‘<code
|
|
class=css>:nth-child()</code>’ pseudo-class</h3>
|
|
|
|
<p>The <code>:nth-child(<var>a</var><code>n</code>+<var>b</var>)</code>
|
|
pseudo-class notation represents an element that has
|
|
<var>a</var><code>n</code>+<var>b</var>-1 siblings <strong>before</strong>
|
|
it in the document tree, for any positive integer or zero value of
|
|
<code>n</code>, and has a parent element. For values of <var>a</var> and
|
|
<var>b</var> greater than zero, this effectively divides the element's
|
|
children into groups of <var>a</var> elements (the last group taking the
|
|
remainder), and selecting the <var>b</var>th element of each group. For
|
|
example, this allows the selectors to address every other row in a table,
|
|
and could be used to alternate the color of paragraph text in a cycle of
|
|
four. The <var>a</var> and <var>b</var> values must be integers (positive,
|
|
negative, or zero). The index of the first child of an element is 1.
|
|
|
|
<p>In addition to this, <code>:nth-child()</code> can take ‘<code
|
|
class=css><code>odd</code></code>’ and ‘<code
|
|
class=css><code>even</code></code>’ as arguments instead.
|
|
‘<code class=css><code>odd</code></code>’ has the same
|
|
signification as <code>2n+1</code>, and ‘<code
|
|
class=css><code>even</code></code>’ has the same signification as
|
|
<code>2n</code>.
|
|
|
|
<p>The argument to <code>:nth-child()</code> must match the grammar below,
|
|
where <code>INTEGER</code> matches the token <code>[0-9]+</code> and the
|
|
rest of the tokenization is given by the <a href="#lex">Lexical
|
|
scanner</a> in section 10.2:
|
|
|
|
<pre>nth
|
|
: S* [ ['-'|'+']? INTEGER? {N} [ S* ['-'|'+'] S* INTEGER ]? |
|
|
['-'|'+']? INTEGER | {O}{D}{D} | {E}{V}{E}{N} ] S*
|
|
;</pre>
|
|
|
|
<div class=example>
|
|
<p>Examples:</p>
|
|
|
|
<pre>tr:nth-child(2n+1) /* represents every odd row of an HTML table */
|
|
tr:nth-child(odd) /* same */
|
|
tr:nth-child(2n+0) /* represents every even row of an HTML table */
|
|
tr:nth-child(even) /* same */
|
|
|
|
/* Alternate paragraph colours in CSS */
|
|
p:nth-child(4n+1) { color: navy; }
|
|
p:nth-child(4n+2) { color: green; }
|
|
p:nth-child(4n+3) { color: maroon; }
|
|
p:nth-child(4n+4) { color: purple; }</pre>
|
|
</div>
|
|
|
|
<p>When the value <var>b</var> is preceded by a negative sign, the "+"
|
|
character in the expression must be removed (it is effectively replaced by
|
|
the "-" character indicating the negative value of <var>b</var>).
|
|
|
|
<div class=example>
|
|
<p>Examples:</p>
|
|
|
|
<pre>:nth-child(10n-1) /* represents the 9th, 19th, 29th, etc, element */
|
|
:nth-child(10n+9) /* Same */
|
|
:nth-child(10n+-1) /* Syntactically invalid, and would be ignored */</pre>
|
|
</div>
|
|
|
|
<p>When <var>a</var>=0, the <var>a</var><code>n</code> part need not be
|
|
included (unless the <var>b</var> part is already omitted). When
|
|
<var>a</var><code>n</code> is not included and <var>b</var> is
|
|
non-negative, the <code>+</code> sign before <var>b</var> (when allowed)
|
|
may also be omitted. In this case the syntax simplifies to
|
|
<code>:nth-child(<var>b</var>)</code>.
|
|
|
|
<div class=example>
|
|
<p>Examples:</p>
|
|
|
|
<pre>foo:nth-child(0n+5) /* represents an element foo that is the 5th child
|
|
of its parent element */
|
|
foo:nth-child(5) /* same */</pre>
|
|
</div>
|
|
|
|
<p>When <var>a</var>=1, or <var>a</var>=-1, the <code>1</code> may be
|
|
omitted from the rule.
|
|
|
|
<div class=example>
|
|
<p>Examples:</p>
|
|
|
|
<p>The following selectors are therefore equivalent:</p>
|
|
|
|
<pre>bar:nth-child(1n+0) /* represents all bar elements, specificity (0,1,1) */
|
|
bar:nth-child(n+0) /* same */
|
|
bar:nth-child(n) /* same */
|
|
bar /* same but lower specificity (0,0,1) */</pre>
|
|
</div>
|
|
|
|
<p>If <var>b</var>=0, then every <var>a</var>th element is picked. In such
|
|
a case, the +<var>b</var> (or -<var>b</var>) part may be omitted unless
|
|
the <var>a</var> part is already omitted.
|
|
|
|
<div class=example>
|
|
<p>Examples:</p>
|
|
|
|
<pre>tr:nth-child(2n+0) /* represents every even row of an HTML table */
|
|
tr:nth-child(2n) /* same */</pre>
|
|
</div>
|
|
|
|
<p>Whitespace is permitted after the "(", before the ")", and on either
|
|
side of the "+" or "-" that separates the <var>a</var><code>n</code> and
|
|
<var>b</var> parts when both are present.
|
|
|
|
<div class=example>
|
|
<p>Valid Examples with white space:</p>
|
|
|
|
<pre>
|
|
:nth-child( 3n + 1 )
|
|
:nth-child( +3n - 2 )
|
|
:nth-child( -n+ 6)
|
|
:nth-child( +6 )
|
|
</pre>
|
|
|
|
<p>Invalid Examples with white space:</p>
|
|
|
|
<pre>
|
|
:nth-child(3 n)
|
|
:nth-child(+ 2n)
|
|
:nth-child(+ 2)
|
|
</pre>
|
|
</div>
|
|
|
|
<p>If both <var>a</var> and <var>b</var> are equal to zero, the
|
|
pseudo-class represents no element in the document tree.
|
|
|
|
<p>The value <var>a</var> can be negative, but only the positive values of
|
|
<var>a</var><code>n</code>+<var>b</var>, for <code>n</code>≥0, may
|
|
represent an element in the document tree.
|
|
|
|
<div class=example>
|
|
<p>Example:</p>
|
|
|
|
<pre>html|tr:nth-child(-n+6) /* represents the 6 first rows of XHTML tables */</pre>
|
|
</div>
|
|
|
|
<h3 id=nth-last-child-pseudo><span class=secno>12.3. </span> ‘<code
|
|
class=css>:nth-last-child()</code>’ pseudo-class</h3>
|
|
|
|
<p>The <code>:nth-last-child(<var>a</var>n+<var>b</var>)</code>
|
|
pseudo-class notation represents an element that has
|
|
<var>a</var><code>n</code>+<var>b</var>-1 siblings <strong>after</strong>
|
|
it in the document tree, for any positive integer or zero value of
|
|
<code>n</code>, and has a parent element. See <a
|
|
href="#nth-child-pseudo"><code>:nth-child()</code></a> pseudo-class for
|
|
the syntax of its argument. It also accepts the ‘<code
|
|
class=css><code>even</code></code>’ and ‘<code
|
|
class=css><code>odd</code></code>’ values as arguments.
|
|
|
|
<div class=example>
|
|
<p>Examples:</p>
|
|
|
|
<pre>tr:nth-last-child(-n+2) /* represents the two last rows of an HTML table */
|
|
|
|
foo:nth-last-child(odd) /* represents all odd foo elements in their parent element,
|
|
counting from the last one */</pre>
|
|
</div>
|
|
|
|
<h3 id=nth-of-type-pseudo><span class=secno>12.4. </span> ‘<code
|
|
class=css>:nth-of-type()</code>’ pseudo-class</h3>
|
|
|
|
<p>The <code>:nth-of-type(<var>a</var>n+<var>b</var>)</code> pseudo-class
|
|
notation represents an element that has
|
|
<var>a</var><code>n</code>+<var>b</var>-1 siblings with the same expanded
|
|
element name <strong>before</strong> it in the document tree, for any zero
|
|
or positive integer value of <code>n</code>, and has a parent element. See
|
|
<a href="#nth-child-pseudo"><code>:nth-child()</code></a> pseudo-class for
|
|
the syntax of its argument. It also accepts the ‘<code
|
|
class=css><code>even</code></code>’ and ‘<code
|
|
class=css><code>odd</code></code>’ values.
|
|
|
|
<div class=example>
|
|
<p>CSS example:</p>
|
|
|
|
<p>This allows an author to alternate the position of floated images:</p>
|
|
|
|
<pre>img:nth-of-type(2n+1) { float: right; }
|
|
img:nth-of-type(2n) { float: left; }</pre>
|
|
</div>
|
|
|
|
<h3 id=nth-last-of-type-pseudo><span class=secno>12.5. </span> ‘<code
|
|
class=css>:nth-last-of-type()</code>’ pseudo-class</h3>
|
|
|
|
<p>The <code>:nth-last-of-type(<var>a</var>n+<var>b</var>)</code>
|
|
pseudo-class notation represents an element that has
|
|
<var>a</var><code>n</code>+<var>b</var>-1 siblings with the same expanded
|
|
element name <strong>after</strong> it in the document tree, for any zero
|
|
or positive integer value of <code>n</code>, and has a parent element. See
|
|
<a href="#nth-child-pseudo"><code>:nth-child()</code></a> pseudo-class for
|
|
the syntax of its argument. It also accepts the ‘<code
|
|
class=css><code>even</code></code>’ and ‘<code
|
|
class=css><code>odd</code></code>’ values.
|
|
|
|
<div class=example>
|
|
<p>Example:</p>
|
|
|
|
<p>To represent all <code>h2</code> children of an XHTML <code>body</code>
|
|
except the first and last, one could use the following selector:</p>
|
|
|
|
<pre>body > h2:nth-of-type(n+2):nth-last-of-type(n+2)</pre>
|
|
|
|
<p>In this case, one could also use <code>:not()</code>, although the
|
|
selector ends up being just as long:</p>
|
|
|
|
<pre>body > h2:not(:first-of-type):not(:last-of-type)</pre>
|
|
</div>
|
|
|
|
<h3 id=nth-match><span class=secno>12.6. </span> ‘<code
|
|
class=css>:nth-match()</code>’ pseudo-class</h3>
|
|
|
|
<p><code>:nth-match(<var>a</var>n+<var>b</var> of
|
|
<var>selector-list</var>)</code> pseudo-class notation represents an
|
|
element that has a parent and has
|
|
<var>a</var><code>n</code>+<var>b</var>-1 siblings that match the given
|
|
<var>selector-list</var> <strong>before</strong> it in the document tree,
|
|
for any zero or positive integer value of <code>n</code>.
|
|
|
|
<p>See <a href="#nth-child-pseudo"><code>:nth-child()</code></a>
|
|
pseudo-class for the syntax of its <var>a</var>n+<var>b</var> argument,
|
|
which can also be replaced with the ‘<code
|
|
class=css><code>even</code></code>’ and ‘<code
|
|
class=css><code>odd</code></code>’ keywords.
|
|
<!-- define <selector>. Split an+b into a similar <notation> -->
|
|
|
|
<h3 id=nth-last-match><span class=secno>12.7. </span> ‘<code
|
|
class=css>:nth-last-match()</code>’ pseudo-class</h3>
|
|
|
|
<p><code>:nth-last-match(<var>a</var>n+<var>b</var> of
|
|
<var>selector-list</var>)</code> pseudo-class notation represents an
|
|
element that has a parent and has
|
|
<var>a</var><code>n</code>+<var>b</var>-1 siblings that match the given
|
|
<var>selector-list</var> <strong>after</strong> it in the document tree,
|
|
for any zero or positive integer value of <code>n</code>.
|
|
|
|
<p>See <a href="#nth-child-pseudo"><code>:nth-child()</code></a>
|
|
pseudo-class for the syntax of its <var>a</var>n+<var>b</var> argument,
|
|
which can also be replaced with the ‘<code
|
|
class=css><code>even</code></code>’ and ‘<code
|
|
class=css><code>odd</code></code>’ keywords.
|
|
|
|
<h3 id=first-child-pseudo><span class=secno>12.8. </span> ‘<code
|
|
class=css>:first-child</code>’ pseudo-class</h3>
|
|
|
|
<p>Same as <code>:nth-child(1)</code>. The <code>:first-child</code>
|
|
pseudo-class represents an element that is the first child of some other
|
|
element.
|
|
|
|
<div class=example>
|
|
<p>Examples:</p>
|
|
|
|
<p>The following selector represents a <code>p</code> element that is the
|
|
first child of a <code>div</code> element:</p>
|
|
|
|
<pre>div > p:first-child</pre>
|
|
|
|
<p>This selector can represent the <code>p</code> inside the
|
|
<code>div</code> of the following fragment:</p>
|
|
|
|
<pre><p> The last P before the note.</p>
|
|
<div class="note">
|
|
<p> The first P inside the note.</p>
|
|
</div></pre>
|
|
but cannot represent the second <code>p</code> in the following fragment:
|
|
<pre><p> The last P before the note.</p>
|
|
<div class="note">
|
|
<h2> Note </h2>
|
|
<p> The first P inside the note.</p>
|
|
</div></pre>
|
|
|
|
<p>The following two selectors are usually equivalent:</p>
|
|
|
|
<pre>* > a:first-child /* a is first child of any element */
|
|
a:first-child /* Same (assuming a is not the root element) */</pre>
|
|
</div>
|
|
|
|
<h3 id=last-child-pseudo><span class=secno>12.9. </span> ‘<code
|
|
class=css>:last-child</code>’ pseudo-class</h3>
|
|
|
|
<p>Same as <code>:nth-last-child(1)</code>. The <code>:last-child</code>
|
|
pseudo-class represents an element that is the last child of some other
|
|
element.
|
|
|
|
<div class=example>
|
|
<p>Example:</p>
|
|
|
|
<p>The following selector represents a list item <code>li</code> that is
|
|
the last child of an ordered list <code>ol</code>.
|
|
|
|
<pre>ol > li:last-child</pre>
|
|
</div>
|
|
|
|
<h3 id=first-of-type-pseudo><span class=secno>12.10. </span> ‘<code
|
|
class=css>:first-of-type</code>’ pseudo-class</h3>
|
|
|
|
<p>Same as <code>:nth-of-type(1)</code>. The <code>:first-of-type</code>
|
|
pseudo-class represents an element that is the first sibling of its type
|
|
in the list of children of its parent element.
|
|
|
|
<div class=example>
|
|
<p>Example:</p>
|
|
|
|
<p>The following selector represents a definition title <code>dt</code>
|
|
inside a definition list <code>dl</code>, this <code>dt</code> being the
|
|
first of its type in the list of children of its parent element.</p>
|
|
|
|
<pre>dl dt:first-of-type</pre>
|
|
|
|
<p>It is a valid description for the first two <code>dt</code> elements in
|
|
the following example but not for the third one:</p>
|
|
|
|
<pre><dl>
|
|
<dt>gigogne</dt>
|
|
<dd>
|
|
<dl>
|
|
<dt>fusée</dt>
|
|
<dd>multistage rocket</dd>
|
|
<dt>table</dt>
|
|
<dd>nest of tables</dd>
|
|
</dl>
|
|
</dd>
|
|
</dl></pre>
|
|
</div>
|
|
|
|
<h3 id=last-of-type-pseudo><span class=secno>12.11. </span> ‘<code
|
|
class=css>:last-of-type</code>’ pseudo-class</h3>
|
|
|
|
<p>Same as <code>:nth-last-of-type(1)</code>. The
|
|
<code>:last-of-type</code> pseudo-class represents an element that is the
|
|
last sibling of its type in the list of children of its parent element.
|
|
|
|
<div class=example>
|
|
<p>Example:</p>
|
|
|
|
<p>The following selector represents the last data cell <code>td</code> of
|
|
a table row <code>tr</code>.</p>
|
|
|
|
<pre>tr > td:last-of-type</pre>
|
|
</div>
|
|
|
|
<h3 id=only-child-pseudo><span class=secno>12.12. </span> ‘<code
|
|
class=css>:only-child</code>’ pseudo-class</h3>
|
|
|
|
<p>Represents an element that has a parent element and whose parent element
|
|
has no other element children. Same as
|
|
<code>:first-child:last-child</code> or
|
|
<code>:nth-child(1):nth-last-child(1)</code>, but with a lower
|
|
specificity.
|
|
|
|
<h3 id=only-of-type-pseudo><span class=secno>12.13. </span> ‘<code
|
|
class=css>:only-of-type</code>’ pseudo-class</h3>
|
|
|
|
<p>Represents an element that has a parent element and whose parent element
|
|
has no other element children with the same expanded element name. Same as
|
|
<code>:first-of-type:last-of-type</code> or
|
|
<code>:nth-of-type(1):nth-last-of-type(1)</code>, but with a lower
|
|
specificity.
|
|
|
|
<h3 id=empty-pseudo><span class=secno>12.14. </span> ‘<code
|
|
class=css>:empty</code>’ pseudo-class</h3>
|
|
|
|
<p>The <code>:empty</code> pseudo-class represents an element that has no
|
|
children at all. In terms of the document tree, only element nodes and
|
|
content nodes (such as DOM <a href="#DOM-LEVEL-3-CORE"
|
|
rel=biblioentry>[DOM-LEVEL-3-CORE]<!--{{DOM-LEVEL-3-CORE}}--></a> text
|
|
nodes, CDATA nodes, and entity references) whose data has a non-zero
|
|
length must be considered as affecting emptiness; comments, processing
|
|
instructions, and other nodes must not affect whether an element is
|
|
considered empty or not.
|
|
|
|
<div class=example>
|
|
<p>Examples:</p>
|
|
|
|
<p><code>p:empty</code> is a valid representation of the following
|
|
fragment:</p>
|
|
|
|
<pre><p></p></pre>
|
|
|
|
<p><code>foo:empty</code> is not a valid representation for the following
|
|
fragments:</p>
|
|
|
|
<pre><foo>bar</foo></pre>
|
|
|
|
<pre><foo><bar>bla</bar></foo></pre>
|
|
|
|
<pre><foo>this is not <bar>:empty</bar></foo></pre>
|
|
</div>
|
|
|
|
<h2 id=table-pseudos><span class=secno>13. </span> Grid-Structural
|
|
Selectors</h2>
|
|
|
|
<p>The double-association of a cell in a 2D grid (to its row and column)
|
|
cannot be represented by parentage in a hierarchical markup language. Only
|
|
one of those associations can be represented hierarchically: the other
|
|
must be explicitly or implicitly defined in the document language
|
|
semantics. In both HTML and DocBook, two of the most common hierarchical
|
|
markup languages, the markup is row-primary (that is, the row associations
|
|
are represented hierarchically); the columns must be implied. Thus the
|
|
<code>:nth-column()</code>, <code>:nth-last-column()</code>, and
|
|
<code>:column()</code> are defined. In a column-primary format, these
|
|
pseudo-classes would match against row associations instead.
|
|
|
|
<h3 id=column-pseudo><span class=secno>13.1. </span> ‘<code
|
|
class=css>:column()</code>’ pseudo-class</h3>
|
|
|
|
<p>The <code>:column(<var>selector-list</var>)</code> pseudo-class notation
|
|
represents a cell element belonging to a column that is represented by the
|
|
element selected by its argument. Column membership is determined based on
|
|
the semantics of the document language only: whether and how the elements
|
|
are presented is not considered. If a cell element belongs to more than
|
|
one column, it is represented by a selector indicating any of those
|
|
columns.
|
|
|
|
<div class=example>
|
|
<p>The following example makes cells C, E, and G yellow.</p>
|
|
|
|
<pre>:column(col.selected) { background: yellow; }</pre>
|
|
|
|
<pre>
|
|
<!-- --><table>
|
|
<!-- --> <col span="2">
|
|
<!-- --> <col class="selected">
|
|
<!-- --> <tr><td>A <td>B <td>C
|
|
<!-- --> <tr><td span="2">D <td>E
|
|
<!-- --> <tr><td>F <td span="2">G
|
|
<!-- --></table></pre>
|
|
</div>
|
|
|
|
<h3 id=nth-column-pseudo><span class=secno>13.2. </span> ‘<code
|
|
class=css>:nth-column()</code>’ pseudo-class</h3>
|
|
|
|
<p>The <code>:nth-column(<var>a</var>n+<var>b</var>)</code> pseudo-class
|
|
notation represents a cell element belonging to a column that has
|
|
<var>a</var><code>n</code>+<var>b</var>-1 columns <strong>before</strong>
|
|
it, for any positive integer or zero value of <code>n</code>. Column
|
|
membership is determined based on the semantics of the document language
|
|
only: whether and how the elements are presented is not considered. If a
|
|
cell element belongs to more than one column, it is represented by a
|
|
selector indicating any of those columns.
|
|
|
|
<p>See <a href="#nth-child-pseudo"><code>:nth-child()</code></a>
|
|
pseudo-class for the syntax of its argument. It also accepts the
|
|
‘<code class=css><code>even</code></code>’ and ‘<code
|
|
class=css><code>odd</code></code>’ values as arguments.
|
|
|
|
<h3 id=nth-last-column-pseudo><span class=secno>13.3. </span> ‘<code
|
|
class=css>:nth-last-column()</code>’ pseudo-class</h3>
|
|
|
|
<p>The <code>:nth-column(<var>a</var>n+<var>b</var>)</code> pseudo-class
|
|
notation represents a cell element belonging to a column that has
|
|
<var>a</var><code>n</code>+<var>b</var>-1 columns <strong>after</strong>
|
|
it, for any positive integer or zero value of <code>n</code>. Column
|
|
membership is determined based on the semantics of the document language
|
|
only: whether and how the elements are presented is not considered. If a
|
|
cell element belongs to more than one column, it is represented by a
|
|
selector indicating any of those columns.
|
|
|
|
<p>See <a href="#nth-child-pseudo"><code>:nth-child()</code></a>
|
|
pseudo-class for the syntax of its argument. It also accepts the
|
|
‘<code class=css><code>even</code></code>’ and ‘<code
|
|
class=css><code>odd</code></code>’ values as arguments.
|
|
|
|
<h2 id=combinators><span class=secno>14. </span> Combinators</h2>
|
|
|
|
<h3 id=descendant-combinators><span class=secno>14.1. </span> Descendant
|
|
combinator</h3>
|
|
|
|
<p>At times, authors may want selectors to describe an element that is the
|
|
descendant of another element in the document tree (e.g., "an
|
|
<code>EM</code> element that is contained within an <code>H1</code>
|
|
element"). Descendant combinators express such a relationship. A
|
|
descendant combinator is <a href="#whitespace">whitespace</a> that
|
|
separates two compound selectors. A selector of the form "<code>A
|
|
B</code>" represents an element <code>B</code> that is an arbitrary
|
|
descendant of some ancestor element <code>A</code>.
|
|
|
|
<div class=example>
|
|
<p>Examples:</p>
|
|
|
|
<p>For example, consider the following selector:</p>
|
|
|
|
<pre>h1 em</pre>
|
|
|
|
<p>It represents an <code>em</code> element being the descendant of an
|
|
<code>h1</code> element. It is a correct and valid, but partial,
|
|
description of the following fragment:</p>
|
|
|
|
<pre><h1>This <span class="myclass">headline
|
|
is <em>very</em> important</span></h1></pre>
|
|
|
|
<p>The following selector:</p>
|
|
|
|
<pre>div * p</pre>
|
|
|
|
<p>represents a <code>p</code> element that is a grandchild or later
|
|
descendant of a <code>div</code> element. Note the whitespace on either
|
|
side of the "*" is not part of the universal selector; the whitespace is
|
|
a combinator indicating that the <code>div</code> must be the ancestor of
|
|
some element, and that that element must be an ancestor of the
|
|
<code>p</code>.</p>
|
|
|
|
<p>The following selector, which combines descendant combinators and <a
|
|
href="#attribute-selectors">attribute selectors</a>, represents an
|
|
element that (1) has the <code>href</code> attribute set and (2) is
|
|
inside a <code>p</code> that is itself inside a <code>div</code>:</p>
|
|
|
|
<pre>div p *[href]</pre>
|
|
</div>
|
|
|
|
<h3 id=child-combinators><span class=secno>14.2. </span> Child combinators</h3>
|
|
|
|
<p>A <dfn id=child-combinator>child combinator</dfn> describes a childhood
|
|
relationship between two elements. A child combinator is made of the
|
|
"greater-than sign" (U+003E, <code>></code>) character and
|
|
separates two compound selectors.
|
|
|
|
<div class=example>
|
|
<p>Examples:</p>
|
|
|
|
<p>The following selector represents a <code>p</code> element that is
|
|
child of <code>body</code>:</p>
|
|
|
|
<pre>body > p</pre>
|
|
|
|
<p>The following example combines descendant combinators and child
|
|
combinators.</p>
|
|
|
|
<pre>div ol>li p</pre>
|
|
<!-- LEAVE THOSE SPACES OUT! see below -->
|
|
<p>It represents a <code>p</code> element that is a descendant of an
|
|
<code>li</code> element; the <code>li</code> element must be the child of
|
|
an <code>ol</code> element; the <code>ol</code> element must be a
|
|
descendant of a <code>div</code>. Notice that the optional white space
|
|
around the ">" combinator has been left out.</p>
|
|
</div>
|
|
|
|
<p>For information on selecting the first child of an element, please see
|
|
the section on the <code><a
|
|
href="#structural-pseudos">:first-child</a></code> pseudo-class above.
|
|
|
|
<h3 id=adjacent-sibling-combinators><span class=secno>14.3. </span>
|
|
Adjacent sibling combinator</h3>
|
|
|
|
<p>The adjacent sibling combinator is made of the "plus sign"
|
|
(U+002B, <code>+</code>) character that separates two compound selectors.
|
|
The elements represented by the two compound selectors share the same
|
|
parent in the document tree and the element represented by the first
|
|
compound selector immediately precedes the element represented by the
|
|
second one. Non-element nodes (e.g. text between elements) are ignored
|
|
when considering the adjacency of elements.
|
|
|
|
<div class=example>
|
|
<p>Examples:</p>
|
|
|
|
<p>The following selector represents a <code>p</code> element immediately
|
|
following a <code>math</code> element:</p>
|
|
|
|
<pre>math + p</pre>
|
|
|
|
<p>The following selector is conceptually similar to the one in the
|
|
previous example, except that it adds an attribute selector — it
|
|
adds a constraint to the <code>h1</code> element, that it must have
|
|
<code>class="opener"</code>:</p>
|
|
|
|
<pre>h1.opener + h2</pre>
|
|
</div>
|
|
|
|
<h3 id=general-sibling-combinators><span class=secno>14.4. </span> General
|
|
sibling combinator</h3>
|
|
|
|
<p>The general sibling combinator is made of the "tilde" (U+007E,
|
|
<code>~</code>) character that separates two compound selectors. The
|
|
elements represented by the two compound selectors share the same parent
|
|
in the document tree and the element represented by the first compound
|
|
selector precedes (not necessarily immediately) the element represented by
|
|
the second one.
|
|
|
|
<div class=example>
|
|
<p>Example:</p>
|
|
|
|
<pre>h1 ~ pre</pre>
|
|
|
|
<p>represents a <code>pre</code> element following an <code>h1</code>. It
|
|
is a correct and valid, but partial, description of:</p>
|
|
|
|
<pre><h1>Definition of the function a</h1>
|
|
<p>Function a(x) has to be applied to all figures in the table.</p>
|
|
<pre>function a(x) = 12x/13.5</pre></pre>
|
|
</div>
|
|
|
|
<h3 id=idref-combinators><span class=secno>14.5. </span> Reference
|
|
combinators</h3>
|
|
|
|
<p>The IDREF combinator consists of two slashes with an indetervening <a
|
|
href="http://www.w3.org/TR/css3-namespace/#css-qnames">CSS qualified
|
|
name</a>, and separates two compound selectors, e.g. <code>A /attr/
|
|
B</code>. The elements represented by the two compound seletors are
|
|
related in that an element represented by the first compound selector has
|
|
an ID-reference to the element represented by the second compound
|
|
selector. The ID reference can be given as either an IDREF or a fragment
|
|
URL: the reference is valid as long as the value of the attribute named in
|
|
the combinator consists of either the ID alone or a hash mark (#) followed
|
|
by the ID. Attribute matching for reference combinators follow the same
|
|
rules as for <a
|
|
href="http://www.w3.org/TR/css3-selectors/#attribute-selectors">attribute
|
|
selectors</a>.
|
|
|
|
<div class=example>
|
|
<p>The following example highlights an <code><input></code> element
|
|
when its <a
|
|
href="http://www.w3.org/TR/html40/interact/forms.html#h-17.9"><code><label></code></a>
|
|
is focused or hovered-over:</p>
|
|
|
|
<pre>label:matches(:hover, :focus) /for/ input, /* association by "for" attribute */
|
|
<!-- -->label:matches(:hover, :focus):not([for]) input { /* association by containment */
|
|
<!-- --> box-shadow: yellow 0 0 10px; }</pre>
|
|
</div>
|
|
|
|
<p class=issue>This could also be implemented as a functional pseudo-class.
|
|
|
|
<h2 id=specificity><span class=secno>15. </span> Calculating a selector's
|
|
specificity</h2>
|
|
|
|
<p>A selector's specificity is calculated as follows:
|
|
|
|
<ul>
|
|
<li>count the number of ID selectors in the selector (= a)
|
|
|
|
<li>count the number of class selectors, attributes selectors, and
|
|
pseudo-classes in the selector (= b)
|
|
|
|
<li>count the number of type selectors and pseudo-elements in the selector
|
|
(= c)
|
|
|
|
<li>ignore the universal selector
|
|
</ul>
|
|
|
|
<p>The specificity of a <a href="#negation">negation</a> or <a
|
|
href="#matches">matches</a> pseudo-class is the specificity of its most
|
|
specific argument. The pseudo-class itself does not count as pseudo-class.
|
|
|
|
|
|
<p class=issue>It would probably be better to have match-sensitive
|
|
specificity, if possible. See <a
|
|
href="http://lists.w3.org/Archives/Public/www-style/2010Sep/0534.html">dbaron's
|
|
message</a>.
|
|
|
|
<p>Concatenating the three numbers a-b-c (in a number system with a large
|
|
base) gives the specificity.
|
|
|
|
<div class=example>
|
|
<p>Examples:</p>
|
|
|
|
<pre>* /* a=0 b=0 c=0 -> specificity = 0 */
|
|
LI /* a=0 b=0 c=1 -> specificity = 1 */
|
|
UL LI /* a=0 b=0 c=2 -> specificity = 2 */
|
|
UL OL+LI /* a=0 b=0 c=3 -> specificity = 3 */
|
|
H1 + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */
|
|
UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */
|
|
LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */
|
|
#x34y /* a=1 b=0 c=0 -> specificity = 100 */
|
|
#s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */
|
|
</pre>
|
|
</div>
|
|
|
|
<p class=note><strong>Note:</strong> Repeated occurrances of the same
|
|
simple selector are allowed and do increase specificity.
|
|
|
|
<p class=note><strong>Note:</strong> the specificity of the styles
|
|
specified in an HTML <code>style</code> attribute is described in CSS 2.1.
|
|
<a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
|
|
|
|
<h2 id=formal-syntax><span class=secno>16. </span> Formal Syntax</h2>
|
|
|
|
<p class=issue>This section needs to be updated.
|
|
|
|
<h3 id=grammar><span class=secno>16.1. </span> Grammar</h3>
|
|
|
|
<p>The grammar below defines the syntax of Selectors. It is globally LL(1)
|
|
and can be locally LL(2) (but note that most UAs should not use it
|
|
directly, since it doesn't express the parsing conventions). The format of
|
|
the productions is optimized for human consumption and some shorthand
|
|
notations beyond Yacc (see <a href="#YACC"
|
|
rel=biblioentry>[YACC]<!--{{!YACC}}--></a>) are used:
|
|
|
|
<ul>
|
|
<li><b>*</b>: 0 or more
|
|
|
|
<li><b>+</b>: 1 or more
|
|
|
|
<li><b>?</b>: 0 or 1
|
|
|
|
<li><b>|</b>: separates alternatives
|
|
|
|
<li><b>[ ]</b>: grouping
|
|
</ul>
|
|
|
|
<p>The productions are:
|
|
|
|
<pre>selectors_group
|
|
: selector [ COMMA S* selector ]*
|
|
;
|
|
|
|
selector
|
|
: compound_selector [ combinator simple_selector_sequence ]*
|
|
;
|
|
|
|
combinator
|
|
/* combinators can be surrounded by whitespace */
|
|
: PLUS S* | GREATER S* | TILDE S* | S+
|
|
;
|
|
|
|
simple_selector_sequence
|
|
: [ type_selector | universal ]
|
|
[ HASH | class | attrib | pseudo | negation ]*
|
|
| [ HASH | class | attrib | pseudo | negation ]+
|
|
;
|
|
|
|
type_selector
|
|
: [ namespace_prefix ]? element_name
|
|
;
|
|
|
|
namespace_prefix
|
|
: [ IDENT | '*' ]? '|'
|
|
;
|
|
|
|
element_name
|
|
: IDENT
|
|
;
|
|
|
|
universal
|
|
: [ namespace_prefix ]? '*'
|
|
;
|
|
|
|
class
|
|
: '.' IDENT
|
|
;
|
|
|
|
attrib
|
|
: '[' S* [ namespace_prefix ]? IDENT S*
|
|
[ [ PREFIXMATCH |
|
|
SUFFIXMATCH |
|
|
SUBSTRINGMATCH |
|
|
'=' |
|
|
INCLUDES |
|
|
DASHMATCH ] S* [ IDENT | STRING ] S*
|
|
]? ']'
|
|
;
|
|
|
|
pseudo
|
|
/* '::' starts a pseudo-element, ':' a pseudo-class */
|
|
/* Exceptions: :first-line, :first-letter, :before and :after. */
|
|
/* Note that pseudo-elements are restricted to one per selector and */
|
|
/* occur only in the last compound_selector. */
|
|
: ':' ':'? [ IDENT | functional_pseudo ]
|
|
;
|
|
|
|
functional_pseudo
|
|
: FUNCTION S* expression ')'
|
|
;
|
|
|
|
expression
|
|
/* In CSS3, the expressions are identifiers, strings, */
|
|
/* or of the form "an+b" */
|
|
: [ [ PLUS | '-' | DIMENSION | NUMBER | STRING | IDENT ] S* ]+
|
|
;
|
|
|
|
negation
|
|
: NOT S* negation_arg S* ')'
|
|
;
|
|
|
|
negation_arg
|
|
: type_selector | universal | HASH | class | attrib | pseudo
|
|
;</pre>
|
|
|
|
<h3 id=lex><span class=secno>16.2. </span> Lexical scanner</h3>
|
|
|
|
<p>The following is the tokenizer, written in Flex (see <a href="#FLEX"
|
|
rel=biblioentry>[FLEX]<!--{{!FLEX}}--></a>) notation. The tokenizer is
|
|
case-insensitive.
|
|
|
|
<p>The two occurrences of "\377" represent the highest character number
|
|
that current versions of Flex can deal with (decimal 255). They should be
|
|
read as "\4177777" (decimal 1114111), which is the highest possible code
|
|
point in Unicode/ISO-10646. <a href="#UNICODE"
|
|
rel=biblioentry>[UNICODE]<!--{{!UNICODE}}--></a>
|
|
|
|
<pre>%option case-insensitive
|
|
|
|
ident [-]?{nmstart}{nmchar}*
|
|
name {nmchar}+
|
|
nmstart [_a-z]|{nonascii}|{escape}
|
|
nonascii [^\0-\177]
|
|
unicode \\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])?
|
|
escape {unicode}|\\[^\n\r\f0-9a-f]
|
|
nmchar [_a-z0-9-]|{nonascii}|{escape}
|
|
num [0-9]+|[0-9]*\.[0-9]+
|
|
string {string1}|{string2}
|
|
string1 \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*\"
|
|
string2 \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*\'
|
|
invalid {invalid1}|{invalid2}
|
|
invalid1 \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*
|
|
invalid2 \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*
|
|
nl \n|\r\n|\r|\f
|
|
w [ \t\r\n\f]*
|
|
|
|
D d|\\0{0,4}(44|64)(\r\n|[ \t\r\n\f])?
|
|
E e|\\0{0,4}(45|65)(\r\n|[ \t\r\n\f])?
|
|
N n|\\0{0,4}(4e|6e)(\r\n|[ \t\r\n\f])?|\\n
|
|
O o|\\0{0,4}(4f|6f)(\r\n|[ \t\r\n\f])?|\\o
|
|
T t|\\0{0,4}(54|74)(\r\n|[ \t\r\n\f])?|\\t
|
|
V v|\\0{0,4}(58|78)(\r\n|[ \t\r\n\f])?|\\v
|
|
|
|
%%
|
|
|
|
[ \t\r\n\f]+ return S;
|
|
|
|
"~=" return INCLUDES;
|
|
"|=" return DASHMATCH;
|
|
"^=" return PREFIXMATCH;
|
|
"$=" return SUFFIXMATCH;
|
|
"*=" return SUBSTRINGMATCH;
|
|
{ident} return IDENT;
|
|
{string} return STRING;
|
|
{ident}"(" return FUNCTION;
|
|
{num} return NUMBER;
|
|
"#"{name} return HASH;
|
|
{w}"+" return PLUS;
|
|
{w}">" return GREATER;
|
|
{w}"," return COMMA;
|
|
{w}"~" return TILDE;
|
|
":"{N}{O}{T}"(" return NOT;
|
|
@{ident} return ATKEYWORD;
|
|
{invalid} return INVALID;
|
|
{num}% return PERCENTAGE;
|
|
{num}{ident} return DIMENSION;
|
|
"<!--" return CDO;
|
|
"-->" return CDC;
|
|
|
|
\/\*[^*]*\*+([^/*][^*]*\*+)*\/ /* ignore comments */
|
|
|
|
. return *yytext;</pre>
|
|
|
|
<h2 id=profiling><span class=secno>17. </span> Profiles</h2>
|
|
|
|
<p>Each specification using Selectors must define the subset of Selectors
|
|
it allows and excludes, and describe the local meaning of all the
|
|
components of that subset.
|
|
|
|
<h3 id=css-profiles><span class=secno>17.1. </span> CSS Profiles</h3>
|
|
|
|
<p><em>This section is non-normative.</em>
|
|
|
|
<p>
|
|
|
|
<p>In CSS, selectors express pattern matching rules that determine which
|
|
style rules apply to elements in the document tree.
|
|
|
|
<p>The following selector (CSS level 2) will <b>match</b> all anchors
|
|
<code>a</code> with attribute <code>name</code> set inside a section 1
|
|
header <code>h1</code>:
|
|
|
|
<pre>h1 a[name]</pre>
|
|
|
|
<p>All CSS declarations attached to such a selector are applied to elements
|
|
matching it.
|
|
|
|
<table class=tprofile>
|
|
<caption>CSS Level 1 Selectors Profile</caption>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<th>Specification
|
|
|
|
<td><a href="http://www.w3.org/TR/CSS1/">CSS level 1</a>
|
|
|
|
<tr>
|
|
<th>Accepts
|
|
|
|
<td>type selectors<br>
|
|
class selectors<br>
|
|
ID selectors<br>
|
|
:link, :visited and :active pseudo-classes<br>
|
|
descendant combinator <br>
|
|
::first-line and ::first-letter pseudo-elements
|
|
|
|
<tr>
|
|
<th>Excludes
|
|
|
|
<td>namespace prefixes
|
|
|
|
<tr>
|
|
<th>Extra constraints
|
|
|
|
<td>only one class selector allowed per compound selector,
|
|
pseudo-elements only accept one-colon syntax
|
|
</table>
|
|
|
|
<table class=tprofile>
|
|
<caption>CSS Level 2 Selectors Profile</caption>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<th>Specification
|
|
|
|
<td><a href="http://www.w3.org/TR/CSS2/">CSS level 2</a>
|
|
|
|
<tr>
|
|
<th>Accepts
|
|
|
|
<td>type selectors<br>
|
|
universal selector<br>
|
|
attribute presence and values selectors<br>
|
|
class selectors<br>
|
|
ID selectors<br>
|
|
:link, :visited, :active, :hover, :focus, :lang() and :first-child
|
|
pseudo-classes <br>
|
|
descendant combinator<br>
|
|
child combinator<br>
|
|
adjacent sibling combinator<br>
|
|
::first-line and ::first-letter pseudo-elements<br>
|
|
::before and ::after pseudo-elements
|
|
|
|
<tr>
|
|
<th>Excludes
|
|
|
|
<td>namespaces, case-insensitive attribute selectors
|
|
|
|
<tr>
|
|
<th>Extra constraints
|
|
|
|
<td>pseudo-elements only accept one-colon syntax
|
|
</table>
|
|
|
|
<h3 id=stts-profile><span class=secno>17.2. </span> STTS Profiles</h3>
|
|
|
|
<p><em>This section is non-normative.</em>
|
|
|
|
<p>Selectors can be used in STTS 3 in two different manners:
|
|
|
|
<ol>
|
|
<li>a selection mechanism equivalent to CSS selection mechanism:
|
|
declarations attached to a given selector are applied to elements
|
|
matching that selector,
|
|
|
|
<li>fragment descriptions that appear on the right side of declarations.
|
|
</ol>
|
|
|
|
<table class=tprofile>
|
|
<caption>STTS3 Selectors Profile</caption>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<th>Specification
|
|
|
|
<td><a href="http://www.w3.org/TR/NOTE-STTS3">STTS 3</a>
|
|
|
|
<tr>
|
|
<th>Accepts
|
|
|
|
<td>type selectors<br>
|
|
universal selectors<br>
|
|
attribute selectors<br>
|
|
class selectors<br>
|
|
ID selectors<br>
|
|
level 3 structural pseudo-classes<br>
|
|
all combinators except reference combinator<br>
|
|
namespaces
|
|
|
|
<tr>
|
|
<th>Excludes
|
|
|
|
<td>namespaces, case-insensitive attribute selectors
|
|
|
|
<tr>
|
|
<th>Extra constraints
|
|
|
|
<td>some selectors and combinators are not allowed in fragment
|
|
descriptions on the right side of STTS declarations.
|
|
</table>
|
|
|
|
<h2 id=conformance><span class=secno>18. </span> Conformance</h2>
|
|
|
|
<h3 id=conventions><span class=secno>18.1. </span>Document Conventions</h3>
|
|
|
|
<p>Conformance requirements are expressed with a combination of descriptive
|
|
assertions and RFC 2119 terminology. The key words “MUST”, “MUST
|
|
NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
|
|
“SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
|
|
normative parts of this document are to be interpreted as described in RFC
|
|
2119. However, for readability, these words do not appear in all uppercase
|
|
letters in this specification.
|
|
|
|
<p>All of the text of this specification is normative except sections
|
|
explicitly marked as non-normative, examples, and notes. <a
|
|
href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
|
|
|
|
<p>Examples in this specification are introduced with the words “for
|
|
example” or are set apart from the normative text with
|
|
<code>class="example"</code>, like this:
|
|
|
|
<div class=example>
|
|
<p>This is an example of an informative example.</p>
|
|
</div>
|
|
|
|
<p>Informative notes begin with the word “Note” and are set apart from
|
|
the normative text with <code>class="note"</code>, like this:
|
|
|
|
<p class=note>Note, this is an informative note.
|
|
|
|
<h3 id=conformance-classes><span class=secno>18.2. </span> Conformance
|
|
Classes</h3>
|
|
|
|
<p>Conformance to Selectors Level 4 is defined for three conformance
|
|
classes:
|
|
|
|
<dl>
|
|
<dt><dfn id=selector-instance title="selector instance!!as conformance
|
|
class">selector instance</dfn>
|
|
|
|
<dd>A written selector.
|
|
|
|
<dt><dfn id=interpreter>interpreter</dfn>
|
|
|
|
<dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
|
|
that interprets the semantics of a selector.
|
|
|
|
<dt><dfn id=authoring-tool>authoring tool</dfn>
|
|
|
|
<dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
|
|
that writes a style sheet.
|
|
</dl>
|
|
|
|
<p>A selector instance is conformant to Selectors Level 4 if it is valid
|
|
according to the selector syntax rules defined in this specification.
|
|
|
|
<p>An interpreter is conformant to Selectors Level 4 if it parses
|
|
interprets selectors according to the semantics defined in Selectors Level
|
|
4 (including following the error-handling rules). However, the inability
|
|
of a user agent to implement part of this specification due to the
|
|
limitations of a particular device (e.g., non interactive user agents will
|
|
probably not implement dynamic pseudo-classes because they make no sense
|
|
without interactivity) does not imply non-conformance.
|
|
|
|
<p>An authoring tool is conformant to Selectors Level 4 if it writes
|
|
syntactically correct selectors.
|
|
|
|
<p>Any specification reusing Selectors must contain a <a
|
|
href="#profiling">Profile</a> listing the subset of Selectors it accepts
|
|
or excludes, and describing any constraints it adds to the current
|
|
specification.
|
|
|
|
<p>Specifications reusing Selectors must define how to handle invalid
|
|
selectors. (In the case of CSS, the entire rule in which the selector is
|
|
used is effectively dropped.)
|
|
|
|
<h3 id=partial><span class=secno>18.3. </span> Partial Implementations</h3>
|
|
|
|
<p>So that authors can exploit the forward-compatible parsing rules to
|
|
trigger fallback behavior, UAs <strong>must</strong> treat as <a
|
|
href="#invalid">invalid</a> any selectors for which they have no usable
|
|
level of support.
|
|
|
|
<h3 id=experimental><span class=secno>18.4. </span> Experimental
|
|
Implementations</h3>
|
|
|
|
<p>To avoid clashes with future Selectors features, the Selectors
|
|
specification reserves a <a
|
|
href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
|
|
syntax</a> for proprietary extensions to Selectors. The CSS Working Group
|
|
recommends that experimental implementations of features in Selectors
|
|
Working Drafts also use vendor-prefixed pseudo-element or pseudo-class
|
|
names. This avoids any incompatibilities with future changes in the draft.
|
|
Once a specification reaches the Candidate Recommendation stage,
|
|
implementors should implement the non-prefixed syntax for any feature they
|
|
consider to be correctly implemented according to spec.</p>
|
|
<!--
|
|
<h2 id=Tests>Tests</h2>
|
|
|
|
<p>This specification has <a
|
|
href="http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/">a test
|
|
suite</a> allowing user agents to verify their basic conformance to
|
|
the specification. This test suite does not pretend to be exhaustive
|
|
and does not cover all possible combined cases of Selectors.</p>
|
|
-->
|
|
|
|
<h2 id=acknowledgements><span class=secno>19. </span> Acknowledgements</h2>
|
|
|
|
<p>The CSS working group would like to thank everyone who contributed to
|
|
the <a href="http://www.w3.org/TR/css3-selectors">previous Selectors</a>
|
|
specifications over the years, as those specifications formed the basis
|
|
for this one.
|
|
|
|
<p>In particular, the working group would like to extend special thanks to
|
|
the following for their specific contributions to Selectors Level 4: L.
|
|
David Baron, Andrew Fedoniouk, Ian Hickson, Grey Hodge, Lachlan Hunt,
|
|
Jason Cranford Teague
|
|
|
|
<h2 id=references><span class=secno>20. </span> References</h2>
|
|
|
|
<h3 id=normative-references><span class=secno>20.1. </span> Normative
|
|
References</h3>
|
|
<!--begin-normative-->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class=bibliography>
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
|
|
<dt id=CSS21>[CSS21]
|
|
|
|
<dd>Bert Bos; et al. <a
|
|
href="http://www.w3.org/TR/2011/REC-CSS2-20110607/"><cite>Cascading Style
|
|
Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
|
|
2011. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=CSS3NAMESPACE>[CSS3NAMESPACE]
|
|
|
|
<dd>Elika J. Etemad; Anne van Kesteren. <a
|
|
href="http://www.w3.org/TR/2008/CR-css3-namespace-20080523/"><cite>CSS
|
|
Namespaces Module.</cite></a> 23 May 2008. W3C Candidate Recommendation.
|
|
(Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2008/CR-css3-namespace-20080523/">http://www.w3.org/TR/2008/CR-css3-namespace-20080523/</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=FLEX>[FLEX]
|
|
|
|
<dd><cite>Flex: The Lexical Scanner Generator.</cite> Version 2.3.7, ISBN
|
|
1882114213</dd>
|
|
<!---->
|
|
|
|
<dt id=RFC2119>[RFC2119]
|
|
|
|
<dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
|
|
words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
|
|
RFC 2119. URL: <a
|
|
href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=SELECT>[SELECT]
|
|
|
|
<dd>Tantek Çelik; et al. <a
|
|
href="http://www.w3.org/TR/2009/PR-css3-selectors-20091215"><cite>Selectors
|
|
Level 3.</cite></a> 15 December 2009. W3C Proposed Recommendation. (Work
|
|
in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2009/PR-css3-selectors-20091215">http://www.w3.org/TR/2009/PR-css3-selectors-20091215</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=UNICODE>[UNICODE]
|
|
|
|
<dd>The Unicode Consortium. <a
|
|
href="http://www.unicode.org/standard/versions/enumeratedversions.html"><cite>The
|
|
Unicode Standard.</cite></a> 2003. Defined by: The Unicode Standard,
|
|
Version 4.0 (Boston, MA, Addison-Wesley, ISBN 0-321-18578-1), as updated
|
|
from time to time by the publication of new versions URL: <a
|
|
href="http://www.unicode.org/standard/versions/enumeratedversions.html">http://www.unicode.org/standard/versions/enumeratedversions.html</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=YACC>[YACC]
|
|
|
|
<dd>S. C. Johnson. <cite>YACC - Yet another compiler compiler.</cite>
|
|
Murray Hill. 1975. Technical Report.</dd>
|
|
<!---->
|
|
</dl>
|
|
<!--end-normative-->
|
|
|
|
<h3 id=informative-references><span class=secno>20.2. </span> Informative
|
|
References</h3>
|
|
<!--begin-informative-->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class=bibliography>
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
|
|
<dt id=BCP47>[BCP47]
|
|
|
|
<dd>A. Phillips; M. Davis. <a
|
|
href="ftp://ftp.rfc-editor.org/in-notes/bcp/bcp47.txt"><cite>Tags for
|
|
Identifying Languages.</cite></a> September 2009. BCP 47. Internet Best
|
|
Current Practice. Currently represented by RFC 5646. URL: <a
|
|
href="ftp://ftp.rfc-editor.org/in-notes/bcp/bcp47.txt">ftp://ftp.rfc-editor.org/in-notes/bcp/bcp47.txt</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=CSS3UI>[CSS3UI]
|
|
|
|
<dd>Tantek Çelik. <a
|
|
href="http://www.w3.org/TR/2004/CR-css3-ui-20040511"><cite>CSS3 Basic
|
|
User Interface Module.</cite></a> 11 May 2004. W3C Candidate
|
|
Recommendation. (Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2004/CR-css3-ui-20040511">http://www.w3.org/TR/2004/CR-css3-ui-20040511</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=DOM-LEVEL-3-CORE>[DOM-LEVEL-3-CORE]
|
|
|
|
<dd>Gavin Nicol; et al. <a
|
|
href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407"><cite>Document
|
|
Object Model (DOM) Level 3 Core Specification.</cite></a> 7 April 2004.
|
|
W3C Recommendation. URL: <a
|
|
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>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=HTML401>[HTML401]
|
|
|
|
<dd>Dave Raggett; Arnaud Le Hors; Ian Jacobs. <a
|
|
href="http://www.w3.org/TR/1999/REC-html401-19991224"><cite>HTML 4.01
|
|
Specification.</cite></a> 24 December 1999. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/1999/REC-html401-19991224">http://www.w3.org/TR/1999/REC-html401-19991224</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=HTML5>[HTML5]
|
|
|
|
<dd>Ian Hickson. <a
|
|
href="http://www.w3.org/TR/2011/WD-html5-20110525/"><cite>HTML5.</cite></a>
|
|
25 May 2011. W3C Working Draft. (Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2011/WD-html5-20110525/">http://www.w3.org/TR/2011/WD-html5-20110525/</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=MATHML>[MATHML]
|
|
|
|
<dd>Patrick Ion; Robert Miner. <a
|
|
href="http://www.w3.org/1999/07/REC-MathML-19990707"><cite>Mathematical
|
|
Markup Language (MathML) 1.01 Specification.</cite></a> 7 July 1999. W3C
|
|
Recommendation. URL: <a
|
|
href="http://www.w3.org/1999/07/REC-MathML-19990707">http://www.w3.org/1999/07/REC-MathML-19990707</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=SELECTORS-API2>[SELECTORS-API2]
|
|
|
|
<dd>Lachlan Hunt. <a
|
|
href="http://www.w3.org/TR/2010/WD-selectors-api2-20100119/"><cite>Selectors
|
|
API Level 2.</cite></a> 19 January 2010. W3C Working Draft. (Work in
|
|
progress.) URL: <a
|
|
href="http://www.w3.org/TR/2010/WD-selectors-api2-20100119/">http://www.w3.org/TR/2010/WD-selectors-api2-20100119/</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=STTS3>[STTS3]
|
|
|
|
<dd>Daniel Glazman. <a href="http://www.w3.org/TR/NOTE-STTS3"><cite>Simple
|
|
Tree Transformation Sheets 3.</cite></a> Electricité de France. 11
|
|
November 1998. Submission to the W3C. URL: <a
|
|
href="http://www.w3.org/TR/NOTE-STTS3">http://www.w3.org/TR/NOTE-STTS3</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=SVG11>[SVG11]
|
|
|
|
<dd>Erik Dahlström; et al. <a
|
|
href="http://www.w3.org/TR/2011/PR-SVG11-20110609/"><cite>Scalable Vector
|
|
Graphics (SVG) 1.1 (Second Edition).</cite></a> 9 June 2011. W3C Proposed
|
|
Recommendation. (Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2011/PR-SVG11-20110609/">http://www.w3.org/TR/2011/PR-SVG11-20110609/</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=XFORMS10>[XFORMS10]
|
|
|
|
<dd>John M. Boyer. <a
|
|
href="http://www.w3.org/TR/2009/REC-xforms-20091020/"><cite>XForms
|
|
1.1.</cite></a> 20 October 2009. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2009/REC-xforms-20091020/">http://www.w3.org/TR/2009/REC-xforms-20091020/</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=XML-NAMES>[XML-NAMES]
|
|
|
|
<dd>Tim Bray; et al. <a
|
|
href="http://www.w3.org/TR/2009/REC-xml-names-20091208/"><cite>Namespaces
|
|
in XML 1.0 (Third Edition).</cite></a> 8 December 2009. W3C
|
|
Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2009/REC-xml-names-20091208/">http://www.w3.org/TR/2009/REC-xml-names-20091208/</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=XML10>[XML10]
|
|
|
|
<dd>C. M. Sperberg-McQueen; et al. <a
|
|
href="http://www.w3.org/TR/2008/REC-xml-20081126/"><cite>Extensible
|
|
Markup Language (XML) 1.0 (Fifth Edition).</cite></a> 26 November 2008.
|
|
W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2008/REC-xml-20081126/">http://www.w3.org/TR/2008/REC-xml-20081126/</a>
|
|
</dd>
|
|
<!---->
|
|
</dl>
|
|
<!--end-informative-->
|