home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam  


Dynamic HTML: The Definitive Reference, 2rd Ed.Dynamic HTML: The Definitive ReferenceSearch this book

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.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">



Library Navigation Links

Copyright © 2003 O'Reilly & Associates. All rights reserved.