Advanced Subgroup Selectors (Dynamic HTML: The Definitive Reference, 2nd Edition)

Dynamic HTML: The Definitive Reference, 2rd Ed.

3.8. Advanced Subgroup Selectors

The CSS2 specification makes further enhancements to the way selectors can be specified in style sheet rules. Netscape 6 and IE 5/Mac support more of these advanced selectors than IE 6/Windows. See Chapter 11 for selector compatibility in major browsers. Most of these advanced selector forms extend the concepts in effect for simple selectors. They provide either special case selectors or additional ways to slice and dice element collections for finely-tuned style designs.

3.8.1. Pseudo-Element and Pseudo-Class Selectors

The original idea for pseudo-elements and pseudo-classes was defined as part of the CSS1 recommendation; these selectors have been expanded in CSS2. A fine line distinguishes these two concepts, but they do share one important factor: there are no direct HTML tag equivalents for the elements or classes described by these selectors. Therefore, you must imagine how the selectors will affect the real tags in your document.

3.8.1.1. Using pseudo-elements

A pseudo-element is a well-defined chunk of content in an HTML element. Two pseudo-elements specified in the CSS1 recommendation point to the first letter and the first line of a paragraph. The elements are named :first-letter and :first-line, respectively. It is up to the browser to figure out where, for example, the first line ends (based on the content and window width) and apply the style only to the content in that line. If the browser is told to format the :first-letter pseudo-element with a drop cap, the browser must also take care of rendering the rest of the text in the paragraph so that it wraps around the drop cap.

For example, to apply styles for the first letter and first line of all p elements, use the following style rules:

<style type="text/css">
    p:first-letter {font-face:Gothic, serif; font-size:300%; float:left}
    p:first-line {font-style:small-caps}
</style>

Style attributes that can be set for :first-letter and :first-line include a large subset of the full CSS attribute set. They include all font, color, background, and several more text-related attributes (line-height, text-decoration, letter-spacing, and so on). The :first-letter element also allows for borders, margins, and padding.

The CSS2 :before and :after pseudo-elements offer intriguing possibilities for inserting repeated or generated text before or after an element. For example, you could define a blockquote:after selector that inserts the phrase "Reprinted by permission." at the end of every blockquote element on the page. Another variation maintains counter variables that track and render incremented numbers to be inserted before each element defined by a selector. Very few of these facilities are built into IE 6 or Netscape 6, so it will be awhile before you can freely take advantage of their powers. But because pseudo-elements can impact actual text characters on the page, you'll need to tread carefully with their deployment.

3.8.1.2. Using pseudo-classes

In contrast to a pseudo-element, a pseudo-class applies to an element whose look or content may change as the user interacts with the content. Pseudo-classes defined in the CSS1 recommendation are for three states of the a element: a link not yet visited, a link being clicked on by the user, and a link that has been visited. Default behavior in most browsers is to differentiate these states by colors (default colors can usually be set by user preferences as well as by attributes of the body element). The syntax for pseudo-class selectors follows the same pattern as for pseudo-elements. This style sheet defines rules for the three a element pseudo-classes:

<style type="text/css">
    a:link {color:darkred}
    a:active {color:coral}
    a:visited {color:lightblue; font-size:-1}
</style>

Pseudo-classes in CSS2 include :first-child, :lang, :active, :focus, and :hover. The last one, implemented for a elements starting in IE 5 and Netscape 6, allows for style changes to take effect when the cursor rolls atop a link—without the customary mouse event script processing.

As with other selectors, you can combine class or ID selectors with pseudo-elements or pseudo-classes to narrow the application of a special style. For instance, you may want a large drop cap to appear only in the first paragraph of a page. See Chapter 11 for an example, plus a list of CSS2 pseudo-elements and pseudo-classes.

3.8.2. Attribute Selectors

In CSS1, the links between style rule selector and an element's attributes are limited to the class and id attributes. CSS2 broadens the possibilities to include any attribute or attribute/value pair as selectors. In the context of CSS2, the class and ID selectors described earlier are simply special cases of the attribute selector.

It is helpful to think of an attribute selector as an expression that helps the user agent (browser or application) locate a match of HTML elements or attributes to determine whether the style should be applied. A match may occur by the presence of an attribute name in the tag, or an attribute and a specific value. For example, a page may contain several a elements, some of which open a second window by assigning the attribute target="_blank". An attribute selector allows one style to apply only to those a elements with the attribute combination, while another style applies to all other a elements that target the current window.

Table 3-2 shows the four attribute selector formats and what they mean. A new syntactical feature for selectors—square brackets—adds another level of complexity to defining style sheet rules, but the added flexibility may be worth the effort.

Table 3-2. Attribute selector syntax

Syntax format	Description
`[attributeName]`	Matches an element if the attribute is defined in the HTML tag
`[attributeName=value]`	Matches an element if the attribute is set to the specified value in the HTML tag
`[attributeName~=value]`	Matches an element if the specified value is present among the values assigned to the attribute in the HTML tag
`[attributeName\|=value]`	Matches an element if the attribute value contains a hyphen, but starts with value

To see how these selector formats work, observe how the sample style sheet rules in Table 3-3 apply to an associated HTML tag.

Table 3-3. How attribute selectors work

Style sheet selector	Applies to	Does not apply to
`p[align]`	<p align="left"> <p align="left" title="Summary">	`<p title="Summary">`
`hr[align="left"]`	`<hr align="left">`	`<hr align="middle">`
`img[alt~="Placeholder"]`	<img alt="Temporary Placeholder" src="picture.gif">	<applet alt="Applet Placeholder" code=...>
`p[lang\|="en"]`	`<p lang="en-CA">`	`<p lang="fr-CA">`

3.8.3. Universal Selectors

In practice, the absence of an element selector before an attribute selector implies that the rule is to apply to any and all elements of the document. But a special symbol more clearly states your intentions. The asterisk symbol (*) acts like a wildcard character to select all elements. You can use this to a greater advantage when you combine selector types, such as the universal and attribute selector. The following selector applies to all elements whose align attributes are set to a specific value:

*[align="middle"]

3.8.4. Child Selectors

Element containment is a key factor in the child selector. Again, following the notion of a style rule selector matching a pattern in a document, the child selector looks for element patterns that match a specific sequence of parent and child elements. The behavior of a child selector is very similar to that of a descendant selector, but the notation is different—a greater-than symbol (>) separates the element names in the selector, as in:

body > p {font-size:12px}

Another difference is that the two elements on either side of the symbol must be direct relations of each other, as a paragraph is of a body.

3.8.5. Adjacent Sibling Selectors

An adjacent sibling selector lets you define a rule for an element based on its position relative to another element or, rather, the sequence of elements. Such adjacent selectors consist of two or more element selectors, with a plus symbol (+) between the selectors. For example, if your design calls for an extra top margin for an h2 block whenever it immediately follows an h1 element in the document, the rule looks like the following:

h1 + h2 {margin-top: 6px}