| 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 13-2. However, CSS provides some other basic selectors you can use, although they're by no means as powerful as the XPath syntax of XSLT. 13.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}
13.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 in order 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}
13.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 the element's 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 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 the name of the ID type attribute. 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 }
13.4.4 Pseudo-Class Selectors Pseudo-class selectors match elements according to a condition not involving their name. There are seven of these separated from the element name by a colon . -
- first-child
-
This pseudo-class matches the first child element of the named element. When applied to Example 13-1, this rule italicizes the first, and only the first, step element: step:first-child {font-style: italic}
-
- link
-
This pseudo-class matches the named element if and only if that element is the source of an as yet unvisited link. For example, this rule makes all links in the document blue and underlined : *:link {color: blue; text-decoration: underline}
-
- visited
-
This pseudo-class 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}
-
- active
-
This pseudo-class 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}
-
- linking
-
These pseudo-classes are not yet well-supported for XML documents because most browsers don't recognize XLinks. So far, only Mozilla and Netscape 6/7 recognize XLinks, and they are the only browsers that will apply these pseudo-classes to XML. -
- hover
-
This pseudo-class applies to elements on which the cursor is currently positioned but has not yet activated. For example, this rule marks all these elements as green and underlined: *:hover {color: green; text-decoration: underline}
-
- focus
-
This pseudo-class 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 }
-
- lang
-
This pseudo-class 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"}
13.4.5 Pseudo-Element Selectors Pseudo-element selectors match things that aren't actually elements. Like pseudo-class 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 pseudo-element 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 pseudo-element 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 pseudo-elements 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; }
| 