Selectors (Web Design in a Nutshell, 2nd Edition)

17.3. Selectors

Selectors are the parts of the rule that identify the element (or elements) to which the style will be applied. There are several methods for identifying elements.

17.3.1. Type Selector

The simplest type of selector calls an HTML element by its tag, as shown:

H1 {color: blue}
H2 {color: blue}
P {color: blue}

Type selectors can be grouped into comma-separated lists so a single property will apply to all of them. The following code has the same effect as the previous code:

H1, H2, P {color: blue}

17.3.1.1. <div> and <span>

Two HTML elements, div and span, are generic identifiers ideal for use with style sheets. These elements have no inherent formatting properties of their own, but they can be used to designate elements on a web page that should be affected by style sheet instructions. These instructions are ignored by browsers that do not understand them.

The <div> tag is used to delimit block-level tags and can contain other HTML elements within it:

<DIV STYLE="color: blue">
<H1>Headline!</H1>
<P>This is a whole paragraph of text.</P>
</DIV>

The <span> tag is used inline to change the style of a set of characters:

<P>This is a paragraph and <SPAN STYLE="color: blue">>this area will be 
treated differently</SPAN> from the rest of the paragraph</P>

When used with the class and id attribute selectors (discussed later in this chapter), these tags can be used to create custom-named elements, sort of like creating your own HTML tags.

17.3.2. Contextual Selectors

You can also specify style attributes for HTML elements based on the context in which they appear.

As we've seen already, a simple selector specifies that all emphasized text within a document should be red:

EM {color: red}

Using a contextual selector (written as a list of simple selectors separated by white space) you can specify that only the emphasized text that appears within a list item will be green:

LI EM {color: green}

In other words, this affects emphasized text when it appears in the context of a list item element. If both of these rules for emphasized text were to appear in the same document, the contextual selector (because it is more specific) would take precedence over the simple selector.

Like simple type selectors, contextual selectors can also be grouped together in comma-separated lists. The following code makes bold (<B>) text red only when it appears in the context of a heading:

H1 B, H2 B, H3 B {color: red}

17.3.3. class and id Attribute Selectors

Attribute selectors allow web page authors to apply style rules based on special identifying attributes placed within HTML element tags. There are currently two available attribute selectors: class and id. They can be applied to all HTML elements except <base>, <head>, <html>, <meta>, <script>, <style>, and <title>. (In addition, class may not be used in <basefont> and <param>.)

17.3.3.1. class selector

Use the class attribute to identify a number of elements as being part of a conceptual group. Elements in a class can then be modified with a single style rule. For instance, you can identify all the items in the HTML document that you classify as "important":

<H1 CLASS="important">Attention!</H1>
<P CLASS="important">Your account is past due.</P>

To specify the styles for elements of a particular class, add the class name to the HTML selector, separated by a period (.). Note that class names cannot contain spaces; use hyphens or underscores instead if necessary (although underscores are discouraged due to lack of support in some browsers).

H1.important {color: red}
P.important {color: red}

To apply a property to all the elements of the same class, omit the tag name in the selector (be sure to leave the period -- it is the character that indicates a class):

.important {color: red}

17.3.3.2. id selector

The id attribute is used similarly to class, but it is used for targeting a single element rather than a group. id must be used to name an element uniquely (in other words, two elements can't have the same id name in the same document). If you have several elements that need a similar treatment, use class instead.

In the following example, a paragraph is given a specific id (note that the value of an id attribute must always begin with a letter):

<P ID="j042801">New item added today</P>

id selectors are indicated by the hash (#) symbol within the style sheet as follows:

P#j061998 {color: red}

The HTML tag name may be omitted:

#j061998 {color: red}

17.3.4. Pseudo-Selectors

The CSS1 Specification provides several pseudo-elements and pseudo-classes that are not based on structural elements of a document. They can be used as selectors, but the code does not appear in the HTML source; rather, they are interpreted by the browser based on context and function. Pseudo-selectors are indicated by the colon (:) character. As of this writing, only Internet Explorer 5.5+ (Windows), Internet Explorer 5 (Mac), Netscape 6, and Opera support pseudo-selectors reliably.

17.3.4.1. Pseudo-elements

In CSS1, the pseudo-elements (subparts of existing elements) are first-line and first-letter. They can be used to apply styles to the first line or letter of an HTML element as it is displayed in the browser window. The following code adds extra letter spacing in the first line of text for every paragraph:

P:first-line {letter-spacing: 6pt}

Pseudo-elements can be combined with class information, so you can apply first-line or -letter effects to only a certain class of element. The following sample makes the first letter of any paragraph classified as "opener" big and red:

P.opener:first-letter {font-size: 300%; color: red}

17.3.4.2. Pseudo-classes

CSS1 provides three pseudo-classes that can be applied to the anchor (<a>) tag: link , visited, and active (referring to the various link states as interpreted by the browser). These do not apply to named anchors, only those containing the HREF attribute.

A:link {color: red}
A:visited {color: blue}
A:active {color: maroon}

This style information provides the same functionality as specifying link colors in the <body> of a document, but it has the advantages that style sheets provide. Netscape's support for pseudo-classes is pretty buggy prior to Version 6.