11.2 Assigning Style Sheet Rules to a Subgroup of Elements

NN 4, IE 4

11.2.1 Problem

You want a mixed group of elements (of the same or different tag name) in a document to be governed by a single style sheet rule.

11.2.2 Solution

Use a class or contextual selector in your style sheet rule definition. If you use a class selector, the rule is applied to every element in the document (regardless of tag name) whose class attribute is assigned the arbitrary name you use for the class definition. A class selector name in the style sheet definition is preceded by a period, as in the following example:

.hot {color:red; text-decoration:underline}

But the period is not used in the class attribute assignment statement in the tag:

<p>And now for something <span class="hot">completely</span> different.</p>

A contextual selector lets you define a rule that applies to all instances of a given tag when they are nested inside another specific tag. For example, the following style sheet rule applies to all em elements that exist inside any p element in the document:

p em {font-size:16pt; font-style:normal}

If an em tag were embedded within, say, a li element, this rule would not be applied to it.

11.2.3 Discussion

Class and contextual selectors are rather powerful features of CSS. For example, you can limit a class selector name to apply to only a hand-picked group from a particular tag, as in:

p.narrow {margin-left:5em; margin-right:5em}

This rule is applied to all p elements only when those elements have the name narrow assigned to their class attributes:

<p class="narrow">...</p>

You could then define a class selector of the same name that applies to all div elements whose class attributes are assigned the value narrow:

div.narrow {margin-left:7em; margin-right:7em}

You can also further refine the context of a contextual selector by specifying as deeply nested a context as your design calls for. In the following example, a style rule is defined for a span element whenever it appears nested inside an em tag, which, in turn, is nested inside a p element whose class selector is set to narrow:

p.narrow em span {background-color:yellow}

By virtue of style sheet inheritance, this rule also inherits any other style rules that are specified for p.narrow and em elements in the page.

Moreover, you can use the contextual selector to override a style rule for a portion of an element whose containing element has the same style rule properties set for it. The following example shows a rule defined for an em element within a p element, but then has one of the em element's attribute overridden when a span is located inside the em element:

p em {font-size:16pt; font-style:normal}
p em span {font-size:18pt}
...
<p>This is <span>all</span> 16pt <em>text except <span>this 18pt part</span></em></p>

The span element inside the em element inherits the normal font-style setting, but defines its own font-size setting just for the span content.

Class names (also called identifiers) that you create are entirely up to you. The only restrictions are as follows:

• Use one word only (no whitespace)

• Avoid punctuation symbols (underscores are okay)

• Do not use a numeral as the first character of the name

• Do not use an ECMAScript reserved word (see Appendix C)

Not all of these restrictions are necessary for CSS, but if you also write client-side scripts that access objects by their IDs, you will stay out of trouble if you follow these rules.

11.2.4 See Also

Recipe 11.3 to define a rule for a single element; Recipe 11.9 to override a rule for just one element.