In CSS Pseudo-classes & pseudo-elements are the keywords added to a selector that allows you to style an element based on its state or specific part of an element.
For Example: You hover on the anchor element, add different styles to see if the link is visited or not, or you can use it to target the first letter of the word in an article. And lot more can be achieved using these keywords.
They are widely supported across major browsers and have been part of the CSS since its early versions.
What is a Pseudo Class?
A pseudo-class is like creating a rule that applies to an element based on a certain condition or state.
These are used when an element’s state changes because of how the user interacts with it. For Example:
- When someone hovers over a button (
:hover) - When a form field is selected for typing (
:focus) - When an element is the first or last child in a list
let’s understand with an example:
a:hover { color: blue; } a:visited { color: navyblue; }This example shows two different states of the anchor elements. When a user hover-over an anchor element, the text color changes to blue but shows a different default color if the user has already visited by clicking on that anchor element.
Let’s take another example this time using :nth-child(even/odd) pseudo-class:
They can be represented by a single colon : at the beginning of the keyword name. Here is the list of most common used:
:hover– When user hover-over (place mouse over an element):focus– When a user selects a field (like a text box in a form):nth-child(n)– When you want to style a specific item in a list or grid.:disabled– When an element (like a button) is disabled and can’t be clicked.
You’ll find the full list of CSS Pseudo-classes at github gist. You can also check the MDN docs for reading detailed docs.
What is Pseudo-Elements?
Pseudo-elements are different from pseudo-classes because they target specific parts of an element, not the whole thing. It lets you style or insert things into specific parts of an element that you wouldn’t normally have direct access to.
Example of Pseudo-Elements:
p::first-letter { /* Accessing the first-letter of paragraph and adding style. */ font-size: 2em; font-weight: bold; color: red; }
This example shows how to access the first letter of a paragraph and apply our styles.
You may have noticed one thing, which is the use of a double :: colon sign used for pseudo-elements. This is the actual representation of syntax for both.
I’ve found a good resource that lists almost all css pseudo-elements at github. Learn more about Pseudo-Elements at MDN docs.
Why Pseudo-Classes & Pseudo-Elements?
These tools let us do some pretty cool things without needing to write a bunch of extra HTML or JavaScript. They give more control over your design and make your website more interactive and dynamic with just a few lines of Code.
Here is how you can differentiate between both of them and help you choose the right tool:
- Pseudo-classes help create interactions like hover effects, focused input fields, or styling based on a list position.
- Pseudo-elements allow one to style specific parts of an element or add decorative content like icons, or symbols before or after an element.
Browser Support
Pseudo-Elements & Pseudo-Classes are supported in all major browsers, but as the web grows new keywords are added which does not provide default support for them. Thus, we need to use browser prefixes to fix these issues.
For Example, :not() is not supported in older browsers, so they behave differently. You should always check which property is supported at what version of the browser using the online tool Caniuse.com.
Here is an example of :not() pseudo-class in Caniuse.com:
Conclusion
In CSS both pseudo classes & elements act as your secret weapons for designing websites that feel alive and beautiful without adding a ton of extra code. They help you style elements based on interaction or state(pseudo-classes) or target specific parts of an element (pseudo-elements).