Selectors are used to select elements to which a given rule applies. CSS selectors are by no means as powerful as the XPath syntax of XSLT. They can be categorized as follows:
Element selectors retrieve elements by their name. For example, this rule says that all elements with tag dish should be centered:
dish {text-align: center;}
You may apply the same declaration to more than one element as follows:
directions, story {color: red;}
You may also apply more rules to the same element, like here:
directions, story {color: red;}
story {font-style: italic;}
Recall that when rules are conflicting, the latest (more specific) one wins. As usual, the asterisk matches any element at all:
* {font-size: large}
We can match descendant elements as follows:
ingredients quantity {font-size: medium}
The rule applies to all quantity elements that a descendants of ingredients elements. We can match child elements as follows:
ingredient > quantity {font-size: medium}
and next sibling elements as follows:
ingredient + ingredient {text-indent: 2em}
The latest rule applies to all ingredient elements that are right sibling of any ingredient element, that is, to all ingredient elements except the first.
Attribute selectors allow to select elements with particular attributes or attribute values. For instance, the following rule hides the step elements that have an attribute called optional:
step[optional] {display: none}
This rule hides the step elements that have an attribute called optional with value yes:
step[optional="yes"] {display: none}
If the sign ~= is used, the rule matches any step element whose optional attribute value is a list of space-separated values, one of which is exactly equal to yes. If the sign |= is used, the rule matches any step element whose optional attribute has a hyphen-separated list of values beginning (from the left) with yes.
There is a special syntax for selecting elements with a given value of the ID type attribute (whatever is its name). For instance, this rule applies to all the step elements whose ID type attribute value is S5:
step#S5 {font-weight: bold}