Pseudo-Selectors

CSS includes a number of quasi-operations for things called pseudo-selectors. Pseudo-selectors don’t select elements per-say, but rather certin parts of elements, or elements in certain contexts.

Pseudo-elements allow for the selection of content, as if it were a separate element, without having to mark it up as such in the HTML.

There are two main types of pseudo-selectors:

pseudo-elements (selector::keyword)
pseudo-classes (selector:keyword)

CSS

/* Pseudo-element selector example: */
p::first-letter {}

/* Pseudo-class selector example: */
p:hover {}

NOTE: Pseudo-elements are preceded by double colons, as opposed to a single colon like with pseudo-classes.

You encounter pseudo-selections daily, particularly with links. If a link changes color when you interact with it, its states (like :hover) have been set in the site’s styling.