Chapter 1

Advanced Selectors

Web designers commonly get into the habit of using only a very small collection of basic CSS selectors, most notably the id, class, and descendant selectors, because that's all they need…or so they think.

It's true that you can accomplish almost everything with the class selector, but why compromise your nice, clean markup by adding unnecessary classes when you can choose from a range of more practical and efficient alternatives?

CSS3 has brought with it a whole host of such alternatives, some of which are simply wonderfully convenient and others that can make you excitedly ponder all the possibilities! What? CSS3 selectors are exciting!

In this chapter, you will learn about the different types of selectors, from sibling combinators to nth-child expressions. With the help of practical examples, you'll be able to understand precisely what they do and how you can put them to use. I'll finish the chapter by combining many of the various selector types that will be described between now and then to create some truly advanced CSS selectors.

Child and Sibling Selectors

The child and sibling combinators are actually among the more mature features in the Selectors module; however, despite this they've had trouble in finding the same kind of mainstream attention as id and class selectors enjoy. It's about time they got a little nudge into the spotlight.

Child Combinator

Generally speaking, the cascade aspect of CSS is awesome, but sometimes you just don't ...

Get CSS3 Pushing the Limits now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.