selector.html

CSS lets learn this step by step...

<P>ID selectors have a higher precedence 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>. Of course, elements in 
XML 1.0 documents without a DTD do not have IDs at all.</em>
</div>

<h2>5.10 <a name="pseudo-elements">Pseudo-elements</a> and <a
name="pseudo-classes">pseudo-classes</a></h2>

<p>In CSS2, 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.0 (see <a href="refs.html#ref-HTML40" rel="biblioentry" class="noxref"><span class="normref">[HTML40]</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 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. 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 exception
is <a href="#first-child">':first-child'</a>, which <em>can</em> be
deduced from the document tree.
</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 appear after the <a
href="#subject">subject</a> of the selector.
</p>


<p>Pseudo-elements 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.

<p><a href="conform.html#conformance">Conforming HTML user agents</a>
may <span class="index-inst" title="ignore"><a name="x24"
href="syndata.html#ignore">ignore</a></span> all rules with :first-line or
:first-letter in the selector, or, alternatively, may only support a
subset of the properties on these pseudo-elements.</P>

<h2><a name="q15">5.11 Pseudo-classes</a></h2>

<h3>5.11.1 <a name="first-child">:first-child</a> pseudo-class</h3>

<P>The <a name="x25"><span class="index-def"
title="first-child|:first-child">:first-child</span></a> pseudo-class
matches an element that is the first child 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="x27"><span
class="index-def" title="pseudo-classes:::link|:link|link
(pseudo-class)">:link</span></a> and <a name="x30"><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 class="note"><em><strong>Note.</strong> After a certain amount of
time, user agents may choose to return a visited link to the
(unvisited) ':link' state.</em>

<P>The two states are mutually exclusive.

<p>The document language determines which elements are hyperlink
source anchors. For example, in HTML&nbsp;4.0, the link pseudo-classes
apply to A elements with an "href" attribute. Thus, the following
two CSS2 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>

<h3>5.11.3 <a name="dynamic-pseudo-classes">The dynamic pseudo-classes:</a>
<a name="x33"><span class="index-def" title="pseudo-classes:::hover|:hover|hover
(pseudo-class)">:hover</span></a>, <a name="x36"><span class="index-def"
title="pseudo-classes:::active|:active|active
(pseudo-class)">:active</span></a>, and <a name="x39"><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>These pseudo-classes are not mutually exclusive. An element may
match several of them at the same time.

<p>CSS doesn't 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>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 properties
apply.
</em>
</div>

<h3>5.11.4 <a name="lang">The language pseudo-class:</a> <a name="x42"><span
class="index-def" title="pseudo-classes:::lang|:lang|lang
(pseudo-class)">:lang</span></a></h3>

<p>If the document language specifies how the <a name="x45"><span class="index-inst"
title="language (human)">human language</span></a> of an element is
determined, it is possible to write selectors in CSS that match an
element based on its language. For example, in HTML <a href="refs.html#ref-HTML40" rel="biblioentry" class="noxref"><span class="normref">[HTML40]</span></a>, the
language is determined by a combination of the "lang" attribute, the
META element, and possibly by information from the protocol (such as
HTTP headers). XML uses an attribute called XML:LANG, and there may be
other document language-specific methods for determining the language.

<p>The pseudo-class ':lang(C)' matches if the element is in
language C. Here C is a <a name="x46"><span class="index-inst"
title="language code">language code</span></a> as specified in
HTML&nbsp;4.0 <a href="refs.html#ref-HTML40" rel="biblioentry" class="noxref"><span class="normref">[HTML40]</span></a> and RFC&nbsp;1766 <a href="refs.html#ref-RFC1766" rel="biblioentry" class="noxref"><span class="informref">[RFC1766]</span></a>. It is matched
the same way as for the <a href="#attribute-selectors">'|='
operator</a>.

<div class="example"><P style="display:none">Example(s):</P>
<p>The following rules set the quotation marks for an HTML document
that is either in French or German:</p>

<pre>
HTML:lang(fr) { quotes: '