CSS Selectors

Introduction

A rule is only useful if it reaches the right elements. Selectors are how you aim. Remember the class and id attributes from HTML? This is where they pay off.

Element selectors

Write just the tag name to style every element of that type.

Class selectors

A class selector starts with a dot. It styles every element that has that class.

Classes are the workhorse of CSS. Most of your selectors will be classes.

Id selectors

An id selector starts with a hash. It styles the one element with that id.

Groups and descendants

Separate selectors with a comma to give them the same style. Separate them with a space to select elements inside another.

Pseudo-classes: states

A pseudo-class starts with a colon and picks an element in a particular state. :hover matches while the mouse is over it.

Try it yourself

Add a class called big to one of the paragraphs and write a rule that makes .big text 28px. Then write a rule for li:hover that changes the background.

Summary

• p selects by tag, .name by class, #name by id.
• A comma groups selectors. A space selects descendants.
• :hover styles an element while the mouse is over it.