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.
- 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-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.
- :first-of-type, :first-child & :nth-of-type
- 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.