Beginning CSS: Cascading Style Sheets for Web Design, Third Edition

14

Advanced Selectors

WHAT YOU WILL LEARN IN THIS CHAPTER:

• How to use direct child selectors
• How to use next sibling selectors
• How to use attribute selectors
• How to use pseudo-elements
• How to use structural pseudo-classes

In Chapter 3, I covered the basic selectors in CSS. There I discussed the most common and widely supported selectors, class and ID selectors, which target elements based on their class and ID attributes. I also covered the universal selector, which targets everything, and descendant selectors, which target elements that are ancestors of other elements. In addition, I covered a small range of pseudo-classes, :link, :visited, :focus, :hover, and :active, used for styling links and other interactive elements.

In this chapter I show you a range of advanced selectors that can be used to more precisely target elements of a web page, a greater range of pseudo-classes, and I introduce pseudo-elements.

DIRECT CHILD SELECTORS

Direct child selectors operate much like descendant selectors in that they also rely on an ancestral relationship to decide where to apply style. Descendant selectors, however, are more ambiguous because they apply to any descendant of an element; the descendant can be a grandchild or a great-grandchild, or a great-great-grandchild, and so on. Direct child selectors apply only to immediate children of the element. This is achieved by introducing a new syntax for the selector:

body > .intro {
    font-weight: bold;
}

Like descendant selectors, direct ...