For the longest time the only pseudo selectors that we could use were :link, :hover, :visited and :active and they could only be applied to a tags. As long as we were intending to support ie6 that was all we could do. As we've adopted philosophies like progressive enhancement, graceful degradation, or dropped support for ie6, 7, and 8 we have seen the landscape of CSS selectors change dramatically.

As I have began using more pseudo selectors I’ve found myself using the terms pseudo-classes and pseudo-elements interchangeably, which I’ve known to be wrong. In order to correct this I’ve decided to explore the differences between the two.

Pseudo-Classes

A pseudo-class is a keyword that can be added to a selector based on a special state of the selected item. They are unique in that they can be actual elements in the DOM or they can be based on states that are triggered when certain actions occur such as :hover, :visited, :checked, etc.

How They Are Used

li {
    border-top: solid 1px gray;
}

li:first-child {
    border: none;
}

:active

Matches when an element is being activated by the user — Learn More

:checked

Represents any radio, checkbox, or option in a select element that is checked or toggled to an on state — Learn More

:default

Represents any user interface element that is the default among a group of similar elements — Learn More

:dir()

Matches elements based on the directionality of the text contained in it — Learn More

:disabled

Represents any disabled element. An element is disabled if it can’t be activated (e.g. selected, clicked on or accept text input) or accept focus — Learn More

:empty

Represents any element that has no children at all. Only element nodes and text (including whitespace) are considered — Learn More

:enabled

Represents any enabled element. An element is enabled if it can be activated (e.g. selected, clicked on or accept text input) or accept focus — Learn More

:first

Describes the styling of the first page when printing a document — Learn More

:first-child

Represents any element that is the first child element of its parent — Learn More

:first-of-type

Represents the first sibling of its type in the list of children of its parent element — Learn More

:fullscreen

Applies to any element that’s currently being displayed in full-screen mode — Learn More

:focus

Applied when a element has received focus, either from the user selecting it with the use of a keyboard or by activating with the mouse (e.g. a form input) — Learn More

:hover

Matches when the user designates an element with a pointing device, but does not necessarily activate it — Learn More

:indeterminate

Represents any input type=“checkbox” element whose indeterminate DOM property is set to true by JavaScript — Learn More

:invalid

Represents any input or form element whose content fails to validate according to the input’s type setting — Learn More

:lang()

Matches elements based on the language the element is determined to be in — Learn More

:last-child

Represents any element that is the last child element of its parent — Learn More

:last-of-type

Represents the last sibling of its type in the list of children of its parent element — Learn More

:left

Matches any left page when printing a page. It allows to describe the styling of left-side pages — Learn More

:link

Lets you select links inside elements — Learn More

:not()

A functional notation taking a simple selector as an argument. It matches an element that is not represented by the argument. Must not contain another negation selector, or any pseudo-elements — Learn More

:nth-child

Matches an element that has siblings before it in the document tree, for a given positive or zero value, and has a parent element — Learn More

:nth-last-child

Matches elements that have siblings after them in the document tree, for a given positive or zero value, and have a parent element — Learn More

:nth-last-of-type

Matches the last element that has siblings with the same element name after it in the document tree, for a given positive or zero value, and has a parent element — Learn More

:nth-of-type

Matches an element that has siblings with the same element name before it in the document tree, for a given positive or zero value, and has a parent element — Learn More

:only-child

Represents any element which is the only child of its parent — Learn More

:only-of-type

Represents any element that has no siblings of the given type — Learn More

:optional

Represents any input element that does not have the required attribute set on it — Learn More

:read-write

Matches when an element is editable by user like text input element — Learn More

:required

Represents any input element that has the required attribute set on it — Learn More

:right

Matches any right page when printing a page. It allows to describe the styling of right-side page — Learn More

:root

Matches the root element of a tree representing the document — Learn More

:scope

Matches the elements that are a reference point for selectors to match against — Learn More

:target

Represents the unique element, if any, with an id matching the fragment identifier of the URI of the document — Learn More

:valid

Represents any input element whose content validates correctly according to the input’s type setting — Learn More

:visited

Lets you select only links that have been visited — Learn More

Pseudo-Elements

Like a pseudo-class, a pseudo-element is a keyword that can be added to a selector. Where they differ is that a pseudo-class does not apply to a special state but rather a portion of html that doesn’t exist in the DOM like :before or is not contained within a tag like :first-letter.

Another difference is that as part of the CSS3 spec, in an attempt to differentiate pseudo-classes from pseudo selectors, use of double colons(::) was allowed. Most browsers support both single and double colons for pseudo-elements.

How They Are Used

li::after {
    clear: both;
}

::after

Matches a virtual last child of the selected element. Typically used to add cosmetic content to an element, by using the content CSS property — Learn More

::before

Creates a pseudo-element that is the first child of the element matched. Typically used to add cosmetic content to an element, by using the content CSS property — Learn More

::first-letter

Selects the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line — Learn More

::first-line

Applies styles only to the first line of an element — Learn More

::selection

Applies rules to the portion of a document that has been highlighted (e.g., selected with the mouse or another pointing device) by the user — Learn More

Sources

• https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-classes

• https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

• http://www.d.umn.edu/~lcarlson/csswork/selectors/pseudo_dif.html