Selectors

Styling lists
We have already seen how to use a selectorA way of specifying to which parts of a document the declarations in a rule apply. to specify all elements of a type or classAn attribute assigning an element to a named class., or a single IDAn attribute specifying a unique identifier for an element.. In theory, we have all the selectors we need to style groups of elements or individual ones. In practice, adding classes and IDs to all the elements is more labour-intensive than necessary.
In this module, we will consider how to handle various situations, such as the following:
- Several elements share styling in some or all aspects.
- Styling is fairly consistent based on the structure of the page, such as the styling of lists within lists or lists within tables.
- Elements with similar attributes are styled in a similar way.
In our rhubarb example, we identify three different ways of styling lists:
- The list of hyperlinks in the aside.
- The unordered lists of recipe ingredients.
- The ordered lists of recipe steps.
To distinguish among the different kinds of lists, we can use not only the fact that some are ordered and some unordered, but also the fact that one is found in an aside elementAn element containing material tangential to other material. whereas the others are found in article elementsAn element that designates a self-contained part of the content..
In this module we will look at more sophisticated ways of identifying and grouping individual elements based on where they appear in the tree representation of the document, as well as other features, through an examination of the following topics:
- Combining selectors: using the same rules for a combination of elements, classes, or IDs
- Selecting children or descendants: specifying elements based on the parent or ancestor
- Selecting siblings: specifying elements based on a previous sibling
- Attribute selectors: specifying elements by attributes
- Pseudo-elements: styling specific information in a chosen element
- Pseudo-classes: styling an element based on the state it is in
For the moment, we are avoiding the subject of what to do when there is more than one rule that applies to a particular element.
Glimpse of the future
We will discuss handling multiple applicable rules in the upcoming module on cascading.