Selectors So Far - How do I Select Thee, Let Me Count the Ways - HTML With Style

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"
 "https://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="https://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.

URL: https://www.webreference.com/html/tutorial6/4.html
Created: September 24, 1998
Revised: September 24, 1998

Selectors So Far - How do I Select Thee, Let Me Count the Ways - HTML With Style

Selectors So Far

Find a programming school near you