Photograph of a fake red flower

In contrast to standard CSS selectors, pseudo selectors allow you to alter the appearance of a state or fragment of an element:

  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-selectors like :hover, ::before and ::after 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.

In addition, many of these pseudo-selectors have specialized uses: ::first-letter and ::first-line are strongly associated with typography, for example, while ::backdrop is currently exclusive to the FullScreen API, so you’ll tend to find their discussion in their respective contexts.

Pseudo-Element Selectors

  1. Introduction
  2. ::first-letter
  3. ::first-line
  4. ::selection
  5. ::backdrop

Pseudo-Element Selectors

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

Photograph by Daniel Shawyer, licensed under Creative Commons