When building websites that are interactive and visually engaging, one of the most overlooked yet effective feature in CSS is the use of pseudo class in CSS. It doesn’t matter if you want to highlight a button on hover, style a visited link, or apply a special styling to a focused input field, pseudo classes CSS can do all this and more without any additional HTML.
In this guide, we’re going to talk about pseudo-class CSS from the basics, to its more advanced use, and provide example usages as well as best practices to follow.
What is CSS?
CSS refers to Cascading Style Sheets, a styles language used to signify the style or look and format of a web page. While HTML provides structure to your content, CSS dictates its appearance; colors, layouts, fonts, spacing, animations, etc.
Key Features of CSS:
- Separation of concerns – separate design (CSS) from content (HTML).
- Reusable styles – use one rule to style multiple elements.
- Responsive design – change your layouts to fit mobile device, tablet, and desktops.
- Interactivity – selectors, pseudo classes, and animations increase experience.
Example:
h1 {
color: blue;
text-align: center;
}
This makes all headings blue and centers the text.
With the fundamental principles of CSS established, we now want to explore one of the powerful features available – pseudo class in CSS.
What is a Pseudo Class in CSS?
A pseudo class in CSS is a keyword added to a selector that defines a special state of the selected element. A pseudo class can alter the styling of an element in a given condition, e.g., the user is hovering, it’s the first child, it’s disabled, etc. It means that you can style the element in a special condition without adding classes to your HTML.
Example:
button:hover
{
background-color: #007bff; color: white;
}
Here, the :hover pseudo class applies a new style only when the user hovers over the button.
Syntax of CSS Pseudo Classes
The general syntax is:
selector:pseudo-class
{
property: value;
}
For example:
a:visited
{
color: purple;
}
Why Use Pseudo Classes in CSS?
CSS with pseudo classes has many benefits:
- Clean HTML – No need to add additional class attributes for styling states.
- Enhanced User Experience – Style the interactive states such as hover, focus, and active.
- Responsive Design – Change styles based on user interaction or the position of an element.
- Help with accessibility – Lets users visually identify which elements are active or selected.
Types of Pseudo Classes in CSS
1. Dynamic Pseudo Classes
These respond to user interactions.
- :hover – Styles an element when the mouse hovers over it.
a:hover
{
color: red;
}
- :active – Styles an element when it is being clicked.
button:active
{
transform: scale(0.98);
}
- :focus – Styles an element when it’s selected or focused (e.g., in a form).
input:focus
{
border-color: blue;
}
2. Link Pseudo Classes
Specially for hyperlinks.
- :link – Styles an unvisited link.
a:link
{
color: blue;
}
- :visited – Styles a visited link.
a:visited
{
color: purple;
}
3. Form Pseudo Classes
These target different input states.
- :enabled – Styles an active input field.
input:enabled
{
background: white;
}
- :disabled – Styles a disabled input field.
input:disabled
{
background: #ccc;
}
- :checked – Styles a selected checkbox or radio button.
input:checked
{
outline: 2px solid green;
}
- :required – Styles required fields in a form.
input:required
{
border: 2px solid red;
}
4. Structural Pseudo Classes
These target elements based on their position in the DOM.
- :first-child
li:first-child
{
font-weight: bold;
}
- :last-child
li:last-child
{
color: gray;
}
- :nth-child(odd)
tr:nth-child(odd)
{
background-color: #f9f9f9;
}
- :only-child
p:only-child
{
color: blue;
}
5. Negation Pseudo Class
The :not() pseudo class excludes elements that match a selector.
p:not(.highlight)
{
color: black;
}
CSS Pseudo Class vs Pseudo Element
A pseudo class defines a state (e.g., :hover), while a pseudo element defines a part of an element (e.g., ::before, ::after).
Example:
/* Pseudo class */button:hover
{
background: blue;
} /* Pseudo element */
button::after {
content: " →";
}
Practical Examples of Pseudo Classes CSS
Let’s apply them in real-world scenarios:
- Navigation Menu Hover Effect
nav a:hover
{
background-color: #333; color: white;
}
- Highlighting Required Form Fields
input:required
{
border: 2px solid red;
}
- Zebra Striping a Table
tr:nth-child(even) {
background-color: #eee;
}
Best Practices for Using Pseudo Class in CSS
- Pseudo classes can be chained to create more complex states (e.g. a:hover:active)
- For links, use the LVHA hierarchy order: :link, :visited, :hover, :active
- Minimize the use of pseudo classes over mobile – hover states generally do not translate well to a touchscreen.
- Test pseudo classes across browsers to confirm they behave consistently.
Common Mistakes and How to Avoid Them
Mistake: Using pseudo classes and without the right specificity.
Fix: Use more specific selectors or use with classes.
Mistake: Not accounting for accessibility.
Fix: Ensure focus styles are still visible for keyboard based users.
Conclusion – Pseudo Classes in CSS
CSS pseudo classes are a simple yet powerful feature that adds a level of interactivity, dynamism, and usability to web designs without the mess of HTML. With a strong understanding of pseudo classes CSS, you can improve your front-end skills and create compelling experiences for your users.
If you’re really committed to being a professional in this space then understanding pseudo classes is one step of your journey. You might think about taking a frontend development course that covers HTML, CSS, JavaScript, and modern frameworks for a deeper understanding, and to plan on designing responsive, accessible, and attractive websites.
Quick FAQ’s
Q1: What’s the difference between pseudo class CSS and pseudo element?
A: Pseudo class is a state; pseudo element is a part of an element.
Q2: Can you chain multiple pseudo classes?
A: Yes, like a:hover:active.
Q3: Are pseudo classes supported in all browsers?
A: Most are decently supported, but make sure to check compatibility for newer ones.
