selector.html

CSS lets learn this step by step...

<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.

<p>In some contexts, adjacent elements generate formatting objects
whose presentation is handled automatically (e.g., collapsing
vertical margins between adjacent boxes). The "+" selector
allows authors to specify additional style to adjacent elements.

<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 an attribute
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>CSS2 allows authors to specify rules that match attributes defined
in the source document.

<h3><a name="q10">5.8.1 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>Match when the element's "att" attribute value is a 
space-separated list of "words", one of which is exactly "val". 
If this selector is used, the words in the value must not contain
spaces (since they are separated by spaces).
<dt><a name="x18"><span class="index-def" title="hyphen-separated
matching|&#124;="><code>[att|=val]</code></span></a>
<dd>Match when the element's "att" attribute value is a 
hyphen-separated list of "words", beginning with "val". The match
always starts at the beginning of the attribute value.
This is primarily
intended to allow <a name="x20"><span class="index-inst" title="language
code">language subcode</span></a> matches (e.g., the "lang"
attribute in HTML) as described in RFC 1766 (<a href="refs.html#ref-RFC1766" rel="biblioentry" class="noxref"><span class="informref">[RFC1766]</span></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 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: "Lawrence Olivier", charles, male }
      
DIALOGUE[character=juliet]  
     { voice-family: "Vivien Leigh", victoria, female }
</pre>
</div>

<H3><a name="q11">5.8.2 Default attribute values in DTDs</a></H3>

<P>Matching takes place on attribute values in the document tree. For
document languages other than HTML, default attribute values may be
defined in a <a name="x21"><span class="index-inst" title="DTD">DTD</span></a> or elsewhere. Style
sheets should be designed so that they work even if the default values
are not included in the document tree.

<div class="example"><P style="display:none">Example(s):</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>then to catch the cases where this attribute is set by default,
and not explicitly, the following rule might be added:

<pre class="example">
EXAMPLE { /*... default property settings ...*/ }
</pre>

<p>Because this selector is less 
<a href="cascade.html#specificity">
specific</a> than an attribute selector, it will only be used for the
default case. Care has to be taken that all other attribute values
that don't get the same style as the default are explicitly covered.
</div>


<h3>5.8.3 <a name="class-html">Class selectors</a></h3> 

<p>For style sheets used with HTML, authors may use the dot (.)
notation as an alternative to the "~=" notation when matching on the
"class" attribute. Thus, for HTML,
"DIV.value" and "DIV[class~=value]" have the same meaning. The
attribute value must immediately follow the ".".

<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 ".", in any order.</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.pastoral.marine { 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 practice since the structural elements of a document language
often have recognized and accepted meanings and author-defined classes may
not.</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.</p>

<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>