8000 csswg-drafts/selectors3/Overview.src.html at eff01cdb42bd3ec19e690ebe79f0706bd990ea70 · w3c/csswg-drafts · GitHub
Skip to content

Overview.src.html

Latest commit

 

History

History
2678 lines (2197 loc) · 103 KB

Overview.src.html

File metadata and controls

2678 lines (2197 loc) · 103 KB
<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html lang="en">
<head>
<title>Selectors Level 3</title>
<link href="default.css" type="text/css" rel="stylesheet">
<link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="head">
<!--logo-->
<h1 id=title>Selectors Level 3</h1>
<h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
<dl>
<dt>This version:
<dd>
<!-- <a href="[VERSION]">
http://www.w3.org/TR/[YEAR]/PR-[SHORTNAME]-[CDATE]</a> -->
<a href="http://dev.w3.org/csswg/selectors3">
http://dev.w3.org/csswg/selectors3</a>
<dt>Latest version:
<dd><a href="http://www.w3.org/TR/css3-selectors">
http://www.w3.org/TR/css3-selectors</a>
<dt>Previous version:
<dd><a href="http://www.w3.org/TR/2009/PR-css3-selectors-20091215/">
http://www.w3.org/TR/2009/PR-css3-selectors-20091215/</a>
<dt><a name=editors-list></a>Editors:
<dd class="vcard"><a lang="tr" class="url fn" href="http://www.tantek.com/">Tantek &Ccedil;elik</a> (Invited Expert)
<dd class="vcard"><a class="url fn" href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a> (Invited Expert)
<dd class="vcard"><span class="fn">Daniel Glazman</span> (Disruptive Innovations SARL)</dd>
<dd class="vcard"><a href="mailto:ian@hixie.ch" class="url fn">Ian Hickson</a> (<span
class="company"><a href="http://www.google.com/">Google</a></span>)
<dd class="vcard"><span class="fn">Peter Linss</span> (former editor, <span class="company"><a
href="http://www.netscape.com/">Netscape/AOL</a></span>)
<dd class="vcard"><span class="fn">John Williams</span> (former editor, <span class="company"><a
href="http://www.quark.com/">Quark, Inc.</a></span>)
</dl>
<!--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.</p>
<p><acronym title="Cascading Style Sheets">CSS</acronym> (Cascading
Style Sheets) is a language for describing the rendering of <acronym
title="Hypertext Markup Language">HTML</acronym> and <acronym
title="Extensible Markup Language">XML</acronym> documents on
screen, on paper, in speech, etc. CSS uses Selectors for binding
style properties to elements in the document.</p& 8096 gt;
<p>This document describes the selectors that already exist in <abbr
title="CSS level 1">CSS1</abbr> [[CSS1]] and <abbr title="CSS level
2">CSS2</abbr> [[!CSS21]], and further introduces new selectors for
<abbr title="CSS level 3">CSS3</abbr> and other languages that may
need them.</p>
<p>Selectors define the following function:</p>
<pre>expression &#x2217; element &rarr; boolean</pre>
<p>That is, given an element and a selector, this specification
defines whether that element matches the selector.</p>
<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. <acronym title="Simple Tree Transformation
Sheets">STTS</acronym> (Simple Tree Transformation Sheets), a
language for transforming XML trees, uses this mechanism. [[STTS3]]</p>
<h2 class="no-num no-toc" id=status>Status of this document</h2>
<!--status-->
<p>A separate <a
href="/Style/CSS/Test/CSS3/Selectors/20091025/reports/CR-ImpReport.html">
implementation report</a> contains a test suite and shows several
implementations of the specification.
<p>The <a href="issues-lc-2009">list of comments on the last
draft</a> explains the changes that were made since that draft.
<p>The bibliography contains <a
href="#normative-references">normative references</a> to two W3C
specifications that are not Recommendations at the time of
publication, although they are believed to be stable. It is
currently the intention to keep this specification at Proposed
Recommendation level until those specifications are themselves
Proposed Recommendations or Recommendations.
<p><em>Advisory Committee representatives of W3C member
organizations are requested to fill in
the <a href="/2002/09/wbs/33280/css3-selectors-PR/"> review form</a>
before 31 January 2010.</em>
<h2 class="no-num no-toc" id="contents">Table of contents</h2>
<!--toc-->
<h2 id=context>Introduction</h2>
<p>Selectors Level 1 and Selectors Level 2 are defined as the subsets of selector
functionality defined in the <a href="http://www.w3.org/TR/REC-CSS1">CSS1</a>
and <a href="http://www.w3.org/TR/CSS21/">CSS2.1</a> specifications,
respectively.</p>
<h3 id=dependencies>Dependencies</h3>
<p>Some features of this specification are specific to CSS, or have
particular limitations or rules specific to CSS. In this
specification, these have been described in terms of CSS2.1. [[!CSS21]]</p>
<h3 id=terminology>Terminology</h3>
<p>All of the text of this specification is normative except
examples, notes, and sections explicitly marked as
non-normative.</p>
<p>Additional terminology is defined in the
<a href="http://www.w3.org/TR/CSS21/conform.html#defs">Definitions</a>
section of [[!CSS21]].
Examples of document source code and fragments are given in XML
[[XML10]] or HTML [[HTML401]]
syntax.
<h3 id=changesFromCSS2>Changes from CSS2</h3>
<p><em>This section is non-normative.</em></p>
<p>The main differences between the selectors in CSS2 and those in
Selectors are:
<ul>
<li>the list of basic definitions (selector, group of selectors,
simple selector, etc.) has been changed; in particular, what was
referred to in CSS2 as a simple selector is now called a sequence
of simple selectors, and the term "simple selector" is now used for
the components of this sequence</li>
<li>an optional namespace component is now allowed in element type
selectors, the universal selector and attribute selectors</li>
<li>a <a href="#general-sibling-combinators">new combinator</a> has been introduced</li>
<li>new simple selectors including substring matching attribute
selectors, and new pseudo-classes</li>
<li>new pseudo-elements, and introduction of the "::" convention
for pseudo-elements</li>
<li>the grammar has been rewritten</li>
<li>profiles to be added to specifications integrating Selectors
and defining the set of selectors which is actually supported by
each specification</li>
<li>Selectors are now a CSS3 Module and an independent
specification; other specifications can now refer to this document
independently of CSS</li>
<li>the specification now has its own test suite</li>
</ul>
<h2 id=selectors>Selectors</h2>
<p><em>This section is non-normative, as it merely summarizes the
following sections.</em></p>
<p>A Selector represents a structure. This structure can be used as a
condition (e.g. in a CSS rule) that determines which elements a
selector matches in the document tree, or as a flat description of the
HTML or XML fragment corresponding to that structure.</p>
<p>Selectors may range from simple element names to rich contextual
representations.</p>
<p>The following table summarizes the Selector syntax:</p>
<table class="selectorsReview">
<thead>
<tr>
<th class="pattern">Pattern</th>
<th class="meaning">Meaning</th>
<th class="described">Described in section</th>
<th class="origin">First defined in CSS level</th></tr>
<tbody>
<tr>
<td class="pattern">*</td>
<td class="meaning">any element</td>
<td class="described"><a
href="#universal-selector">Universal
selector</a></td>
<td class="origin">2</td></tr>
<tr>
<td class="pattern">E</td>
<td class="meaning">an element of type E</td>
<td class="described"><a
href="#type-selectors">Type selector</a></td>
<td class="origin">1</td></tr>
<tr>
<td class="pattern">E[foo]</td>
< ECC9 div id="LC228" class="react-file-line html-div" data-testid="code-cell" data-line-number="228" style="position:relative"> <td class="meaning">an E element with a "foo" attribute</td>
<td class="described"><a
href="#attribute-selectors">Attribute
selectors</a></td>
<td class="origin">2</td></tr>
<tr>
<td class="pattern">E[foo="bar"]</td>
<td class="meaning">an E element whose "foo" attribute value is exactly
equal to "bar"</td>
<td class="described"><a
href="#attribute-selectors">Attribute
selectors</a></td>
<td class="origin">2</td></tr>
<tr>
<td class="pattern">E[foo~="bar"]</td>
<td class="meaning">an E element whose "foo" attribute value is a list of
whitespace-separated values, one of which is exactly equal to "bar"</td>
<td class="described"><a
href="#attribute-selectors">Attribute
selectors</a></td>
<td class="origin">2</td></tr>
<tr>
<td class="pattern">E[foo^="bar"]</td>
<td class="meaning">an E element whose "foo" attribute value begins exactly
with the string "bar"</td>
<td class="described"><a
href="#attribute-selectors">Attribute
selectors</a></td>
<td class="origin">3</td></tr>
<tr>
<td class="pattern">E[foo$="bar"]</td>
<td class="meaning">an E element whose "foo" attribute value ends exactly
with the string "bar"</td>
<td class="described"><a
href="#attribute-selectors">Attribute
selectors</a></td>
<td class="origin">3</td></tr>
<tr>
<td class="pattern">E[foo*="bar"]</td>
<td class="meaning">an E element whose "foo" attribute value contains the
substring "bar"</td>
<td class="described"><a
href="#attribute-selectors">Attribute
selectors</a></td>
<td class="origin">3</td></tr>
<tr>
<td class="pattern">E[foo|="en"]</td>
<td class="meaning">an E element whose "foo" attribute has a hyphen-separated
list of values beginning (from the left) with "en"</td>
<td class="described"><a
href="#attribute-selectors">Attribute
selectors</a></td>
<td class="origin">2</td></tr>
<tr>
<td class="pattern">E:root</td>
<td class="meaning">an E element, root of the document</td>
<td class="described"><a
href="#structural-pseudos">Structural
pseudo-classes</a></td>
<td class="origin">3</td></tr>
<tr>
<td class="pattern">E:nth-child(n)</td>
<td class="meaning">an E element, the n-th child of its parent</td>
<td class="described"><a
href="#structural-pseudos">Structural
pseudo-classes</a></td>
<td class="origin">3</td></tr>
<tr>
<td class="pattern">E:nth-last-child(n)</td>
<td class="meaning">an E element, the n-th child of its parent, counting
from the last one</td>
<td class="described"><a
href="#structural-pseudos">Structural
pseudo-classes</a></td>
<td class="origin">3</td></tr>
<tr>
<td class="pattern">E:nth-of-type(n)</td>
<td class="meaning">an E element, the n-th sibling of its type</td>
<td class="described"><a
href="#structural-pseudos">Structural
pseudo-classes</a></td>
<td class="origin">3</td></tr>
<tr>
<td class="pattern">E:nth-last-of-type(n)</td>
<td class="meaning">an E element, the n-th sibling of its type, counting
from the last one</td>
<td class="described"><a
href="#structural-pseudos">Structural
pseudo-classes</a></td>
<td class="origin">3</td></tr>
<tr>
<td class="pattern">E:first-child</td>
<td class="meaning">an E element, first child of its parent</td>
<td class="described"><a
href="#structural-pseudos">Structural
pseudo-classes</a></td>
<td class="origin">2</td></tr>
<tr>
<td class="pattern">E:last-child</td>
<td class="meaning">an E element, last child of its parent</td>
<td class="described"><a
href="#structural-pseudos">Structural
pseudo-classes</a></td>
<td class="origin">3</td></tr>
<tr>
<td class="pattern">E:first-of-type</td>
<td class="meaning">an E element, first sibling of its type</td>
<td class="described"><a
href="#structural-pseudos">Structural
pseudo-classes</a></td>
<td class="origin">3</td></tr>
<tr>
<td class="pattern">E:last-of-type</td>
<td class="meaning">an E element, last sibling of its type</td>
<td class="described"><a
href="#structural-pseudos">Structural
pseudo-classes</a></td>
<td class="origin">3</td></tr>
<tr>
<td class="pattern">E:only-child</td>
<td class="meaning">an E element, only child of its parent</td>
<td class="described"><a
href="#structural-pseudos">Structural
pseudo-classes</a></td>
<td class="origin">3</td></tr>
<tr>
<td class="pattern">E:only-of-type</td>
<td class="meaning">an E element, only sibling of its type</td>
<td class="described"><a
href="#structural-pseudos">Structural
pseudo-classes</a></td>
<td class="origin">3</td></tr>
<tr>
<td class="pattern">E:empty</td>
<td class="meaning">an E element that has no children (including text
nodes)</td>
<td class="described"><a
href="#structural-pseudos">Structural
pseudo-classes</a></td>
<td class="origin">3</td></tr>
<tr>
<td class="pattern">E:link<br>E:visited</td>
<td class="meaning">an E element being the source anchor of a hyperlink of
which the target is not yet visited (:link) or already visited
(:visited)</td>
<td class="described"><a
href="#link">The link
pseudo-classes</a></td>
<td class="origin">1</td></tr>
<tr>
<td class="pattern">E:active<br>E:hover<br>E:focus</td>
<td class="meaning">an E element during certain user actions</td>
<td class="described"><a
href="#useraction-pseudos">The user
action pseudo-classes</a></td>
<td class="origin">1 and 2</td></tr>
<tr>
<td class="pattern">E:target</td>
<td class="meaning">an E element being the target of the referring URI</td>
<td class="described"><a
href="#target-pseudo">The target
pseudo-class</a></td>
<td class="origin">3</td></tr>
<tr>
<td class="pattern">E:lang(fr)</td>
<td class="meaning">an element of type E in language "fr" (the document
language specifies how language is determined)</td>
<td class="described"><a
href="#lang-pseudo">The :lang()
pseudo-class</a></td>
<td class="origin">2</td></tr>
<tr>
<td class="pattern">E:enabled<br>E:disabled</td>
<td class="meaning">a user interface element E which is enabled or
disabled</td>
<td class="described"><a
href="#UIstates">The UI element states
pseudo-classes</a></td>
<td class="origin">3</td></tr>
<tr>
<td class="pattern">E:checked<!--<br>E:indeterminate--></td>
<td class="meaning">a user interface element E which is checked<!-- or in an
indeterminate state--> (for instance a radio-button or checkbox)</td>
<td class="described"><a
href="#UIstates">The UI element states
pseudo-classes</a></td>
<td class="origin">3</td></tr>
<tr>
<td class="pattern">E::first-line</td>
<td class="meaning">the first formatted line of an E element</td>
<td class="described"><a
href="#first-line">The ::first-line
pseudo-element</a></td>
<td class="origin">1</td></tr>
<tr>
<td class="pattern">E::first-letter</td>
<td class="meaning">the first formatted letter of an E element</td>
<td class="described"><a
href="#first-letter">The ::first-letter
pseudo-element</a></td>
<td class="origin">1</td></tr>
<tr>
<td class="pattern">E::before</td>
<td class="meaning">generated content before an E element</td>
<td class="described"><a
href="#gen-content">The ::before
pseudo-element</a></td>
<td class="origin">2</td></tr>
<tr>
<td class="pattern">E::after</td>
<td class="meaning">generated content after an E element</td>
<td class="described"><a
href="#gen-content">The ::after
pseudo-element</a></td>
<td class="origin">2</td></tr>
<tr>
<td class="pattern">E.warning</td>
<td class="meaning">an E element whose class is
"warning" (the document language specifies how class is determined).</td>
<td class="described"><a
href="#class-html">Class
selectors</a></td>
<td class="origin">1</td></tr>
<tr>
<td class="pattern">E#myid</td>
<td class="meaning">an E element with ID equal to "myid".</td>
<td class="described"><a
href="#id-selectors">ID
selectors</a></td>
<td class="origin">1</td></tr>
<tr>
<td class="pattern">E:not(s)</td>
<td class="meaning">an E element that does not match simple selector s</td>
<td class="described"><a
href="#negation">Negation
pseudo-class</a></td>
<td class="origin">3</td></tr>
<tr>
<td class="pattern">E F</td>
<td class="meaning">an F element descendant of an E element</td>
<td class="described"><a
href="#descendant-combinators">Descendant
combinator</a></td>
<td class="origin">1</td></tr>
<tr>
<td class="pattern">E &gt; F</td>
<td class="meaning">an F element child of an E element</td>
<td class="described"><a
href="#child-combinators">Child
combinator</a></td>
<td class="origin">2</td></tr>
<tr>
<td class="pattern">E + F</td>
<td class="meaning">an F element immediately preceded by an E element</td>
<td class="described"><a
href="#adjacent-sibling-combinators">Adjacent sibling combinator</a></td>
<td class="origin">2</td></tr>
<tr>
<td class="pattern">E ~ F</td>
<td class="meaning">an F element preceded by an E element</td>
<td class="described"><a
href="#general-sibling-combinators">General sibling combinator</a></td>
<td class="origin">3</td></tr></tbody></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>
<h2 id=casesens>Case sensitivity</h2>
<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
[[!CSS3NAMESPACE]].</p>
<h2 id=selector-syntax>Selector syntax</h2>
<p>A <dfn>selector</dfn> is a chain of one
or more <a href="#sequence">sequences of simple selectors</a>
separated by <a href="#combinators">combinators</a>. One <a
href="#pseudo-elements">pseudo-element</a> may be appended to the last
sequence of simple selectors in a selector.</p>
<p>A <dfn><a name=sequence>sequence of simple selectors</a></dfn>
is a chain of <a href="#simple-selectors-dfn">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
<a href="#universal-selector">universal selector</a>. No other type
selector or universal selector is allowed in the sequence.</p>
<p>A <dfn><a name=simple-selectors-dfn></a><a
href="#simple-selectors">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>
<p><dfn>Combinators</dfn> are: whitespace, &quot;greater-than
sign&quot; (U+003E, <code>&gt;</code>), &quot;plus sign&quot; (U+002B,
<code>+</code>) and &quot;tilde&quot; (U+007E, <code>~</code>). White
space may appear between a combinator and the simple selectors around
it. <a name=whitespace></a>Only 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 whitespace.</p>
<p>The elements of a document tree that are represented by a selector
are the <dfn><a name=subject></a>subjects of the selector</dfn>. A
selector consisting of a single sequence of simple selectors
represents any element satisfying its requirements. Prepending another
sequence of simple selectors and a combinator to a sequence imposes
additional matching constraints, so the subjects of a selector are
always a subset of the elements represented by the last sequence of
simple selectors.</p>
<p>An empty selector, containing no sequence of simple selectors and
no pseudo-element, is an <a href="#Conformance">invalid
selector</a>.</p>
<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. [[!CSS21]].</p>
<p id="nsdecl">Certain selectors support namespace prefixes. The
mechanism by which namespace prefixes are <dfn>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. [[!CSS3NAMESPACE]]</p>
<h2 id=grouping>Groups of selectors</h2>
<p>A comma-separated list of selectors represents the union of all
elements selected by each of the individual selectors in the list.
(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.</p>
<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.</p>
<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>
<h2 id=simple-selectors>Simple selectors</h2>
<h3 id=type-selectors>Type selector</h3>
<p>A <dfn>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> [[!CSS3NAMESPACE]]. A type selector represents
an instance of the element type in the document tree. </p>
<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>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
&quot;vertical bar&quot; (U+007C, <code>|</code>). (See, e.g., [[XML-NAMES]] for the use of namespaces in
XML.)</p>
<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>
<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>
<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>
<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>
<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>
<p>In summary:</p>
<dl>
<dt><code>ns|E</code></dt>
<dd>elements with name E in namespace ns</dd>
<dt><code>*|E</code></dt>
<dd>elements with name E in any namespace, including those without a
namespace</dd>
<dt><code>|E</code></dt>
<dd>elements with name E without a namespace</dd>
<dt><code>E</code></dt>
<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.</dd>
</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>Universal selector </h3>
<p>The <dfn>universal selector</dfn>, written as a
<a href="http://www.w3.org/TR/css3-namespace/#css-qnames">CSS qualified
name</a> [[!CSS3NAMESPACE]] 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>
<p>If a universal selector represented by <code>*</code> (i.e. without a
namespace prefix) is not the only component of a <a href="#sequence">sequence
of simple selectors</a> selectors 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.</p>
<div class="example">
<p>Examples:</p>
<ul>
<li><code>*[hreflang|=en]</code> and <code>[hreflang|=en]</code> are equivalent,</li>
<li><code>*.warning</code> and <code>.warning</code> are equivalent,</li>
<li><code>*#myid</code> and <code>#myid& 6197 lt;/code> are equivalent.</li>
</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.</p>
<h4 id=univnmsp>Universal selector and namespaces</h4>
<p>The universal selector allows an optional namespace component. It
is used as follows:</p>
<dl>
<dt><code>ns|*</code></dt>
<dd>all elements in namespace ns</dd>
<dt><code>*|*</code></dt>
<dd>all elements</dd>
<dt><code>|*</code></dt>
<dd>all elements without a namespace</dd>
<dt><code>*</code></dt>
<dd>if no default namespace has been specified, this is equivalent to *|*.
Otherwise it is equivalent to ns|* where ns is the default namespace.</dd>
</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.</p>
<h3 id=attribute-selectors>Attribute selectors</h3>
<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.</p>
<h4 id=attribute-representation>Attribute presence and value selectors</h4>
<p>CSS2 introduced four attribute selectors:</p>
<dl>
<dt><code>[att]</code>
<dd>Represents an element with the <code>att</code> attribute, whatever the value of
the attribute.</dd>
<dt><code>[att=val]</code></dt>
<dd>Represents an element with the <code>att</code> attribute whose value is exactly
"val".</dd>
<dt><code>[att~=val]</code></dt>
<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.</dd>
<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 ([[BCP47]]) 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>.</dd>
</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>. [[!CSS21]]
The case-sensitivity of attribute names and values in selectors depends on
the document language.</p>
<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>
<h4 id=attribute-substrings>Substring matching attribute
selectors</h4>
<p>Three additional attribute selectors are provided for matching
substrings in the value of an attribute:</p>
<dl>
<dt><code>[att^=val]</code></dt>
<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.</dd>
<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.</dd>
<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.</dd>
</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>. [[!CSS21]]
The case-sensitivity of attribute names in selectors depends on the
document language.</p>
<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>
<h4 id=attrnmsp>Attribute selectors and namespaces</h4>
<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 &quot;vertical bar&quot; (<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>"; these attributes are said to be in the
"per-element-type namespace partition"). 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.</p>
<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>
<h4 id=def-values>Default attribute values in DTDs</h4>
<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>
<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., [[XML10]] 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>
<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., [[XML-NAMES]] for details on namespaces in XML
1.0.)</p>
<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.</p>
<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">&lt;!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>Class selectors</h3>
<p>Working with HTML, authors may use the "period" notation (also
known as "full stop", U+002E, <code>.</code>) as an alternative to the
<code>~=</code> notation when representing the <code>class</code>
attribute. Thus, for HTML, <code>div.value</code> and
<code>div[class~=value]</code> have the same meaning. The attribute
value must immediately follow the full stop
(<code>.</code>).</p>
<p>UAs may apply selectors using the period (.) notation in XML
View remainder of file in raw view