 |  |
12.4. Selectors
CSS provides limited abilities to select the elements to which a given rule applies. Many stylesheets only use element names and lists of element names separated by commas, as shown in Example 12-2. However, CSS provides some other basic selectors you can use, though they're by no means as powerful as the XPath syntax of XSLT.
12.4.1. The Universal Selector
The asterisk matches any element at all; that is, it applies the rule to everything in the document that does not have a more specific, conflicting rule. For example, this rule says that all elements in the document should use a large font:
* {font-size: large}12.4.2. Matching Descendants, Children, and Siblings
An element name A followed by another element name B matches all B elements that are descendants of A elements. For example, this rule matches quantity elements that are descendants of ingredients elements, but not other ones that appear elsewhere in the document:
ingredients quantity {font-size: medium}If the two element names are separated by a greater than sign (>), then the second element must be an immediate child of the first for the rule to apply. For example, this rule gives quantity children of ingredient elements the same font-size as the ingredient element:
ingredient > quantity {font-size: inherit}If the two element names are separated by a plus sign (+), then the second element must be the next sibling element immediately after the first element. For example, this style rule sets the border-top-style property for only the first story element following a directions element:
directions + story {border-top-style: solid}12.4.3. Attribute Selectors
Square brackets allow you to select elements with particular attributes or attribute values. For example, this rule hides all step elements that have an optional attribute:
step[optional] {display: none}This rule hides all elements that have an optional attribute regardless of their name:
*[optional] {display: none}An equals sign selects an element by a given attribute's value. For example, this rule hides all step elements that have an optional attribute with the value yes:
step[optional="yes"] {display: none}The ~= operator selects elements that contain a given word as part of the value of a specified attribute. The word must be complete and separated from other words in the attribute value by whitespace, as in a NMTOKENS or ENTITIES attribute. That is, this is not a substring match. For example, this rule makes bold all recipe elements whose source attribute contains the word "Anderson":
recipe[source~="Anderson"] {font-weight: bold}Finally, the |= operator matches against the first word in a hyphen-separated attribute value, such as Anderson-Harold or fr-CA.
CSS also provides a special syntax for selecting elements with a given ID value, even when you don't know exactly what the name of the ID type attribute is. Simply separate the ID from the element name with a sharp sign (#). For example, this rule applies to the single step element whose ID type attribute has the value P833:
step#P833 { font-weight: 800 }12.4.4. Pseudoclass Selectors
Pseudoclass selectors match elements according to a condition not involving their name. There are seven of these. They are all separated from the element name by a colon. For example, the first-child pseudoclass matches the first child element of the named element. When applied to Example 12-1, this rule italicizes the first, and only the first, step element:
step:first-child {font-style: italic}*:link {color: blue; text-decoration: underline}The visited pseudoclass applies to all visited links of the specified type. For example, this rule marks all visited links as purple and underlined:
*:visited {color: purple; text-decoration: underline}The active pseudoclass applies to all elements that the user is currently activating (for example, by clicking the mouse on). Exactly what it means to activate an element depends on the context, and indeed not all applications can activate elements. For example, this rule marks all active elements as red:
*:active {color: red}The linking pseudoclasses are not yet well-supported for XML documents because most browsers don't recognize XLinks. So far, Mozilla and Netscape 6, the only browsers that recognize XLinks, are the only browsers that will apply these pseudoclasses to XML.
The hover pseudoclass applies to elements on which the cursor is currently positioned but which the user has not yet activated. For example, this rule marks all these elements as green and underlined:
*:hover {color: green; text-decoration: underline}The focus pseudoclass applies to the element that currently has the focus. For example, this rule draws a one-pixel red border around the element with the focus, assuming there is such an element:
*:focus {border: 1px solid red }Finally, the lang pseudoclass matches all elements in the specified language as determined by the xml:lang attribute. For example, this rule uses the David New Hebrew font for all elements written in Hebrew (more properly, all elements whose xml:lang attribute has the value he or any subtype thereof).
*:lang(he) {font-family: "David New Hebrew"}12.4.5. Pseudoelement Selectors
Pseudoelement selectors match things that aren't actually elements. Like pseudoclass selectors they're attached to an element selector by a colon. There are four of these:
-
first-letter
-
first-line
-
before
-
after
The first-letter pseudoelement selects the first letter of an element. For example, this rule makes the first letter of the story element a drop cap:
story:first-letter {
font-size: 200%;
font-weight: bold;
float: left;
padding-right: 3pt
}The first-line pseudoelement applies formatting to all characters in the first line of a block-level element. If the browser window is resized so that characters move into or out of the first line, then the formatting changes to match. For example, this rule formats the first line of the story element in small capitals instead of lowercase letters:
story:first-line {font-variant: small-caps}The before and after pseudoelements select the points immediately before and after the specified element. You can't really apply font or text styles to a zero-width point, but you can insert text at that point using the content property. For example, this rule inserts the string "Ingredients!" before the ingredients element:
ingredients:before {content: "Ingredients! "}This rule places the number of the step in front of each step element in the form 1., 2., 3., and so on:
step:before {
content: counter(step) ". ";
counter-increment: step;
} |  | |
| 12.3. Associating Stylesheets with XML Documents |  | 12.5. The Display Property |
Copyright © 2002 O'Reilly & Associates. All rights reserved.