Selectors So Far
|
| ||||
| ||||
|
|
In tutorial 5, we introduced some basic
types of selectors. Specifically, a selector can be an element name by
itself, in which case it will match all elements of that type. It can
also be an element name followed by a period (.) and a
string, in which case it will match all elements of that type that have
a CLASS attribute with the string as a value. It can also
be just a period and a string, in which case it will match all elements
with that CLASS, regardless of their type. Replacing the
period with a hash mark (#) matches the ID attribute
instead of CLASS. Replacing the period with a colon (:)
matches elements of a specific pseudoclass, that is elements
that have a special characteristic. We looked at the link,
visited and active pseudoclasses, that denote
anchors that are unvisited hyperlink heads, visited hyperlink heads, or
active hyperlink heads.
Here are some examples to freshen your memory:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<TITLE>Example HTML Document Showcasing
Basic CSS Selectors</TITLE>
<STYLE TYPE="text/css">
<!--
H1 { color: red; /* A */ }
H1.special { font-style: italic /* B */ }
.wierd { color: magenta; /* C */ }
#unique { color: blue; /* D */ }
P#different { color: yellow; /* E */ }
A:link { color: green; /* F */ }
A:visited { color: darkgreen; /* G */ }
A:active { color: purple; /* H */ }
-->
</STYLE>
<BODY>
<H1 CLASS="special">A and B apply</H1>
<P CLASS="special">No rules apply.</P>
<P CLASS="wierd">C applies.</P>
<P ID="unique">D applies.</P>
<P><SPAN ID="unique">D applies</SPAN>.
<SPAN ID="different">No rules
apply.</SPAN>.
<A HREF="http://www.webreference.com/">F, G, or H apply
depending on whether the link is visited,
unvisited or active</A>. <A
NAME="bar">No rules
apply</A>.</P>
Those of you using Netscape Navigator 4.0 might have noticed a small
discrepancy on the part of the browser. Netscape Navigator 4.0 colors
the second SPAN element yellow, which means it matched the
P#different selector even though it is a SPAN
element, not a P element. Internet Explorer handles this
correctly, however.
So how do we work around this? If you think about it, there's not
much of a problem in the first place. Since only one element in a
document can have the same ID attribute, a selector that
matches ID will most probably be intended to match a single
element anyway. A problem arises if, and only if, a style sheet with
such a selector applies to more than one HTML document. If two such
documents contain two elements with the same ID but
different type, and a selector exists in the stylesheet that matches
this ID but only one of the element types, Navigator will
apply the ruleset to both elements. The way to work around this, put
simply, is not to do it! There are very few cases where you would want
this, and usually you can just assign a different ID to the
two elements.
