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.