Two of the most confusing terms of 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 are not possible with DOM and pseudo-classes help to select any DOM element in a particular state.
The difference in Syntax:
The double-colon replaced the single-colon notation for pseudo-elements in CSS3. 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 is something that can’t be defined in the DOM itself because of its user interaction-based selector. Pseudo-classes are mostly used when it is difficult 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 that has an href attribute and isn't 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 by clicking on 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 radio, checkbox, or option element that is 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 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, once 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 creates 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 - Is represents the user-selected text or element.
Setting CSS pseudo-class CSS pseudo-elements rules from JavaScript:
Since all the pseudos don't exist in the DOM tree, Apart from input form fields, most pseudos can't be accessible from javascript directly. There are ways to fix the problem by overriding pseudo rules using dynamic style tags using Javascript. jQuery provides a variety of js 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-element and pseudo-class. A pseudo-element is a fake element It does not exist within DOM Tree. Pseudo-classes are like fake classes that are applied to elements under a certain state.
When you start your new project, You can style your form without using any additional element to the DOM tree. Pseudo-class will do most of the tricks for you by giving you an additional selector and help you reduce the excess of classes in your markup and gives you more flexible and maintainable code. Pseudo-elements will allow you to add an additional element or select non-DOM elements created by CSS.
