XQA
Back to Web Development
2026-04-035 min read

Pseudo-classes (Web Development)

Learn Pseudo-classes (Web Development) step by step with clear examples and exercises.

Why This Matters

Understanding and mastering CSS pseudo-classes is crucial for creating dynamic and interactive web pages that provide an enhanced user experience. Pseudo-classes enable developers to target specific states of HTML elements, such as hover effects, active links, or focused form fields, without relying on JavaScript. In interviews, exams, or real-world projects, demonstrating proficiency in CSS pseudo-classes sets you apart from other web developers.

Prerequisites

Before diving into CSS pseudo-classes, ensure you have a solid understanding of the following:

  1. HTML basics (tags, attributes)
  2. CSS syntax (selectors, properties, values)
  3. Box model (margin, padding, borders)
  4. CSS selectors (type, class, id)
  5. Basic CSS animations and transitions
  6. Flexbox and Grid layout systems
  7. Media queries for responsive design

Core Concept

CSS pseudo-classes are special selectors that let you target specific states of HTML elements without using JavaScript. They are denoted by a colon (:) after the element name in the selector. Here are some common pseudo-classes:

  1. :link - Selects unvisited links
  2. :visited - Selects visited links
  3. :hover - Applies styles when an element is being hovered over
  4. :active - Styles applied while the user is actively interacting with an element (e.g., clicking a button)
  5. :focus - Styles for elements that have focus (usually input fields or links on keyboard navigation)
  6. :first-child - Selects the first child of a specified parent element
  7. :last-child - Selects the last child of a specified parent element
  8. :nth-child(n) - Selects the nth child of a specified parent element (where n is a number or an even/odd keyword)
  9. :not() - Selects elements that do not match a given selector
  10. :checked - Styles for checked form controls (e.g., radio buttons and checkboxes)
  11. :disabled - Styles for disabled form controls or links
  12. :required - Styles for required form fields
  13. :invalid - Styles for invalid form fields
  14. :valid - Styles for valid form fields

Example

<!DOCTYPE html>
<html lang="en">
<head>
<style>
a:link { color: blue; } /* unvisited links */
a:visited { color: purple; } /* visited links */
a:hover { color: red; } /* on hover */
input:focus { border-color: green; } /* focused input fields */
input[type="checkbox"]:checked + label { background-color: green; }
</style>
</head>
<body>
<a href="https://www.example.com">Unvisited Link</a>
<a href="https://www.visitedlink.com">Visited Link</a>
<input type="checkbox" id="exampleCheck1">
<label for="exampleCheck1">Example Checkbox</label>
<input type="text" placeholder="Focus me!" />
</body>
</html>

In this example, we have applied different colors to unvisited and visited links using the :link and :visited pseudo-classes. Additionally, a hover effect is added with :hover, and a focus style for an input field is set using :focus. We also demonstrate how to style a checkbox by targeting the label element that follows a checked checkbox using the + combinator.

Worked Example

Let's create a simple navigation bar that changes its active link color when hovering or clicking on the links, and adds a hover effect for the menu icon.

<!DOCTYPE html>
<html lang="en">
<head>
<style>
nav { display: flex; align-items: center; }
nav > a { margin-right: 10px; }
nav > a:hover, nav .active { color: red; }
nav > a:hover > span, nav .menu.active > span { rotate(45deg); transform: translate(7px, -3px); }
nav > a:hover > i, nav .menu.active > i { rotate(-45deg); transform: translate(-7px, 3px); }
</style>
</head>
<body>
<nav>
<a href="#" class="menu">
<span></span>
<i class="fa-solid fa-bars"></i>
</a>
<div class="links">
<a href="#home" class="active">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</nav>
</body>
</html>

In this example, we have set the active link color to red using both :hover and a class named active. This simulates the active state for the navigation links. We also added a hover effect to the menu icon by targeting the span and i elements within the menu link using the descendant selector (>) and applying rotate and translate transforms.

Common Mistakes

  1. Forgetting to add the colon (:) after the element name in the selector.
  2. Using pseudo-classes without understanding their purpose or when they are applicable.
  3. Overusing pseudo-classes, leading to excessive CSS and potential performance issues.
  4. Not setting a default color for links using :link, causing all links to be purple by default (since :visited takes precedence over :link).
  5. Forgetting to remove the active class when navigating away from an active link, leading to inconsistent styles.
  6. Misusing the :hover pseudo-class on elements that are not interactive (e.g., images or static text).
  7. Not considering browser compatibility for certain pseudo-classes and their vendor prefixes.
  8. Incorrectly using the :not() selector by forgetting to include a valid selector inside the parentheses.
  9. Forgetting to account for user preferences, such as high contrast modes or color blindness, when applying styles with pseudo-classes.

Practice Questions

  1. Style a list of unordered list items so that the first item has a different background color and the last item has a border on all sides.
  2. Create a form with three input fields: two text inputs and one email input. Add a hover effect to the text inputs and focus styles to all input fields.
  3. Style a navigation bar where the active link is underlined, and the other links have a hover effect. Also, create a responsive menu that toggles on smaller screens.
  4. Create a dynamic accordion where each section can be expanded or collapsed by clicking on its header. Add a hover effect to the headers and focus styles to the content area when it is in focus.
  5. Implement a light/dark mode switcher that changes the background color, text color, and link colors based on the selected theme.

FAQ

How do I target specific elements within an HTML structure using pseudo-classes?

You can use :first-child, :last-child, or :nth-child(n) to select specific children of a parent element. For example, div > p:nth-child(3) will target the third paragraph within any div that contains only paragraphs as its direct child elements.

Can I use multiple pseudo-classes in one selector?

Yes! You can combine multiple pseudo-classes in a single selector by separating them with spaces. For example, a:hover:visited will apply the hover styles to visited links.

How do I remove a pseudo-class from an element using CSS?

To reset the styles of an element that has been targeted with a pseudo-class, simply target the same element without the pseudo-class in your CSS. For example, if you have a:hover { color: red; }, to reset the hover style for all links, use a { color: inherit; }.

How do I handle browser compatibility issues with pseudo-classes?

To ensure cross-browser compatibility, always include vendor prefixes (e.g., -webkit-, -moz-, -o-, -ms-) when using experimental or non-standard pseudo-classes. Additionally, consider using CSS preprocessors like Sass or Less that automatically handle vendor prefixes for you.

How do I test my CSS for browser compatibility?

Use browser compatibility testing tools such as CanIUse.com or BrowserStack to ensure your CSS works across various browsers and devices. These tools provide information about supported pseudo-classes, vendor prefixes, and other CSS features.

Pseudo-classes (Web Development) | Web Development | XQA Learn