Section III.7. Advanced Subgroup Selectors


III.7. Advanced Subgroup Selectors

The CSS2 and CSS2.1 recommendations make further enhancements to the way selectors can be specified in style sheet rules. Some advanced selectors are supported only in recent browser versions. See Chapter 4 of Dynamic HTML, Third Edition 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.

III.7.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.x. 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.

III.7.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-variant: small-caps} </style> 

Style properties that can be set for :first-letter and :first-line include a large subset of the full CSS property set. They include all font, color, background, and several more text-related properties (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. Pseudo-elements can have a radical impact on the presentation of not only the immediate text, but nearby content as well. Because of spotty support for these pseudo-elements, tread carefully with their deployment, and test on a wide variety of browsers.

III.7.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, although the latter is frowned upon in these days of CSS). The syntax for pseudo-class selectors follows the same pattern as for pseudo-elements. The following 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> 

In CSS2, the :active pseudo-class is not restricted to links, but can be applied to any element (indicating that the user is interacting with the element, such as clicking on it). Joining the :active pseudo-class are :focus (when an element has focus, such as being ready to accept keyboard input) and :hover (when the pointer is atop the element without acting on the element). If you wish to effect style changes during a "mouse rollover," the :hover pseudo-class lets you accomplish this form of dynamism without any scripting. For example, you can specify a display CSS property to show an element during a hover, and hide the element (display: none) in other states.

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.

III.7.1.3. CSS3 pseudo-classes

A number of new pseudo-classes join the vocabulary from the CSS3 specification as it nears completion. Several of the new collection are already implemented in Opera 9.

It is clear that one group of the additions, called structural pseudo-classes, are aimed at reducing the need to load HTML markup with lots of class attribute assignments that are typically used to identify more structural details than HTML tags can do by themselves. For example, many designers like to alternate the pastel background colors of table rows to make the table easier to read. The traditional way to do that with CSS is to assign alternating class attribute names to rows, and define a rule for each class. With the :nth-child( ) pseudo-class, however, you can instruct alternating TR elementsby virtue of their structureto use different background colors without any additional HTML markup:

 tr:nth-child(2n) {background-color: lightgreen} tr:nth-child(2n+1) {background-color: lightyellow} 

The notation inside the parentheses adheres to the format an + b. In the case of the :nth-child( ) pseudo-class example above, the notation means that the browser is to:

  1. Find all sibling elements of a tr element (i.e., all those sharing a common parent, such as a tbody element).

  2. Divide the entire bunch of siblings into groups of 2.

  3. For those at the beginning of each group of two, apply the lightgreen background color.

  4. For those in the position of one beyond the group's first item, apply the lightyellow background color.

Other structural pseudo-classes assist style sheet rules that need to be applied to the last child of a container (:last-child), repeated groups of child nodes in a container (:nth-child( )), elements in a container that are of a specific tag type (:only-of-type), and many combinations thereof. Despite the initial complexity these selectors appear to bring to the discussion, they promote the ultimate goal of separating presentation and content markup.

Browser support for pseudo-classes is quite variable. For instance, the :hover pseudo-class works only with hyperlink (a) elements in IE 6 or earlier and IE 7 in quirks mode. See the discussion about selectors in Chapter 4 of Dynamic HTML, Third Edition for details, more examples, and browser support.

III.7.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, while CSS3 extends that notion even further to permit matches of parts of attribute values.

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 containing a particular attribute (and value) to determine whether the style should be applied to the element. 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 III-2 shows the seven attribute selector formats and what they mean. A new syntactical feature for selectorssquare bracketsadds another level of complexity to defining style sheet rules, but the added flexibility may be worth the effort.

Table III-2. CSS attribute selectors

Syntax format

Description

[attributeName]

Matches an element if the attribute is defined in the HTML tag regardless of value

[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

[attributeName^=value]

Matches an element if the attribute value starts with the characters in value (CSS3)

[attributeName$=value]

Matches an element if the attribute value ends with the characters in value (CSS3)

[attributeName*=value]

Matches an element if the attribute value contains the characters in value (CSS3)


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

Table III-3. How attribute selectors work

Style sheet selector

Applies to

Does not apply to

 p[align] hr[align="left"] img[alt~="Placeholder"] p[lang|="en"] 

 <p align="left"> <p align="left" title="Summary"> <hr align="left"> <img alt="Temporary Placeholder" src="/books/2/570/1/html/2/picture.gif"> <p lang="en-CA"> 

 <p title="Summary"> <hr align="middle"> <applet alt="Applet Placeholder" code=...> <p lang="fr-CA"> 


If you wish to apply a style to all elements that have multiple attributes, you can include multiple attribute selectors in the same rule. For example, the following rule applies to all input elements of the text type and have tabindex attributes:

 input [type="text"][tabindex] {background-color: lightyellow} 

III.7.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 in the current document. 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"] 

III.7.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 differenta 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, whereas the descendant selector means that the second symbol is nested at any level within the first.

III.7.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 hierarchy, the rule looks like the following:

 h1 + h2 {margin-top: 6px} 




Dynamic HTML. The Definitive Reference
Dynamic HTML: The Definitive Reference
ISBN: 0596527403
EAN: 2147483647
Year: 2004
Pages: 120
Authors: Danny Goodman

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net