After you’ve mastered working with custom class, tag redefines, and ID styles in Cascading Style Sheets (CSS), you can step into the big leagues of compound styles. To understand how to work with compound styles, you must first have an understanding of HTML/CSS document trees, which define the relationships between objects within the document.
Just as humans have a family tree, your document and the objects within it can be defined by their relationships. This means you can identify the objects in your documents by their relationship to other objects. Every object can have ancestors, descendants, parents, children, and siblings.
For instance, the footer (bottom section) of a web page might include an unordered list of linked text. In this scenario, the parent container for the list is the footer, and the individual list items are siblings. Furthermore, if the footer is the child of the tag, the placement of this list within the document tree might look like this:
<body><footer><ul><li></li></ul></footer></body>
Compound styles are where a lot of the fancy footwork in CSS happens because selectors can be written in a variety of ways, including the following most popular usages:
Pseudo-classes: A pseudo-class as a special type of selector that lets you format items that are not in the document tree, such as hyperlink states, first and last child elements, and active elements. In other words, they’re not used for actual elements but rather conceptual elements, like every other row in a table. The most common usage is to create styles for hyperlinks.
Multiple selectors: Used to apply the same styles to several tags, the advanced selector is divided by commas, either with or without spaces, as in body,th,td {…} or body, th, td {…}.
Descendant selectors: Also called advanced combinators, you can use these selectors to style very specific elements on your page, such as descendants of another element in the document tree.
For instance, rather than create a tag redefine style for all list items in your site, you can target all list items within an ordered list in the sidebar of your layout with a selector named #sidebar ol li. These styles can be written to include any combination of tags, tag redefines, ID styles, and custom class names.