| home / programming / css_utopia / chap3 / |    [previous] [next] |
|
|
|
The pseudo-class selector is exactly like the pseudo-element selector, with one exception. A pseudo-class selector applies to a whole element, but only under certain conditions.
The current release of CSS2 defines the following pseudo-classes:
:hover
:active
:focus
:link
:visited
:lang()
A style sheet, then, can define style rules for these pseudo-classes like this:
a:hover {
color:#ffcc00;
}
All anchor tags will change their color when the user hovers over them with the cursor. As you can see, this means the pseudo-class selector comes into play only when the user interacts with the affected element.
The :lang() pseudo-class[4] refers to the setting of the lang attribute in an HTML element. For example, you can define a paragraph in a document as being written in German, with a tag like this:
<p lang="de">Deutsche Grammophone</p>
If you wanted, for example, to change the font family associated with all elements in the document written in German, you could write a style rule like this:
:lang(de) {
font-family: spezialitat;
}
Don’t confuse this lang attribute with the language attribute that applies to tags related to the scripting language being used in a script or on a page.
Recall that all HTML elements (except the html element) are descendants of at least one other HTML element. To apply a CSS style rule to an element that’s a descendant of another type of element, use the descendant selector.
A descendant selector, such as the one shown in the following style rule, restricts the applicability of the rule to elements that are descendants of other elements. The descendant selector is read from right to left to determine its scope. Spaces separate the element types.
li em {
font-size: 16px;
color: green;
}
The style rule describes a 16-pixel-high font size and a color of green to be applied to any text contained in an em element (emphasis) only where the emphasized text is a descendant of a list item.
In the fragment below, the first em element will be displayed in green, 16-pixel characters, while the second will not, as it doesn’t appear within a list item.
<ul> <li>Item one</li> <li>Item <em>two</em></li> </ul> <p> An <em>italicized</em> word. </p>
It’s important to note that the descendant relationship need not be an immediate parent-child connection. In Figure 3.1, for example, the following style rule would apply to the anchor element (a) even though it explicitly focuses on a elements that are descendants of div elements. This is because, in this case, the a element is the child of a paragraph that’s contained in a div element.
div a {
font-style: italic;
}
The parent-child selector causes a style rule to apply to element patterns that match a specific sequence of parent and child elements. It is a special case of the descendant selector discussed in the preceding section. The key difference between the two is that the pair of elements in a parent-child selector must be directly related to one another in a strict inheritance sequence.
A parent-child relationship is specified in a selector with the “greater-than” sign (>).
The following style rule:
div > p {
font-weight: bold;
}
will not apply to the p1 or p4 elements in Figure 3.1 because these paragraph elements aren’t children of a div element. Similarly, p5 won’t be affected even though it’s a descendant of a div element, because the intervening ul and li elements mean that it is not a child of that div element. Only p2 and p3 will be affected by the rule.
As of this writing, Internet Explorer for Windows (up to and including version 6) distinguishes itself by being the only major browser that does not support parent-child selectors in its latest version. Because of this, careful use of descendant selectors is far more common, and the parent-child selector is often abused to specifically create styles that do not apply to Internet Explorer for Windows.
| home / programming / css_utopia / chap3 / | [previous] [next] |
The Network for Technology Professionals
Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers
Created: March 27, 2003
Revised: June 10, 2003
URL: http://webreference.com/programming/css_utopia/chap3
