Style Syntax (Webmaster in a Nutshell, 3rd Edition)

9.2.2. Contextual Selectors

Normally, the browser applies styles to tags wherever they appear in your document, without regard to context. However, the CSS standard does define a way to have a style applied only when a tag occurs within a certain context within a document, such as when it is nested within other tags.

To create a contextual selector, list the tags in the order in which they should be nested in your document, outermost tag first, with no commas separating them. When that nesting order is encountered by the browser, the style property is applied to the last tag in the list.

For example, here's how you might use contextual styles to define the classic numbering sequence used for outlines: capital letters for the outer level, uppercase Roman numerals for the next level, lowercase letters for the next, and Arabic numerals for the innermost level:

OL LI {list-style: upper-alpha}
OL OL LI {list-style: upper-roman}
OL OL OL LI {list-style: lower-alpha}
OL OL OL OL LI {list-style: decimal}

According to the example style sheet, when the styles-conscious browser encounters the <li> tag nested within one <ol> tag, it uses the upper-alpha value for the list-style property of the <li> tag. When it sees an <li> tag nested within two <ol> tags, the same browser uses the upper-roman list style. Nest an <li> tag within three and four <ol> tags, and you'll see the lower-alpha and decimal list-style used, respectively.

Similarly, you may impose a specific style on tags related only by context. For instance, this contextual style definition colors the emphasis tag's (<em>) contents red only when it appears inside a level-one header tag (<h1>), not elsewhere in the document:

H1 EM {color: red}

If there is potential ambiguity between two contextual styles, the more specific context prevails. Like individual tags, you may also have several contextual selectors mixed with individual selectors, each and all separated by commas, sharing the same list of style declarations. For example:

H1 EM, P STRONG, ADDRESS {color: red}

means that you'll see red whenever the <em> tag appears within an <h1> tag, or when the <strong> tag appears within a <p> tag, and for the contents of the <address> tag.

The nesting need not be exact to match the rule. For example, if you nest the <strong> tag within a <ul> tag within a <p> tag, you'll still match the rule for P STRONG that we defined above. If a particular nesting matches several style rules, the most specific rule is used.

9.2.3. Style Classes

There is one more feature of style sheets that we haven't mentioned yet: classes. Classes let you create, at the document level or in an external style sheet, several different styles for a single tag, each distinguished by a class name. To apply the style class, name it as the value of the class attribute in the tag.

9.2.3.1. Regular classes

In a technical paper you might want to define one paragraph style for the abstract, another for equations, and a third for centered quotations. None of the paragraph tags may have an explicit context in the HTML document so you could distinguish it from the others. Rather, you may define each as a different style class:

<style type="text/css">
<!--

P.abstract {font-style: italic; 
            left-margin: 0.5cm; 
            right-margin: 0.5cm}

P.equation {font-family: Symbol; 
            text-align: center}

H1, P.centered {text-align: center; 
                left-margin: 0.5cm; 
                right-margin: 0.5cm}

-->
</style>

Notice first in the example that defining a class is simply a matter of appending a period-separated class name as a suffix to the tag name as the selector in a style rule. The class name can be any sequence of letters, numbers, and hyphens but must begin with a letter. And classes, like all selectors, may be included with other selectors, separated by commas, as in the third example. The only restriction on classes is that they can't be nested: e.g., P.equation.centered is not allowed.

Accordingly, the first rule in the example creates a class of paragraph styles named "abstract" whose text is italic and indented from the left and right margins by a half centimeter. Similarly, the second paragraph style class "equation" instructs the browser to center the text and to use the Symbol typeface to display the text. The last style rule creates a style with centered text and half-centimeter margins, applying this style to all level-one headers, as well as creating a class of the <p> tag named centered with that style.

To use a particular class of a tag, you add the class attribute to the tag, as in this example:

<p class="abstract">
This is the abstract paragraph.  See how the margins are indented?
</p>

<h3>The equation paragraph follows</h3>

<p class="equation">
a = b + 1
</p>

<p class="centered">
This paragraph's text should be centered.
</p>

For each paragraph, the value of the class attribute is the name of the class to be used for that tag.

9.2.3.2. Generic classes

You may also define a class without associating it with a particular tag, and apply that class selectively through your documents for a variety of tags. For example:

.italic {font-style: italic}

creates a generic class named italic. To use it, simply include its name with the class attribute. So, for instance, use <p class="italic"> or <h1 class="italic"> to create an italic paragraph or header.

Generic classes are quite handy and make it easy to apply a particular style to a broad range of tags.

9.2.3.3. Using IDs as classes

Almost all HTML tags accept the id attribute, which assigns an identifier to the element that is unique within the document. This identifier can be the target of a URL, used by automated document processing tools, and can specify a style rule for the element.

To create a style class that can be applied with the id attribute, follow the same syntax used for style classes, except with a # character before the class name instead of a period. This style creates such classes:

<style type="text/css">
<!--

#yellow { color : yellow}
H1#blue { color : blue}

-->
</style>

Within your document, you could use <h1 id="blue"> to create a blue heading, or add id="yellow" to almost any tag to turn it yellow. You can mix and match both class and id attributes, giving you a limited ability to apply two independent style rules to a single element.

There is a dramatic drawback to using classes defined this way: the value of the id attribute must be unique to exactly one tag within the document. You cannot legally reuse the class, although the browser might let you get away with it.

For this reason, we discourage creating and using these kinds of classes. Stick to the conventional style of classes to create correct, robust HTML documents.

9.2.3.4. Style pseudo-classes

In addition to conventional style classes, the CSS standard defines pseudo-classes, which allow you to define the display style for certain tag states. Pseudo-classes are like regular classes, with two notable differences: they are attached to the tag name with a colon instead of a period, and they have predefined names, not arbitrary ones you may give them.

There are five pseudo-classes, three of which are associated with the <a> tag. The other two can be used on any text element.

The browsers distinguish three special states for the hyperlinks created by the <a> tag: not visited, being visited, and visited. The browser may change the appearance of the tag's contents to indicate its state, such as underlining or changing the colors. Through pseudo-classes, the HTML author can control how these states get displayed by defining styles for A:link, A:active, and A:visited. The link pseudo-class controls the appearance of links that are not selected by the user and have not yet been visited. The active pseudo-class defines the appearance of links that are currently selected by the user and are being processed by the browser. The visited pseudo-class defines those links that have already been visited by the user.

To completely define all three states of the <a> tag, you might write:

A:link {color: blue}
A:active {color: red; font-weight: bold}
A:visited {color: green}

The two other pseudo-classes usually apply to the <p> element, and are named first-letter and first-line. As you might expect, these pseudo-classes control the appearance of the first letter and first line, respectively, of a paragraph and create effects commonly found in printed media, such as initial drop-caps and bold first lines. For example:

P:first-line {font-style: small-caps}

converts the first line of a paragraph to small capital letters. Similarly:

P:first-letter {font-size: 200%; float: left}

tells the browser to make the first letter of a paragraph twice as large as the remaining text and float the letter to the left, allowing the first two lines of the paragraph to float around the larger initial letter.

You may mix pseudo-classes with regular classes by appending the pseudo-class name to the selector's class name.

9.2.3.5. Class inheritance

Classes inherit the style properties of their generic base tag. For instance, all the properties of the plain <p> tag apply to a specially defined paragraph class, except where the class overrides a particular property.

Classes cannot inherit from other classes, only from the unclassed version of the tag they represent. In general, therefore, you should put as many common styles into the rule for the basic version of a tag, and create classes only for those properties that are unique to that class. This makes maintenance and sharing of your style classes easier, especially for large document collections.