In contrast to standard CSS selectors, pseudo selectors allow you to alter the appearance of a state or fragment of an element. They are divided into pseudo class selectors and pseudo element selectors.

1. Pseudo-class selectors describe the state of an element, such as :hover or :empty. On a style sheet, they are preceded by a single colon.
2. As their name suggests pseudo-element selectors control the presentation of a portion of content, such as the first line or letter of a paragraph. Formally, they are preceded by a double colon (::), although a single colon will work in most cases.

Pseudo selectors are distinguished by the fact that they must be written in an embedded, linked or scoped style sheet: they cannot be written inline.

This list is not yet exhaustive: pseudo-class selectors such as ::hover are used extensively in tutorials on this site, but do not yet have their own individual articles. As soon as that changes, they will be added here.

1. Introduction
2. :visited
3. :not
4. :empty
5. :only-child
6. :only-of-type
7. :first-of-type, :first-child & :nth-of-type
8. last-of-type & last-child

Photograph by Daniel Shawyer, licensed under Creative Commons

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.