Home » CSS » Pseudo Classes And Pseudo Elements In CSS

Two of the most confusing terms for the CSS language are pseudo-elements and pseudo-classes. The pseudo-classes represent virtual CSS classes and pseudo-elements represent virtual HTML elements.

The difference between pseudo-elements and pseudo-classes is: pseudo-elements help to select a part of real DOM elements, which is not possible with DOM, and pseudo-classes help to select any DOM element in a particular state.

The difference in Syntax:

In CSS3, the double colon replaced the single-colon notation for pseudo-elements. This was an attempt from W3C to distinguish between pseudo-classes and pseudo-elements.

selector:pseudo-class {
property: value;
}

selector::pseudo-element {
property: value;
}

What Are Pseudo-Classes?

As discussed above, pseudo-classes help to select elements in a state. The state can’t be defined in the DOM as such because of its user interaction-based selector. Pseudo-classes are often used when it is tough to select a state of an element with simple selectors based on id, class and type attributes.

Behaviour: pseudo-classes are available for a selection of any element. It can be combined with any standard CSS selector.

Let’s divide the pseudo-classes into groups depending on their behaviour.

Dynamic pseudo-classes

• :link – It represents an element that has not yet been visited. It selects every anchor or area tag with an href attribute that hasn’t been visited yet.
• :visited – It selects links that the user has already visited.
• :any-link – It selects both non-visited and visited links.
• :local-link – It selects links whose absolute URL is the same as the target URL in the address bar.
• :hover – It selects an element when the user interacts with it by pointing the mouse cursor over it.
• :active – It selects elements in the active state. This happens when the mouse button is clicked on an element.
• :focus – It selects an element that has received focus by mouse click or with Tab key.
• :scope – It selects elements that are a reference point for selectors to match against.

UI States-based pseudo-classes

• :enabled – It represents any enabled element. An element is enabled if it can be activated, selected, clicked on, typed into, or accept focus.
• :disabled – It represents any disabled element. An element is disabled if it can’t be activated, selected, clicked on, typed into, or accept focus.
• :checked – It represents a radio, checkbox, or option element – currently checked or toggled to an on state.
• :read-only – It represents an element that cannot be changed by the user.
• :read-write – It represents any element that is user-editable.
• :placeholder-shown – It represents an input element that is displaying placeholder text.
• :default – It represents one or more UI elements that are the default among a set of elements.
• :checked – It represents elements such as checkboxes and radio buttons when toggled on.
• :indeterminate – It represents elements when UI elements are in an indeterminate state.
• :blank – It represents an empty user-input element, containing an empty string or other null input.
• :valid – It represents elements with valid contents. This is applicable for different input types.
• :invalid – It represents elements with invalid contents.
• :in-range – It represents elements within the allowed range.
• :out-of-range – It represents elements with a range value outside the allowed range.
• :required – It matches when a form element is required.
• :optional – It matches when a form element is optional.
• :user-invalid – It represents an element with incorrect input after the user has interacted with it.

Structural Selection based pseudo-classes

• :first-child – It represents the first element among a set of siblings.
• :nth-child(n) – It matches elements based on their position in a set of siblings.
• :nth-last-child(n) -It matches elements based on their position among a set of siblings, counting from the end.
• :nth-of-type(n) – It matches elements of a given type (tag name), based on their position among a set of siblings.
• :nth-last-of-type(n) – It matches elements of a given type, based on their position among a set of siblings, counting from the end.
• :last-child – It represents the last element among a set of sibling elements.
• :first-of-type -It represents the first element of its type among a set of sibling elements.
• :last-of-type – It represents the last element of its type among a set of sibling elements.
• :only-child – It represents an element without any siblings.
• :only-of-type – It represents an element that has no siblings of the same type.
• :root – It matches the root element of a tree representing the document.
• :empty – It represents any element that has no children or text.

Mics pseudo-classes

• :not(x) – It represents elements that do not match a list of selectors. It is known as the negation pseudo-class.
• :target – It represents a unique element with an id matching the URL’s fragment.
• :target-within – It selects elements whose targets are the target of the document URL, but also elements that have a descendant which is the target of the document URL.
• :lang() – It matches elements based on the language they are determined to be in.

There are many other pseud-classes. The list keeps updating.

What Are Pseudo-elements?

They address sub-parts of elements. They allow logical elements to be defined which are not actually in the document element tree. The pseudo-elements create new virtual elements using CSS.

Behaviour: They can be used only with external and document-level context. Inline styles can’t use pseudo-elements.

• ::before – It creates an inline pseudo-element that is the first child of the selected element.
• ::after – It creates an inline pseudo-element that is the last child of the selected element.
• ::first-letter – It applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content.
• ::first-line – It applies styles to the first line of a block-level element.
• ::marker – It selects the marker of the list items.
• ::selection – It represents the user-selected text or element.

Setting CSS pseudo-class and CSS pseudo-elements rules from JavaScript:

Since not all the pseudos exist in the DOM tree, apart from input form fields, most pseudos can’t be accessed from JavaScript directly. There are ways to fix the problem with overriding pseudo rules using dynamic style tags using JavaScript. jQuery provides a variety of JavaScript selectors to select objects in a particular state.

// using JS
element.matches(':active');
// jQuery
$(element).is(':active');

What Next?

If you have read the entire article, you should be very clear about the difference between pseudo-elements and pseudo-classes. A pseudo-element is a virtual element. It does not exist within the DOM Tree. Pseudo-classes are like virtual classes that are applied to elements under a certain state.

When you start your new project, you can style your form without using additional elements in the DOM tree. Pseudo-class will do most of the tricks, such as giving you an additional selector, helping to reduce the excess of classes in your markup, and delivering more flexible and maintainable code. Pseudo-elements will allow you to add an element or select non-DOM elements created by CSS.