Pseudo-Classes vs. Pseudo-Elements
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