19 Learning Advanced CSS Selectors
This chapter covers
- Learning the powerful ID and universal selectors
- Leveling your style game with the descendant, child, and sibling selectors
- Targeting your styles by combining two or more selectors
- Becoming a style master by understanding CSS inheritance, cascading, and specificity
On the surface, CSS seems like a simple topic: you apply values to some properties, combine them into a rule, and then apply that rule to a page element. Repeat a few more times, and voilà: your page is beautiful. But the apparent simplicity of CSS is only skin deep. Underneath the straightforward implementation of declarations and rules are obscure caves of complexity and unfathomed depths of dynamism. This chapter serves as an introduction to this hidden world, which is home to some of the most powerful and practical CSS concepts.
Working with ID Selectors
In Chapter 7, I introduced you to CSS selectors, which enable you to specify the page object you want to style:
selector {
property1: value1;
property2: value2;
...
}
So far, you've learned that the selector part of this CSS rule can be the name of an HTML tag (a type selector) or the name of a CSS class (a class selector). A large collection of CSS selectors exists, however. Many of these selectors are rather obscure, but the more common ones are powerful tools indeed. The lessons in this chapter introduce five of these selectors, beginning with the ID selector.