ReviseAlgo Logo

Advanced CSS

Pseudo Classes

Master CSS Pseudo-classes, covering interactive states (:hover, :focus, :focus-visible), structural selectors (:nth-child), input validations, and LVHA ordering rules.

Last Updated: July 15, 2026 • 10 min read

1. Learning Objectives

In this lesson, you will master targeting elements based on their state or document structure. By the end of this topic, you will be able to:

  • Differentiate between standard selectors and pseudo-classes.
  • Apply interactive state overrides: :hover, :active, :focus, and :focus-visible.
  • Target elements based on their structural position using :nth-child() and :first-child.
  • Style form controls dynamically using validation states (like :invalid or :disabled).
  • Order interactive link states correctly using the **LVHA** pattern.

2. Overview

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the targeted elements. They allow you to style elements based on user interaction (like hovering or focusing), structural positions in the DOM tree, or form validation states.

3. Why This Topic Matters

Pseudo-classes make layouts interactive and structurally dynamic:

  • The Focus Visibility Trap: Removing focus outlines (e.g. outline: none) on interactive elements without defining accessible fallbacks prevents keyboard-only users from navigating your site. Using :focus-visible styles outline rings only when keyboard navigation is active.
  • Overridden Hover States: If you order link state selectors incorrectly (e.g. placing :hover before :visited), the hover effect will fail to apply once a link has been visited. You must follow the LVHA order: Link, Visited, Hover, Active.

4. Real-World Analogy

Think of pseudo-classes like **applying rules to store customers based on their actions or positions**:

  • Interactive state (:hover): Giving a coupon code only to shoppers who are actively viewing a product display (hover state).
  • Interactive state (:focus): An assistant answering questions for the customer who is actively standing at the checkout register (active focus state).
  • Structural state (:nth-child(2n)): Giving a discount prize to every second customer in line (even spots).
  • Validation state (:disabled): A shopper who has their credit card blocked (disabled account status) and cannot make purchases.

5. Core Concepts

Pseudo-classes are grouped by their functionality:

  • Interactive: React to user actions (e.g. :hover, :active, :focus, :focus-within).
  • Structural: Match elements based on their position in the DOM (e.g. :first-child, :last-child, :nth-child(n)).
  • Validation & Form States: Apply to inputs based on their state (e.g. :disabled, :checked, :invalid, :required).
Pseudo-Class Category Target Action
:hover Interactive Triggers when the cursor rolls over the element.
:focus-visible Interactive Triggers focus outline rings only when keyboard navigation is active.
:nth-child(2n) Structural Selects even-numbered child elements (useful for zebra table striping).
:invalid Validation Triggers when form inputs fail validation rules.

6. Syntax & API Reference

Pseudo-classes append directly to selectors using a single colon (:):

7. Visual Diagram

This diagram displays how the browser checks layout states to apply pseudo-class styling:

8. Live Example — Full Working Code

A sample HTML document showcasing zebra-striped tables and form validation styling:

9. Interactive Playground

Try It Yourself Challenges:

  1. Hover over the table rows to watch the background color highlight change.
  2. Type an invalid email address (e.g. missing "@" symbol) in the input field, focus it, and observe the border changes.

10. Common Mistakes

Mistake Why it happens Wrong Correct
Mismatched interactive ordering Ordering interactive link states incorrectly, causing the active or hover states to be ignored once a link is visited. a:hover before a:visited Follow LVHA order: :link, :visited, :hover, :active.
Removing focus outlines globally Setting outline: none globally on focus, which blocks keyboard-only users from navigating the site. button:focus { outline: none; } Use :focus-visible to show outline rings only for keyboard users.

11. Best Practices

  • Order link states using the LVHA pattern: Always declare link pseudo-classes in this order: :link, :visited, :hover, and :active.
  • Use :focus-visible for keyboard accessibility: Always define outline focus states using the :focus-visible selector to support keyboard-only navigation.
  • Style input validation states: Use :invalid, :required, and :disabled pseudo-classes to provide clear visual feedback to users filling out forms.
  • Use nth-child formulas for grids: Use semantic formulas in :nth-child() (e.g. 2n for even, 2n+1 for odd) to style complex table and card layouts.

12. Browser Compatibility

Feature Chrome Firefox Safari Edge
Interactive (:hover, :focus, :active) Supported Supported Supported Supported
:focus-visible accessibility rule Supported (86+) Supported (85+) Supported (15.4+) Supported (86+)

13. Interview Questions

🟢 Q1: Why is the order of interactive link pseudo-classes (LVHA) critical in CSS?

Answer: CSS selectors with equal specificity resolve conflicts based on the cascade (the last rule declared wins). If you place :hover before :visited, then once a link is visited, the :visited styling rule will override the :hover rule, preventing the hover effect from applying. Following the LVHA order (:link, :visited, :hover, :active) ensures hover and active states override visited styles correctly.

14. Debugging Exercise

Explain why the hover styling fails to display on visited links, and fix the CSS configuration:

View Solution

Diagnosis: The a:visited selector is declared after the a:hover selector. Due to the cascade rule, the visited styles override the hover styles once the link has been clicked. To fix this, move the a:visited selector before the a:hover selector (following the LVHA ordering pattern).

Fixed CSS:

15. Practice Exercises

Exercise 1: Dynamic Form styling Grid

Build a form containing inputs for name, email, and a submit button. Use the `:disabled` pseudo-class to style the submit button when inputs are empty or invalid, and apply border highlights on focus.

16. Scenario-Based Challenge

The zebra data Table striping Challenge:

A project dashboard displays a table containing 100 rows. The table has zebra-striped rows to make the data easier to read. However, when rows are grouped or filtered, the zebra pattern breaks, resulting in adjacent white rows. Propose an implementation plan using pseudo-classes to keep the zebra pattern clean.

17. Quick Quiz

Q1: Which pseudo-class applies focus outlines only when keyboard navigation is active?

A) :focus

B) :active

C) :focus-visible

Answer: C — The :focus-visible pseudo-class applies focus outlines only when a keyboard user navigates to the element.

18. Summary & Key Takeaways

  • • Order link selectors using the LVHA pattern to prevent visited styles from overriding hover effects.
  • • Use :focus-visible to display focus outline rings only for keyboard users, preserving focus accessibility.

19. Cheat Sheet

Selector Visual Layout Action
:focus-within Selects a parent element if any of its nested child elements currently have focus.