What are CSS pseudo-classes?
CSS pseudo-classes are special keywords that let you apply styles to elements based on their state or position in the document—without needing to add extra classes or IDs in your HTML.
For example, when a user hovers their mouse over a button, you might want it to change color. Instead of using JavaScript to detect that interaction, CSS pseudo-classes let you do it with just a few lines of CSS.
These selectors start with a single colon (:) and target elements dynamically based on conditions like user interaction, form validation, or document structure. They can be combined with additional pseudo-classes or other selectors to give you granular control over which element(s) you want to select.
CSS pseudo-class example
In this example, the :hover pseudo-class applies a new background and text color when the user hovers over a button.
button:hover {
background-color: #007bff;
color: white;
}Common CSS pseudo-classes
There are dozens of pseudo-classes available in CSS, but you won’t need to memorize them all to create most websites. Here are a few of the most common pseudo-classes, from our experience:
Hover
The :hover pseudo-class targets an element when a user hovers their pointer over it. This is great for enhancing interactivity, especially on links and buttons.
a:hover {
text-decoration: underline;
}Required
The :required pseudo-class selects input fields that have the required attribute. You can use it to visually indicate that a field must be filled out before submitting a form.
input:required {
border-color: red;
}Empty
The :empty pseudo-class targets elements that have no children—no text nodes, no elements, nothing. This can be useful for debugging or conditionally styling placeholder containers. I personally use this when filling in a new website’s content for the first time to ensure I don’t miss anything.
div:empty {
background-color: #f8d7da;
}nth-child()
The :nth-child() pseudo-class targets elements based on their order in the DOM. It accepts values like numbers (:nth-child(3)), keywords like odd or even, or formulas like 2n+1.
li:nth-child(odd) {
background-color: #f2f2f2;
}Visited
The :visited pseudo-class applies styles to links that the user has already clicked. Most modern browsers limit what styles can be changed here for privacy reasons (ie color, background-color, border-color, etc.). Furthermore, this pseudo-class can only be applied to <a> and <area> elements that have an href attribute.
a:visited {
color: purple;
}Video Tutorial
We have a video tutorial explaining pseudo-classes and pseudo-elements as well as the difference between the two that you can check out on TikTok.
FAQ
What is the difference between a pseudo-element and a pseudo-class?
A pseudo-class is defined by a single colon (:) and is used to target and style elements in a specific state (ie when a mouse is hovering over top). Meanwhile a pseudo-element is defined by a double colon (::) and lets you target and style specific parts of a selected element, such as the first line of a paragraph. In some cases pseudo-elements can be used to generate content using the content CSS property.
Examples:
/* Pseudo-Class: Makes links with the class 'featured-link' red when hovered over */
a.featured-link:hover {
color: red;
}
/* Pseudo-Element: Bolds the text in the first line of paragraphs */
p::first-line {
font-weight: bold;
}What is : in CSS?
The single colon (:) is used to define pseudo-classes, like :hover, :focus, or :first-child. It tells the browser to apply styles when a specific condition is met for an element.
What is :: in CSS?
The double colon (::) is used for pseudo-elements, which let you style specific parts of an element or inject content (like ::before, ::after, or ::first-letter).
Can I use multiple pseudo-classes on the same element?
Yes! You can chain pseudo-classes together for more complex selection logic without the use of JavaScript.
For example, The selector below targets a button that is both hovered and focused.
button:hover:focus {
outline: 2px solid orange;
}Do all browsers support CSS pseudo-classes?
Most modern browsers support the majority of pseudo-classes. However, some newer or more complex pseudo-classes like :is() or :has()—may have limited support in older versions. Always check Can I Use (https://caniuse.com/) if you're unsure about compatibility.
And remember that there are a lot of ways to workaround browser limitations in CSS, meaning you can typically use an “advanced” feature for people using compatible browsers, then fall back on an alternative for those on incompatible browsers.
Want to learn more CSS?
Learn to code using Scrimba with their interactive follow-along code editor.
Join their exclusive discord communities and network to find your first job!
Use our affiliate link for a 20% discount!!
- Click the link to take you to the Scrimba site
- A pop-up should appear on your screen with the discount amount and instructions on how to claim it
- Discount is for new accounts only
We receive a monetary kickback if you use our affiliate link and make a purchase.
