In contrast to standard CSS selectors, pseudo selectors allow you to alter the appearance of a state or fragment of an element:
- Pseudo-class selectors describe the state of an element, such as
:empty. On a style sheet, they are preceded by a single colon.
- 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
::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-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.
Photograph by Daniel Shawyer, licensed under Creative Commons