C H A P T E R 3
(^)
CSS Selectors and Inheritance
This chapter presents design patterns that select elements for styling.
Because selector design patterns are simple, I discuss selector design patterns in groups rather than
one at a time. This makes it easy to compare and contrast related forms of selectors. Thus, even though
this chapter has only six examples, it contains thirteen different design patterns.
Inheritance is included in this chapter because it is simply a built-in way to select descendant
elements. Inheritance is very closely related to the descendant selector. The Visual Inheritance pattern is
included in this chapter because it is a form of inheritance that is visual by nature.Chapter Outline
- Type, Class, and ID Selectors shows how to select elements by tag, class, and ID.
- Position and Group Selectors shows how to select elements by how they are
nested in the document. It also shows how to apply multiple selectors to the same
set of rules. - Attribute Selectors shows how to select elements based on their attributes.
- Pseudo-element Selectors shows how to select the first letter or first line of
terminal block elements. - Pseudo-class Selectors shows how to style a hyperlink when it is unvisited,
visited, being hovered over by the mouse, or has the focus because the user
tabbed to it or clicked it with the mouse. - Subclass Selector shows how to apply multiple styles to the same element using
classes and subclasses. - Inheritance shows how to style elements through rules assigned to their
ancestors. - Visual Inheritance shows how elements visually inherit their parent’s
background.