FFFF csswg-drafts/css2/selector.html at 8446e1088dfe2351f7ae98f711d79542f73c96cf · w3c/csswg-drafts · GitHub
Skip to content

selector.html

Latest commit

 

History

History
1486 lines (1216 loc) · 59.9 KB

selector.html

File metadata and controls

1486 lines (1216 loc) · 59.9 KB
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'>
<html lang="en">
<head>
<title>Selectors</title>
<link rel="stylesheet" href="style/default.css" type="text/css">
<link rel="stylesheet" href="http://www.w3.org/StyleSheets/TR/W3C-REC.css" type="text/css">
<link rel="prev" href="syndata.html">
<link rel="next" href="cascade.html">
<link rel=" B41A contents" href="cover.html#minitoc">
<link rel="CSS-properties" href="propidx.html" title="properties">
<link rel="index" href="indexlist.html" title="index">
<link rel="first" href="cover.html">
</head>
<body>
<div class="navbar">
<p><a href="syndata.html">previous</a> &nbsp;
<a href="cascade.html">next</a> &nbsp;
<a href="cover.html#minitoc">contents</a> &nbsp;
<a href="propidx.html">properties</a> &nbsp;
<a href="indexlist.html">index</a> &nbsp;
</div>
<hr class="navbar">
<h1><a name="q0">5 Selectors</a></h1>
<div class="subtoc">
<p><strong>Contents</strong>
<ul class="toc">
<li class="tocline2"><a href="selector.html#pattern-matching" class="tocxref">5.1 Pattern matching</a>
<li class="tocline2"><a href="selector.html#selector-syntax" class="tocxref">5.2 Selector syntax</a>
<ul class="toc">
<li class="tocline3"><a href="selector.html#grouping" class="tocxref">5.2.1 Grouping</a>
</ul>
<li class="tocline2"><a href="selector.html#universal-selector" class="tocxref">5.3 Universal selector</a>
<li class="tocline2"><a href="selector.html#type-selectors" class="tocxref">5.4 Type selectors</a>
<li class="tocline2"><a href="selector.html#descendant-selectors" class="tocxref">5.5 Descendant selectors</a>
<li class="tocline2"><a href="selector.html#child-selectors" class="tocxref">5.6 Child selectors</a>
<li class="tocline2"><a href="selector.html#adjacent-selectors" class="tocxref">5.7 Adjacent sibling selectors</a>
<li class="tocline2"><a href="selector.html#attribute-selectors" class="tocxref">5.8 Attribute selectors</a>
<ul class="toc">
<li class="tocline3"><a href="selector.html#matching-attrs" class="tocxref">5.8.1 Matching attributes and attribute values</a>
<li class="tocline3"><a href="selector.html#default-attrs" class="tocxref">5.8.2 Default attribute values in DTDs</a>
<li class="tocline3"><a href="selector.html#class-html" class="tocxref">5.8.3 Class selectors</a>
</ul>
<li class="tocline2"><a href="selector.html#id-selectors" class="tocxref">5.9 ID selectors</a>
<li class="tocline2"><a href="selector.html#pseudo-elements" class="tocxref">5.10 Pseudo-elements and pseudo-classes</a>
<li class="tocline2"><a href="selector.html#pseudo-class-selectors" class="tocxref">5.11 Pseudo-classes</a>
<ul class="toc">
<li class="tocline3"><a href="selector.html#first-child" class="tocxref">5.11.1 :first-child pseudo-class</a>
<li class="tocline3"><a href="selector.html#link-pseudo-classes" class="tocxref">5.11.2 The link pseudo-classes: <span class="index-def" title="pseudo-classes:::link|:link|link (pseudo-class)">:link</span> and <span class="index-def" title="pseudo-classes:::visited|:visited|visited (pseudo-class)">:visited</span></a>
<li class="tocline3"><a href="selector.html#dynamic-pseudo-classes" class="tocxref">5.11.3 The dynamic pseudo-classes: <span class="index-def" title="pseudo-classes:::hover|:hover|hover (pseudo-class)">:hover</span>, <span class="index-def" title="pseudo-classes:::active|:active|active (pseudo-class)">:active</span>, and <span class="index-def" title="pseudo-classes:::focus|:focus|focus (pseudo-class)">:focus</span></a>
<li class="tocline3"><a href="selector.html#lang" class="tocxref">5.11.4 The language pseudo-class: <span class="index-def" title="pseudo-classes:::lang|:lang|lang (pseudo-class)">:lang</span></a>
</ul>
<li class="tocline2"><a href="selector.html#pseudo-element-selectors" class="tocxref">5.12 Pseudo-elements</a>
<ul class="toc">
<li class="tocline3"><a href="selector.html#first-line-pseudo" class="tocxref">5.12.1 The <span class="index-def" title="pseudo-elements:::first-line|:first-line|first-line">:first-line</span> pseudo-element</a>
<li class="tocline3"><a href="selector.html#first-letter" class="tocxref">5.12.2 The <span class="index-def" title="pseudo-elements:::first-letter|:first-letter|first-letter">:first-letter</span> pseudo-element</a>
<li class="tocline3"><a href="selector.html#before-and-after" class="tocxref">5.12.3 The <span class="index-def" title="pseudo-elements:::before|:before">:before</span> and <span class="index-def" title="pseudo-elements:::after|:after">:after</span> pseudo-elements</a>
</ul>
</ul>
</div>
<h2>5.1 <a name="pattern-matching">Pattern matching</a></h2>
<p>In CSS, pattern matching rules determine which style rules apply to
elements in the <a href="conform.html#doctree">document
tree</a>. These patterns, called <a name="x0"><span class="index-inst"
title="selector">selectors,</span></a> may range from simple element names
to rich contextual patterns. If all conditions in the pattern are true
for a certain element, the selector <a name="x1"><span class="index-def"
title="match|selector::match"><dfn>matches</dfn></span></a> the element.
<P>The case-sensitivity of document language element names in
selectors depends on the document language. For example, in HTML,
element names are case-insensitive, but in XML they are
case-sensitive.
<P>The following table summarizes CSS&nbsp;2.1 selector syntax:</P>
<table border=1>
<TR><TH>Pattern<TH>Meaning<TH>Described in section</TR>
<TR><TD>*<TD>Matches any element.<TD><a href="#universal-selector">Universal
selector</a></TR>
<TR><TD>E<TD>Matches any E element (i.e., an element of type E).<TD><a href="#type-selectors">Type
selectors</a></TR>
<TR><TD>E F<TD>Matches any F element that is a descendant of
an E element.<TD><a href="#descendant-selectors">Descendant
selectors</a></TR>
<TR><TD>E &gt; F<TD>Matches any F element that is a child of
an element E.<TD><a href="#child-selectors">Child selectors</a></TR>
<TR><TD>E:first-child<TD>Matches element E when E is the first
child of its parent.
<TD><a href="#first-child">The :first-child pseudo-class</a></TR>
<TR><TD>E:link<br>E:visited <TD>Matches element E if E is the source
anchor of a hyperlink of which the target is not yet visited (:link)
or already visited (:visited).
<TD><a href="#link-pseudo-classes">The link pseudo-classes</a></TR>
<TR><TD>E:active<br>E:hover<br>E:focus <TD>Matches E during certain
user actions.
<TD><a href="#dynamic-pseudo-classes">The dynamic pseudo-classes</a>
<TR><TD>E:lang(c) <TD>Matches element of type E if it is in (human) language c
(the document language specifies how language is determined).
<TD><a href="#lang">The :lang() pseudo-class</a>
<TR><TD>E + F<TD>Matches any F element immediately preceded by
a sibling element E.<TD><a href="#adjacent-selectors">Adjacent selectors</a>
</TR>
<TR><TD>E[foo]<TD>Matches any E element with the
"foo" attribute set (whatever the value).
<TD><a href="#attribute-selectors">Attribute selectors</a>
</TR>
<TR><TD>E[foo="warning"]<TD>Matches any E element whose
"foo" attribute value is exactly equal to "warning".
<TD><a href="#attribute-selectors">Attribute selectors</a>
</TR>
<TR><TD>E[foo~="warning"]<TD>Matches any E element whose
"foo" attribute value is a list of space-separated values, one of
which is exactly equal to "warning".
<TD><a href="#attribute-selectors">Attribute selectors</a>
</TR>
<TR><TD>E[lang|="en"]<TD>Matches any E element whose
"lang" attribute has a hyphen-separated list of values
beginning (from the left) with "en".
<TD><a href="#attribute-selectors">Attribute selectors</a>
</TR>
<TR><TD>DIV.warning<TD><em>Language specific.</em> (In HTML, the same
as DIV[class~="warning"].)
<TD><a href="#class-html">Class selectors</a></TR>
<TR><TD>E#myid<TD>Matches any E element with ID
equal to "myid".<TD><a href="#id-selectors">ID selectors</a></TR>
</table>
<h2>5.2 <a name="selector-syntax">Selector syntax</a></h2>
<P>A <span class="index-def" title="simple selector"><a
name="simple-selector"><dfn>simple selector</dfn></a></span> is either
a <a href="#type-selectors">type selector</a> or <a
href="#universal-selector">universal selector</a> followed immediately
by zero or more <a href="#attribute-selectors">attribute
selectors</a>, <a href="#id-selectors">ID selectors</a>, or <a
href="#pseudo-classes">pseudo-classes</a>, in any order. The simple
selector matches if all of its components match.
<p class="note">Note: the terminology used here in CSS&nbsp;2.1 is
different from what is used in CSS3. For example, a "simple selector"
refers to a smaller part of a selector in CSS3 than in CSS&nbsp;2.1.
See the CSS3 Selectors module <a href="refs.html#ref-CSS3SEL" rel="biblioentry" class="noxref"><span class="informref">[CSS3SEL]</span></a>.
<P>A <a name="x4"><span class="index-def"
title="selector"><dfn>selector</dfn></span></a> is a chain of one or more
simple selectors separated by combinators. <span class="index-def"
title="combinator"><a
name="combinator"><dfn>Combinators</dfn></a></span> are: white space,
"&gt;", and "+". White space may appear between a combinator and the
simple selectors around it.
<P>The elements of the document tree that match a selector are called
<span class="index-def" title="subject (of selector)|selector::subject
of"><a name="subject"><dfn>subjects</dfn></a></span> of the selector.
A selector consisting of a single simple selector matches any element
satisfying its requirements. Prepending a simple selector and
combinator to a chain imposes additional matching constraints, so the
subjects of a selector are always a subset of the elements matching
the last simple selector.
<P>One <a href="#pseudo-elements">pseudo-element</a> may be appended
to the last simple selector in a chain, in which case the style
information applies to a subpart of each subject.
<h3>5.2.1 <a name="grouping">Grouping</a></h3>
<p>When several selectors share the same declarations, they may be
grouped into a comma-separated list.</p>
<div class="example"><P style="display:none">Example(s):</P>
<P>In this example, we condense three rules with identical declarations
into one. Thus,
<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>CSS offers other "shorthand" mechanisms as well, including
<span class="index-def" title="multiple declarations">
<a name="x8" href="syndata.html#declaration">multiple declarations</a></span>
and <span class="index-inst" title="shorthand property"><a name="x9"
href="about.html#shorthand">shorthand properties</a></span>.
<h2>5.3 <a name="universal-selector">Universal selector</a></h2>
<P>The <a name="x10"><span class="index-def" title="universal selector">universal
selector</span></a>, written "*", matches the name of any element
type. It matches any single element in the <a
href="conform.html#doctree">document tree.</a>
<P>If the universal selector is not the only component of a <a
href="#simple-selector">simple selector</a>, the "*" may be
omitted. For example:</P>
<ul>
<li><code>*[lang=fr] </code> and <code>[lang=fr]</code> are equivalent.
<li><code>*.warning</code> and <code>.warning</code> are equivalent.
<li><code>*#myid</code> and <code>#myid</code> are equivalent.
</ul>
<h2>5.4 <a name="type-selectors">Type selectors</a></h2>
<p>A <a name="x11"><span class="index-def" title="type selector"><em>type
selector</em></span></a> matches the name of a document language element
type. A type selector matches every instance of the element type in
the document tree.
<div class="example"><P style="display:none">Example(s):</P>
<P>The following rule matches all H1 elements in the
document tree:</p>
<pre>
h1 { font-family: sans-serif }
</pre>
</div>
<h2>5.5 <a name="descendant-selectors">Descendant selectors</a></h2>
<p>At times, authors may want selectors to match an element that is
the descendant of another element in the document tree (e.g., "Match
those EM elements that are contained by an H1 element"). <a name="x12"><span
class="index-def" title="descendant-selectors">Descendant
selectors</span></a> express such a relationship in a pattern. A
descendant selector is made up of two or more selectors separated by
<a href="syndata.html#whitespace">white space</a>. A descendant
selector of the form "<code>A B</code>" matches when an element
<code>B</code> is an arbitrary descendant of some <a
href="conform.html#doctree">ancestor</a> element <code>A</code>.
<div class="example"><P style="display:none">Example(s):</P><p>
For example, consider the following rules:</p>
<pre>
h1 { color: red }
em { color: red }
</pre>
<p>Although the intention of these rules is to add emphasis to text by
changing its color, the effect will be lost in a case such as:</p>
<pre class="html-example">
&lt;H1&gt;This headline is &lt;EM&gt;very&lt;/EM&gt; important&lt;/H1&gt;
</pre>
<p>We address this case by supplementing the previous rules with a
rule that sets the text color to blue whenever an EM occurs anywhere
within an H1:</p>
<pre>
h1 { color: red }
em { color: red }
h1 em { color: blue }
</pre>
<p>The third rule will match the EM in the following fragment:</p>
<pre class="html-example">
&lt;H1&gt;This &lt;SPAN class="myclass"&gt;headline
is &lt;EM&gt;very&lt;/EM&gt; important&lt;/SPAN&gt;&lt;/H1&gt;
</pre>
</div>
<div class="example"><P style="display:none">Example(s):</P><P>
The following selector:</p>
<PRE>
div * p
</PRE>
<P>matches a P element that is a grandchild or later descendant of a
DIV element. Note the white space on either side of the "*" is not part
of the universal selector; the white space is a combinator
indicating
that the DIV must be the ancestor of some element, and that that
element must be an ancestor of the P.
</div>
<div class="example"><P style="display:none">Example(s):</P><p>
The selector in the following rule, which combines
descendant and <a href="#attribute-selectors">attribute selectors</a>,
matches any element that (1) has the "href" attribute set and
(2) is inside a P that is itself inside a DIV:</p>
<pre>
div p *[href]
</pre>
</div>
<h2>5.6 <a name="child-selectors">Child selectors</a></h2>
<p>A <a name="x13"><span class="index-def" title="child selector"><em>child
selector</em></span></a> matches when an element is the <a
href="conform.html#doctree">child</a> of some element. A child
selector is made up of two or more selectors separated by "&gt;".
<div class="example"><P style="display:none">Example(s):</P><p>
The following rule sets the style of all P elements that
are children of BODY:</p>
<pre>
body &gt; P { line-height: 1.3 }
</pre>
</div>
<div class="example"><P style="display:none">Example(s):</P><P>
The following example combines descendant selectors and child selectors:</p>
<pre>
div ol&gt;li p
</pre>
<P>It matches a P element that is a descendant of an LI; the LI element
must be the child of an OL element; the OL element must be a
descendant of a DIV. Notice that the optional white space around
the "&gt;" combinator has been left out.
</div>
<P>For information on selecting the first child of an element, please
see the section on the <a href="#first-child">:first-child</a>
pseudo-class below.
<h2>5.7 <a name="adjacent-selectors">Adjacent sibling selectors</a></h2>
<p>Adjacent sibling selectors have the following syntax: E1 + E2,
where E2 is the subject of the selector. The selector matches if E1
and E2 share the same parent in the document tree and E1 immediately
precedes E2,
ignoring non-element nodes (such as text nodes and comments).
<div class="example"><P style="display:none">Example(s):</P><p>
Thus, the following rule states that when a P element immediately
follows a MATH element, it should not be indented:</p>
<pre>
math + p { text-indent: 0 }
</pre>
<p>The next example reduces the vertical space separating
an H1 and an H2 that immediately follows it:</p>
<pre>
h1 + h2 { margin-top: -5mm }
</pre>
</div>
<div class="example"><P style="display:none">Example(s):</P><p>
The following rule is similar to the one in the previous example,
except that it adds a class selector. Thus, special formatting only
occurs when H1 has <samp>class="opener"</samp>:</p>
<pre>
h1.opener + h2 { margin-top: -5mm }
</pre>
</div>
<h2>5.8 <a name="attribute-selectors">Attribute selectors</a></h2>
<p>CSS&nbsp;2.1 allows authors to specify rules that match elements
which have certain attributes defined
in the source document.
<h3>5.8.1 <a name="matching-attrs">Matching attributes and attribute values</a></h3>
<P>Attribute selectors may match in four ways:</p>
<dl>
<dt><code>[att]</code>
<dd>Match when the element sets the "att" attribute, whatever
the value of the attribute.
<dt><a name="x14"><span class="index-def" title="exact
matching|="><code>[att=val]</code></span></a>
<dd>Match when the element's "att" attribute value is exactly "val".
<dt><a name="x16"><span class="index-def" title="space-separated
matching|~="><code>[att~=val]</code></span></a>
<dd>Represents an element with the <code>att</code> attribute whose
value is a white space-separated list of words, one of which is exactly
"val". If "val" contains white space, it will never represent anything
(since the words are <em>separated</em> by spaces).
If "val" is the empty string, it will never represent anything either.
<dt><a name="x18"><span class="index-def" title="hyphen-separated
matching|&#124;="><code>[att|=val]</code></span></a>
<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 <a name="x20"><span
class="index-inst" title="language code">language subcode</span></a>
matches (e.g., the <code>hreflang</code> attribute on the
<code>a</code> element in HTML) as described in BCP&nbsp;47
(<a href="refs.html#ref-BCP47" rel="biblioentry" class="noxref"><span class="informref">[BCP47]</span></a>) or its successor. For <code>lang</code> (or
<code>xml:lang</code>) language subcode matching, please see <a
href="#lang">the <code>:lang</code> pseudo-class</a>.
</dl>
<p>Attribute values must be identifiers or strings. The
case-sensitivity of attribute names and values in selectors depends on
the document language.
<div class="example"><P style="display:none">Example(s):</P><p>
For example, the following attribute selector
matches all H1 elements that specify the "title" attribute,
whatever its value:</p>
<pre>
h1[title] { color: blue; }
</pre>
</div>
<div class="example"><P style="display:none">Example(s):</P><p>
In the following example, the selector matches all SPAN elements whose
"class" attribute has exactly the value "example":</p>
<pre>
span[class=example] { color: blue; }
</pre>
</div>
<P>Multiple attribute selectors can be used to refer to several
attributes of an element, or even several times to the same attribute.
<div class="example"><P style="display:none">Example(s):</P><p>
Here, the selector matches all SPAN elements whose
"hello" attribute has exactly the value "Cleveland" and whose
"goodbye" attribute has exactly the value "Columbus":</P>
<pre>
span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }
</pre>
</div>
<div class="example"><P style="display:none">Example(s):</P><p>
The following selectors illustrate the differences between "=" and "~=".
The first selector will match, for example, the value
"copyright copyleft copyeditor" for the "rel" attribute. The second
selector will only match when the "href" attribute has the value
"http://www.w3.org/".
</p>
<pre>
a[rel~="copyright"]
a[href="http://www.w3.org/"]
</pre>
</div>
<div class="example"><P style="display:none">Example(s):</P><P>
The following rule hides all elements for which the value of the
"lang" attribute is "fr" (i.e., the language is French).
<PRE>
*[lang=fr] { display : none }
</PRE>
</div>
<div class="example"><P style="display:none">Example(s):</P><P>
The following rule will match for values of the "lang" attribute
that begin with "en", including "en", "en-US", and "en-cockney":</p>
<PRE>
*[lang|="en"] { color : red }
</PRE>
</div>
<div class="example"><P style="display:none">Example(s):</P><P>
Similarly, the following aural style sheet rules allow a script
to be read aloud in different voices for each role:</p>
<pre class="example">
DIALOGUE[character=romeo]
{ voice-family: "Laurence Olivier", charles, male }
DIALOGUE[character=juliet]
{ voice-family: "Vivien Leigh", victoria, female }
</pre>
</div>
<H3>5.8.2 <a name="default-attrs">Default attribute values in DTDs</a></H3>
<P>Matching takes place on attribute values in the document tree.
Default attribute values may be defined in a <a name="x21"><span class="index-inst"
title="DTD">DTD</span></a> or elsewhere, but cannot always be selected by
attribute selectors. Style sheets should be designed so that they work
even if the default values are not included in the document tree.
<p>More precisely, a 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 <a href="refs.html#ref-XML10" rel="biblioentry" class="noxref"><span class="normref">[XML10]</span></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 <a href="refs.html#ref-XMLNAMESPACES" rel="biblioentry" class="noxref"><span class="informref">[XMLNAMESPACES]</span></a> 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. (E.g., an
XHTML UA is not required to use its built-in knowledge of the XHTML
DTD.)
<p class="note">Note that, typically, implementations choose to ignore
external subsets.
<div class="example"><P style="display:none">Example(s):</P>
<P style="display:none">Example:</P>
<P>For example, consider an element EXAMPLE with an attribute "notation"
that has a default value of "decimal". The DTD fragment might be
<pre class="dtd-example">
&lt;!ATTLIST EXAMPLE notation (decimal,octal) "decimal">
</pre>
<p>If the style sheet contains the rules
<pre class="example">
EXAMPLE[notation=decimal] { /*... default property settings ...*/ }
EXAMPLE[notation=octal] { /*... other settings...*/ }
</pre>
<p>the first rule might not match elements whose "notation" 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 class="example">
EXAMPLE { /*... default property settings ...*/ }
EXAMPLE[notation=octal] { /*... other settings...*/ }
</pre>
<p>Here, because the selector <code>EXAMPLE[notation=octal]</code> is
more <a href="cascade.html#specificity">specific</a> than the type
selector alone, the style declarations in the second rule will override
those in the first for elements that have a "notation" attribute value
of "octal". 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.
</div>
<h3>5.8.3 <a name="class-html">Class selectors</a></h3>
<p>Working with HTML, authors may use the period (<code>.</code>)
notation 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
&quot;period&quot; (<code>.</code>). UAs may apply selectors using the
period (.) notation in XML documents if the UA has namespace specific
knowledge that allows it to determine which attribute is the
&quot;class&quot; attribute for the respective namespace. One such
example of namespace specific knowledge is the prose in the
specification for a particular namespace (e.g., SVG 1.1 <a href="refs.html#ref-SVG11" rel="biblioentry" class="noxref"><span class="informref">[SVG11]</span></a>
describes the <a
href="http://www.w3.org/TR/2003/REC-SVG11-20030114/styling.html#ClassAttribute">SVG
&quot;class&quot; attribute</a> and how a UA should interpret it, and
similarly MathML 3.0 <a href="refs.html#ref-MATH30" rel="biblioentry" class="noxref"><span class="informref">[MATH30]</span></a> describes the <a
href="http://www.w3.org/TR/MathML2/chapter2.html#fund.globatt">MathML
&quot;class&quot; attribute</a>.)
<div class="example"><P style="display:none">Example(s):</P><p>
For example, we can assign style information to all elements with
<samp>class~="pastoral"</samp> as follows:</p>
<pre>
*.pastoral { color: green } /* all elements with class~=pastoral */
</pre>
or just
<pre>
.pastoral { color: green } /* all elements with class~=pastoral */
</pre>
<p>The following assigns style only to H1 elements with
<samp>class~="pastoral"</samp>:</p>
<pre>
H1.pastoral { color: green } /* H1 elements with class~=pastoral */
</pre>
<p>Given these rules, the first H1 instance below would not have green
text, while the second would:</p>
<pre>
&lt;H1&gt;Not green&lt;/H1&gt;
&lt;H1 class="pastoral"&gt;Very green&lt;/H1&gt;
</pre>
</div>
<p>To match a subset of "class" values, each value must be preceded
by a ".".</P>
<div class="example"><P style="display:none">Example(s):</P><P>
For example, the following rule matches any P element whose "class" attribute
has been assigned a list of space-separated values that includes "pastoral"
and "marine":</p>
<pre>
p.marine.pastoral { color: green }
</pre>
<p>This rule matches when <samp>class="pastoral blue aqua
marine"</samp> but does not match for <samp>class="pastoral
blue"</samp>.
</div>
<div class="note"><p> <em><strong>Note.</strong> CSS gives so much
power to the "class" attribute, that authors could conceivably design
their own "document language" based on elements with almost no
associated presentation (such as DIV and SPAN in HTML) and assigning
style information through the "class" attribute. Authors should avoid
this pract 33F4 ice since the structural elements of a document language
often have recognized and accepted meanings and author-defined classes may
not.</em>
</div>
<div class="note"><p><em><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.</em>
</div>
<h2>5.9 <a name="id-selectors">ID selectors</a></h2>
<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; whatever the document
language, an ID 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>The ID attribute of a document language allows authors to assign an
identifier to one element instance in the document tree. CSS ID
selectors match an element instance based on its identifier. A CSS
ID selector contains a "#" immediately followed by the ID
value, which must be an identifier.</p>
<p class=note>Note that CSS does not specify how a UA knows the ID
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 style="display:none">Example(s):</P><p>
The following ID selector matches the H1 element whose ID
attribute has the value "chapter1":</p>
<PRE>
h1#chapter1 { text-align: center }
</PRE>
</div>
<div class="html-example"><p>
In the following example, the style rule matches
the element that has the ID value "z98y".
The rule will thus match for the P element:</p>
<pre>
&lt;HEAD&gt;
&lt;TITLE&gt;Match P&lt;/TITLE&gt;
&lt;STYLE type="text/css"&gt;
*#z98y { letter-spacing: 0.3em }
&lt;/STYLE&gt;
&lt;/HEAD&gt;
&lt;BODY&gt;
&lt;P id=z98y&gt;Wide text&lt;/P&gt;
&lt;/BODY&gt;
</pre>
<p>In the next example, however, the style rule will only match an H1
element that has an ID value of "z98y". The rule will not match the
P element in this example:</p>
<pre>
&lt;HEAD&gt;
&lt;TITLE&gt;Match H1 only&lt;/TITLE&gt;
&lt;STYLE type="text/css"&gt;
H1#z98y { letter-spacing: 0.5em }
&lt;/STYLE&gt;
&lt;/HEAD&gt;
&lt;BODY&gt;
&lt;P id=z98y&gt;Wide text&lt;/P&gt;
&lt;/BODY&gt;
</pre>
</div>
<P>ID selectors have a higher specificity than attribute selectors.
For example, in HTML, the selector <samp>#p123</samp> is more specific
than <samp>[id=p123]</samp> in terms of the <a
href="cascade.html">cascade</a>.
<div class="note">
<p><em><strong>Note.</strong> In XML 1.0 <a href="refs.html#ref-XML10" rel="biblioentry" class="noxref"><span class="informref">[XML10]</span></a>, the information about which
attribute contains an element's IDs is contained in a DTD. When
parsing XML, UAs do not always read the DTD, and thus may not know
what the ID of an element is. If a style sheet designer knows or
suspects that this will be the case, he should use normal attribute
selectors instead: <code>[name=p371]</code> instead of
<code>#p371</code>. However, the cascading order of normal attribute
selectors is different from ID selectors. It may be necessary to add
an "!important" priority to the declarations: <code>[name=p371]
{color: red ! important}</code>.</em>
</div>
<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
<a href="refs.html#ref-XMLID" rel="biblioentry" class="noxref"><span class="informref">[XMLID]</span></a>, DOM3 Core <a href="refs.html#ref-DOM-LEVEL-3-CORE" rel="biblioentry" class="noxref"><span class="informref">[DOM-LEVEL-3-CORE]</span></a>, XML DTDs <a href="refs.html#ref-XML10" rel="biblioentry" class="noxref"><span class="informref">[XML10]</span></a> and
namespace-specific knowledge.
<h2>5.10 <a name="pseudo-elements">Pseudo-elements</a> and <a
name="pseudo-classes">pseudo-classes</a></h2>
<p>In CSS&nbsp;2.1, style is normally attached to an element based on its
position in the <a href="conform.html#doctree">document tree</a>. This
simple model is sufficient for many cases, but some common publishing
scenarios may not be possible due to the structure of the <a
href="conform.html#doctree">document tree</a>. For instance, in HTML
4 (see <a href="refs.html#ref-HTML4" rel="biblioentry" class="noxref"><span class="normref">[HTML4]</span></a>), no element refers to the first line of a
paragraph, and therefore no simple CSS selector may refer to it.</p>
<p>CSS introduces the concepts of <a name="x22"><span class="index-def"
title="pseudo-elements"><dfn>pseudo-elements</dfn></span></a> and <a name="x23"><span
class="index-def"
title="pseudo-classes"><dfn>pseudo-classes</dfn></span></a> to permit
formatting based on information that lies outside the document
tree. </p>
<ul>
<li>Pseudo-elements create a BF96 bstractions 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. CSS pseudo-elements allow style sheet
designers to refer to this otherwise inaccessible
information. Pseudo-elements may also provide style sheet designers a
way to assign style to content that does not exist in the source
document (e.g., the <a
href="generate.html#before-after-content">:before and :after</a>
pseudo-elements give access to generated content).
<li>Pseudo-classes classify elements on characteristics other than
their name, attributes or content; in principle characteristics that
cannot be deduced from the document tree. Pseudo-classes may be
dynamic, in the sense that an element may acquire or lose a
pseudo-class while a user interacts with the document. The exceptions
are <a href="#first-child">':first-child'</a>, which <em>can</em> be
deduced from the document tree, and
<a href="#lang">':lang()'</a>, which can be
deduced from the document tree in some cases.
</ul>
<P>Neither pseudo-elements nor pseudo-classes appear in the document
source or document tree.
<P>Pseudo-classes are allowed anywhere in selectors while
pseudo-elements may only be appended after the last simple selector of
the selector.
</p>
<p>Pseudo-element and pseudo-class names are case-insensitive.</p>
<P>Some pseudo-classes are mutually exclusive, while others can be
applied simultaneously to the same element. In case of conflicting
rules, the normal <a href="cascade.html#cascading-order">cascading
order</A> determines the outcome.
<h2>5.11 <a name="pseudo-class-selectors">Pseudo-classes</a></h2>
<h3>5.11.1 <a name="first-child">:first-child</a> pseudo-class</h3>
<P>The <a name="x24"><span class="index-def"
title="first-child|:first-child">:first-child</span></a> pseudo-class
matches an element that is the first child element of some other element.
<div class="example"><P style="display:none">Example(s):</P><P>
In the following example, the selector matches any P element
that is the first child of a DIV element. The rule
suppresses indentation for the first paragraph of a DIV:</p>
<PRE>
div &gt; p:first-child { text-indent: 0 }
</PRE>
This selector would match the P inside the DIV of the
following fragment:
<pre class="html-example">
&lt;P&gt; The last P before the note.
&lt;DIV class="note"&gt;
&lt;P&gt; The first P inside the note.
&lt;/DIV&gt;
</pre>
but would not match the second P in the following
fragment:
<pre class="html-example">
&lt;P&gt; The last P before the note.
&lt;DIV class="note"&gt;
&lt;H2&gt;Note&lt;/H2&gt;
&lt;P&gt; The first P inside the note.
&lt;/DIV&gt;
</pre>
</div>
<div class="example"><P style="display:none">Example(s):</P>
<p>The following rule sets the font weight to 'bold' for any EM
element that is some descendant of a P element that is a first
child:</p>
<pre>
p:first-child em { font-weight : bold }
</pre>
</div>
<P>Note that since <a href="visuren.html#anonymous">anonymous</a>
boxes are not part of the document tree, they are not counted when
calculating the first child.</p>
<div class="html-example"><P>
For example, the EM in:</p>
<PRE>
&lt;P&gt;abc &lt;EM&gt;default&lt;/EM&gt;
</PRE>
is the first child of the P.
</div>
<P>The following two selectors are equivalent:</p>
<PRE>
* &gt; a:first-child /* A is first child of any element */
a:first-child /* Same */
</PRE>
<h3>5.11.2 <a name="link-pseudo-classes">The link pseudo-classes</a>: <a name="x26"><span
class="index-def" title="pseudo-classes:::link|:link|link
(pseudo-class)">:link</span></a> and <a name="x29"><span class="index-def"
title="pseudo-classes:::visited|:visited|visited
(pseudo-class)">:visited</span></a></h3>
<p>User agents commonly display unvisited links differently from
previously visited ones. CSS provides the pseudo-classes ':link' and
':visited' to distinguish them:</p>
<ul>
<li> The :link pseudo-class applies for links that have
not yet been visited.
<li> The :visited pseudo-class applies once the link has been
visited by the user.
</ul>
<p>UAs may return a visited link to the (unvisited) ':link' state at
some point.
<P>The two states are mutually exclusive.
<p>The document language determines which elements are hyperlink
source anchors. For example, in HTML4, the link pseudo-classes
apply to A elements with an "href" attribute. Thus, the following
two CSS&nbsp;2.1 declarations have similar effect:</p>
<pre>
a:link { color: red }
:link { color: red }
</pre>
<div class="example"><P style="display:none">Example(s):</P><p>
If the following link:</p>
<pre class="html-example">
&lt;A class="external" href="http://out.side/"&gt;external link&lt;/A&gt;
</pre>
has been visited, this rule:
<pre>
a.external:visited { color: blue }
</pre>
will cause it to be blue.
</div>
<p class=note>Note. 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. See <a href="refs.html#ref-P3P" rel="biblioentry" class="noxref"><span class="informref">[P3P]</span></a> for more information
about handling privacy.
<h3>5.11.3 <a name="dynamic-pseudo-classes">The dynamic pseudo-classes:</a>
<a name="x32"><span class="index-def" title="pseudo-classes:::hover|:hover|hover
(pseudo-class)">:hover</span></a>, <a name="x35"><span class="index-def"
title="pseudo-classes:::active|:active|active
(pseudo-class)">:active</span></a>, and <a name="x38"><span class="index-def"
title="pseudo-classes:::focus|:focus|focus
(pseudo-class)">:focus</span></a></h3>
<p>Interactive user agents sometimes change the rendering in response
to user actions. CSS provides three pseudo-classes for common cases:</p>
<ul>
<li> The :hover pseudo-class applies while the user designates an
element (with some pointing device), but does not 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 supporting
<a href="media.html#interactive-media-group">interactive media</a>
do not have to support this pseudo-class.
Some conforming user agents supporting
<a href="media.html#interactive-media-group">interactive media</a>
may not be able to support this pseudo-class (e.g., a pen device).
<li> The :active 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.
<li> The :focus pseudo-class applies while an element has the
focus (accepts keyboard events or other forms of text input).
</ul>
<p>An element may match several pseudo-classes at the same time.
<p>CSS does not define which elements may be in the above states, or
how the states are entered and left. Scripting may change whether
elements react to user events or not, and different devices and UAs
may have different ways of pointing to, or activating elements.
<p>CSS&nbsp;2.1 does not define if the parent of an element that is
':active' or ':hover' is also in that state.
<p>User agents are not required to reflow a currently displayed
document due to pseudo-class transitions. For instance, a style sheet
may specify that the <a href="fonts.html#propdef-font-size" class="noxref"><span
class="propinst-font-size">'font-size'</span></a> of an :active link
should be larger than that of an inactive link, but since this may
cause letters to change position when the reader selects the link, a
UA may ignore the corresponding style rule.</p>
<div class="example"><P style="display:none">Example(s):</P><p>
<pre>
a:link { color: red } /* unvisited links */
a:visited { color: blue } /* visited links */
a:hover { color: yellow } /* user hovers */
a:active { color: lime } /* active links */
</pre>
<p>Note that the A:hover must be placed after the A:link and A:visited
rules, since otherwise the cascading rules will hide the <a href="colors.html#propdef-color" class="noxref"><span
class="propinst-color">'color'</span></a> property of the A:hover
rule. Similarly, because A:active is placed after A:hover, the active
color (lime) will apply when the user both activates and hovers over
the A element.
</div>
<div class="example"><P style="display:none">Example(s):</P>
<p>An example of combining dynamic pseudo-classes:
<pre>
a:focus { background: yellow }
a:focus:hover { background: white }
</pre>
<P>The last selector matches A elements that are in pseudo-class
:focus and in pseudo-class :hover.
</div>
<P>For information about the presentation of focus outlines, please
consult the section on <a href="ui.html#dynamic-outlines">dynamic
focus outlines</a>.
<div class="note"><P>
<em><strong>Note.</strong>
In CSS1, the ':active' pseudo-class was mutually
exclusive with ':link' and ':visited'. That is no longer the case. An
element can be both ':visited' and ':active' (or ':link' and
':active') and the normal cascading rules determine which style
declarations
apply.
</em>
View remainder of file in raw view
<