Pseudo-Classes vs. Pseudo-Elements

Mar032014

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.

:left

:link

: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

:visited

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

1

2

3

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