Smashing CSS: Professional Techniques for Modern Layout

Chapter 2. SELECTORS

IN A VERY real sense, selectors are the heart of CSS. Without them, we'd have no way of assigning styles to elements short of embedding them into the attributes of every element, and that would be awful. By granting us the power to select whole types or families of elements to be styled, we can accomplish a great deal of styling with just a few lines of CSS.

In this chapter, we delve into the details of using selectors smartly as well as survey a broad sweep of widely supported and used selector types.

PSEUDO WHAT?

There are two types of pseudo-thingies in CSS: pseudo-classes and pseudo-elements. The CSS2.1 pseudo-classes are:

• :link: An unvisited link

• :visited: A visited link

• :hover: A hovered element

• :focus: A focused element

• :active: An active element (such as a link while it's being clicked)

• :first-child: An element that is the first child of another element

• :lang(): An element based on the value of its lang attribute

The CSS2.1 pseudo-elements are:

• ::first-line

• ::first-letter

• ::before

• ::after

So what's the difference? It comes down to the way the pseudo-things affect the document. Pseudo-classes act kind of like they add classes to the document. Pseudo-elements have effects as though they caused elements to be inserted into the document.

Take ::first-letter as an example. Suppose you want to make the first letter of every h1 twice as big as the rest (see Figure 2-1). Easy:

h1::first-letter {font-size: 250%;}

This happens as though the CSS and markup were changed to be:

h1 first-letter ...