CSS chevron_right CSS Pseudo-classes

CSS Pseudo-classes

calendar_today schedule 15 min read

Learning Objectives: By the end of this lesson, you will be able to:

  • Understand what pseudo-classes are and how they differ from regular CSS classes
  • Apply link states, user interaction pseudo-classes for enhanced user experience
  • Use structural pseudo-classes to target specific elements without additional HTML markup
  • Create dynamic, interactive interfaces using form and UI state pseudo-classes

1. Welcome and Introduction (5 minutes)

Icebreaker Activity

Welcome! Think about your favorite interactive experiences on websites - maybe a button that changes color when you hover over it, or a form that highlights required fields. These delightful interactions often rely on CSS pseudo-classes. If you could add a hover effect to anything in real life, what would it be and what would it do? Perhaps your coffee mug could show the temperature when you approach it, or your car keys could glow when you’re looking for them? CSS pseudo-classes bring this kind of contextual, state-based magic to web interfaces.

Lesson Overview

  • Duration: 90 minutes
  • Prerequisites: Basic understanding of CSS selectors, HTML structure, and fundamental CSS properties
  • Materials Needed: Code editor, web browser with developer tools for testing interactive states

2. Learning Objectives and Session Outline (5 minutes)

What We’ll Cover Today:

  1. Pseudo-class Fundamentals - Understanding how pseudo-classes select elements based on state or position
  2. Link and User Interaction States - Creating responsive, accessible navigation and interactive elements
  3. Structural Pseudo-classes - Targeting elements by their position in the document tree
  4. Form and UI States - Enhancing forms and user interfaces with dynamic styling
  5. Advanced Combinations - Combining pseudo-classes for sophisticated interaction patterns

Success Criteria:

By the end of this session, you should be able to create rich, interactive user interfaces that respond intelligently to user actions and provide excellent accessibility and user experience.

3. Foundation Knowledge (15-20 minutes)

Core Concepts

What Are Pseudo-classes?

Pseudo-classes are CSS selectors that allow you to style elements based on their state, position, or characteristics that can’t be targeted with regular class or ID selectors. Unlike regular classes that you add to HTML, pseudo-classes are dynamic and reflect the current condition of an element.

Real-World Analogy: Think of pseudo-classes like mood rings that change color based on conditions. A mood ring doesn’t need you to manually change its color - it responds automatically to temperature (your body heat). Similarly, pseudo-classes automatically apply styles when certain conditions are met, like when a user hovers over a link or when an input field is focused.

Why This Matters: Pseudo-classes enable you to create responsive, interactive interfaces without JavaScript. They’re essential for:

  • User feedback: Showing users what they can interact with
  • Accessibility: Providing clear focus indicators for keyboard navigation
  • Progressive enhancement: Adding interactive features that degrade gracefully
  • Clean markup: Styling based on structure without cluttering HTML with extra classes

The Difference Between Classes and Pseudo-classes

  • Classes: Static, added to HTML markup (.my-class)
  • Pseudo-classes: Dynamic, based on element state or position (:hover, :first-child)
  • Combination: You can combine both (a.button:hover)

Categories of Pseudo-classes

Pseudo-classes can be grouped into several categories:

  • Link states: :link, :visited
  • User action states: :hover, :active, :focus
  • Structural: :first-child, :last-child, :nth-child()
  • Form states: :checked, :disabled, :valid, :invalid
  • UI states: :enabled, :disabled, :target

Key Terminology

  • Pseudo-class: A CSS selector that targets elements based on their state or position
  • State: The current condition of an element (hovered, focused, checked, etc.)
  • Structural position: An element’s location relative to its siblings or parent
  • Cascading order: The sequence in which link states should be defined (LVHA)
  • Focus indicator: Visual feedback showing which element has keyboard focus
  • UI state: The current condition of user interface elements

4. Detailed Explanation and Examples (25-30 minutes)

Link pseudo-classes should follow the LVHA order to work correctly due to CSS specificity:

  1. :link - Unvisited links
  2. :visited - Previously visited links
  3. :hover - Mouse is over the element
  4. :active - Element is being clicked/activated

This order is crucial because later rules override earlier ones with equal specificity.

User Action Pseudo-classes

  • :hover - Triggered when users point to an element (mouse, touch, stylus)
  • :active - Element is being activated (mouse button down, spacebar pressed)
  • :focus - Element has received focus (clicked, tabbed to, or programmatically focused)
  • :focus-visible - Element has focus and should show a visible focus indicator

Accessibility Considerations

Always ensure that interactive states are accessible:

  • Provide clear focus indicators for keyboard users
  • Don’t rely solely on color changes for state indication
  • Ensure sufficient contrast in all states
  • Test with keyboard navigation and screen readers

Understanding Structural Pseudo-classes

Child-based Selectors

  • :first-child - First child of its parent
  • :last-child - Last child of its parent
  • :only-child - Only child of its parent
  • :nth-child(n) - Nth child based on a formula

Type-based Selectors

  • :first-of-type - First element of its type among siblings
  • :last-of-type - Last element of its type among siblings
  • :nth-of-type(n) - Nth element of its type

Content-based Selectors

  • :empty - Elements with no children (including text)
  • :not(selector) - Elements that don’t match the selector

Understanding Form and UI States

Form Element States

  • :checked - Checked checkboxes or radio buttons
  • :unchecked - Unchecked checkboxes or radio buttons
  • :disabled - Disabled form elements
  • :enabled - Enabled form elements
  • :required - Required form fields
  • :optional - Optional form fields

Validation States

  • :valid - Form elements that meet validation requirements
  • :invalid - Form elements that fail validation
  • :in-range - Input values within specified range
  • :out-of-range - Input values outside specified range

Practical Applications

Pseudo-classes are essential for:

  • Navigation systems with clear hover and active states
  • Form design with validation feedback and interaction states
  • Content layout using structural selectors for styling patterns
  • Accessibility providing keyboard focus and state indicators
  • Interactive components like buttons, cards, and media elements

Common Misconceptions

  1. Misconception: :visited can be styled with any properties for security reasons Reality: Browsers limit :visited styling to prevent privacy issues

  2. Misconception: :hover only works with mouse input Reality: It also works with touch, stylus, and other pointing devices

  3. Misconception: Structural pseudo-classes count all elements Reality: :nth-child() counts all siblings, :nth-of-type() counts only same element types

5. Live Coding Demonstration (20-25 minutes)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Link States Demo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 40px;
            background: #f5f5f5;
        }
        
        .link-demo {
            display: inline-block;
            padding: 12px 24px;
            margin: 10px;
            text-decoration: none;
            border-radius: 6px;
            transition: all 0.3s ease;
            font-weight: 500;
        }
        
        /* LVHA Order - very important! */
        .link-demo:link {
            background: #3498db;
            color: white;
            border: 2px solid #3498db;
        }
        
        .link-demo:visited {
            background: #9b59b6;
            border-color: #9b59b6;
            color: white;
        }
        
        .link-demo:hover {
            background: #2980b9;
            border-color: #2980b9;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        
        .link-demo:active {
            background: #1f5582;
            border-color: #1f5582;
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        .link-demo:focus {
            outline: 3px solid #f39c12;
            outline-offset: 2px;
        }
        
        /* Button variations */
        .btn-secondary:link {
            background: transparent;
            color: #3498db;
        }
        
        .btn-secondary:visited {
            color: #9b59b6;
        }
        
        .btn-secondary:hover {
            background: #3498db;
            color: white;
        }
    </style>
</head>
<body>
    <h1>Link State Demonstrations</h1>
    
    <p>Try clicking these links and then returning to see the visited state:</p>
    
    <a href="#section1" class="link-demo">Primary Link</a>
    <a href="#section2" class="link-demo btn-secondary">Secondary Link</a>
    <a href="https://example.com" class="link-demo">External Link</a>
    
    <p>Notice how the colors change based on interaction state and visit history.</p>
    
    <div id="section1" style="margin-top: 100px;">
        <h2>Section 1</h2>
        <p>This section helps demonstrate the visited state.</p>
    </div>
    
    <div id="section2" style="margin-top: 100px;">
        <h2>Section 2</h2>
        <p>Another section for testing link states.</p>
    </div>
</body>
</html>

Explanation:

  • Lines 18-23: :link defines the default unvisited link appearance
  • Lines 25-29: :visited shows previously clicked links with a different color
  • Lines 31-36: :hover provides visual feedback with color change and subtle animation
  • Lines 38-43: :active gives immediate feedback during the click action
  • Lines 45-48: :focus ensures keyboard accessibility with a clear focus indicator

Example 2: Structural Pseudo-classes for Layout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Structural Pseudo-classes Demo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 40px;
            background: #f8f9fa;
        }
        
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }
        
        .card {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }
        
        /* First child gets special styling */
        .card:first-child {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            transform: scale(1.05);
        }
        
        /* Last child gets different styling */
        .card:last-child {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
        }
        
        /* Every other card gets alternate styling */
        .card:nth-child(even) {
            border-left: 4px solid #3498db;
        }
        
        .card:nth-child(odd) {
            border-left: 4px solid #e74c3c;
        }
        
        /* Hover effect for all cards */
        .card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 16px rgba(0,0,0,0.15);
        }
        
        /* Special hover for first and last */
        .card:first-child:hover,
        .card:last-child:hover {
            transform: scale(1.08) translateY(-2px);
        }
        
        /* List styling examples */
        .demo-list {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
        }
        
        .demo-list li {
            padding: 8px 0;
            border-bottom: 1px solid #eee;
        }
        
        .demo-list li:first-child {
            font-weight: bold;
            color: #2c3e50;
            font-size: 1.1em;
        }
        
        .demo-list li:last-child {
            border-bottom: none;
            font-style: italic;
            color: #7f8c8d;
        }
        
        .demo-list li:nth-child(3n) {
            background: #f8f9fa;
            margin: 0 -20px;
            padding: 8px 20px;
        }
        
        /* Empty state styling */
        .empty-container:empty::before {
            content: "No items to display";
            color: #95a5a6;
            font-style: italic;
            display: block;
            text-align: center;
            padding: 40px;
            background: #ecf0f1;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <h1>Structural Pseudo-classes Demo</h1>
    
    <h2>Card Grid with Structural Styling</h2>
    <div class="card-grid">
        <div class="card">
            <h3>Featured Card</h3>
            <p>This first card gets special gradient styling and is slightly larger.</p>
        </div>
        <div class="card">
            <h3>Regular Card</h3>
            <p>This card demonstrates even-numbered styling with a blue border.</p>
        </div>
        <div class="card">
            <h3>Another Card</h3>
            <p>This odd-numbered card has a red border accent.</p>
        </div>
        <div class="card">
            <h3>Even Card</h3>
            <p>Another even card with blue border styling.</p>
        </div>
        <div class="card">
            <h3>Final Card</h3>
            <p>The last card gets special gradient styling like the first.</p>
        </div>
    </div>
    
    <h2>List with Structural Styling</h2>
    <ul class="demo-list">
        <li>First item (bold header style)</li>
        <li>Second item (regular style)</li>
        <li>Third item (highlighted every 3rd)</li>
        <li>Fourth item (regular style)</li>
        <li>Fifth item (regular style)</li>
        <li>Sixth item (highlighted every 3rd)</li>
        <li>Last item (italic footer style)</li>
    </ul>
    
    <h2>Empty Container Demo</h2>
    <div class="empty-container"></div>
</body>
</html>

Key Points:

  • Lines 25-29: :first-child provides special styling for the leading element
  • Lines 31-35: :last-child creates a distinctive ending element
  • Lines 37-43: :nth-child(even) and :nth-child(odd) create alternating patterns
  • Lines 76-78: :nth-child(3n) selects every third element for pattern highlighting
  • Lines 81-89: :empty pseudo-class with ::before creates helpful empty state messaging

Example 3: Advanced Form States and Interactions

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form States Demo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 40px;
            background: #f5f7fa;
        }
        
        .form-container {
            max-width: 500px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
            color: #2c3e50;
        }
        
        .form-input {
            width: 100%;
            padding: 12px;
            border: 2px solid #bdc3c7;
            border-radius: 6px;
            font-size: 16px;
            transition: all 0.3s ease;
            box-sizing: border-box;
        }
        
        /* Focus states */
        .form-input:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
        }
        
        /* Valid states */
        .form-input:valid {
            border-color: #27ae60;
        }
        
        .form-input:valid:focus {
            border-color: #27ae60;
            box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.2);
        }
        
        /* Invalid states */
        .form-input:invalid {
            border-color: #e74c3c;
        }
        
        .form-input:invalid:focus {
            border-color: #e74c3c;
            box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2);
        }
        
        /* Required field indicator */
        .form-input:required + .required-indicator::after {
            content: " *";
            color: #e74c3c;
        }
        
        /* Disabled states */
        .form-input:disabled {
            background: #ecf0f1;
            color: #7f8c8d;
            cursor: not-allowed;
            border-color: #bdc3c7;
        }
        
        /* Checkbox and radio styling */
        .checkbox-group {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 10px 0;
        }
        
        .custom-checkbox {
            width: 18px;
            height: 18px;
            cursor: pointer;
        }
        
        .custom-checkbox:checked {
            accent-color: #3498db;
        }
        
        .custom-checkbox:focus {
            outline: 2px solid #3498db;
            outline-offset: 2px;
        }
        
        .custom-checkbox:disabled {
            cursor: not-allowed;
            opacity: 0.5;
        }
        
        /* Submit button states */
        .submit-btn {
            background: #3498db;
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 100%;
        }
        
        .submit-btn:hover {
            background: #2980b9;
            transform: translateY(-1px);
        }
        
        .submit-btn:active {
            background: #1f5582;
            transform: translateY(0);
        }
        
        .submit-btn:focus {
            outline: 3px solid #f39c12;
            outline-offset: 2px;
        }
        
        .submit-btn:disabled {
            background: #bdc3c7;
            cursor: not-allowed;
            transform: none;
        }
        
        /* Form validation messages */
        .form-input:invalid + .error-message {
            color: #e74c3c;
            font-size: 14px;
            margin-top: 5px;
            display: block;
        }
        
        .form-input:valid + .error-message {
            display: none;
        }
    </style>
</head>
<body>
    <div class="form-container">
        <h1>Interactive Form with State Styling</h1>
        
        <form>
            <div class="form-group">
                <label for="email">Email Address</label>
                <input 
                    type="email" 
                    id="email" 
                    class="form-input" 
                    required 
                    placeholder="Enter your email"
                >
                <span class="error-message">Please enter a valid email address</span>
            </div>
            
            <div class="form-group">
                <label for="password">Password</label>
                <input 
                    type="password" 
                    id="password" 
                    class="form-input" 
                    required 
                    minlength="8"
                    placeholder="At least 8 characters"
                >
                <span class="error-message">Password must be at least 8 characters</span>
            </div>
            
            <div class="form-group">
                <label for="phone">Phone Number (Optional)</label>
                <input 
                    type="tel" 
                    id="phone" 
                    class="form-input" 
                    placeholder="(555) 123-4567"
                >
            </div>
            
            <div class="form-group">
                <label for="disabled-field">Disabled Field</label>
                <input 
                    type="text" 
                    id="disabled-field" 
                    class="form-input" 
                    value="This field is disabled"
                    disabled
                >
            </div>
            
            <div class="checkbox-group">
                <input type="checkbox" id="terms" class="custom-checkbox" required>
                <label for="terms">I agree to the terms and conditions</label>
            </div>
            
            <div class="checkbox-group">
                <input type="checkbox" id="newsletter" class="custom-checkbox">
                <label for="newsletter">Subscribe to newsletter</label>
            </div>
            
            <div class="checkbox-group">
                <input type="checkbox" id="disabled-check" class="custom-checkbox" disabled>
                <label for="disabled-check">Disabled option</label>
            </div>
            
            <button type="submit" class="submit-btn">Create Account</button>
        </form>
    </div>
</body>
</html>

6. Hands-On Practice (30-40 minutes)

Exercise 1: Interactive Navigation Menu (10 minutes)

Objective: Create a navigation menu with comprehensive hover and focus states.

Instructions:

  1. Build a horizontal navigation bar with 5 menu items
  2. Implement all appropriate link states (link, visited, hover, active, focus)
  3. Add a visual indicator showing the current page
  4. Ensure keyboard accessibility with clear focus indicators

Starter Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation Exercise</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }
        
        .navbar {
            background: #2c3e50;
            padding: 0;
        }
        
        .nav-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
        }
        
        .nav-item {
            /* Add your styling here */
        }
        
        .nav-link {
            display: block;
            padding: 15px 20px;
            text-decoration: none;
            color: white;
            /* Add your pseudo-class styles here */
        }
        
        .nav-link.current {
            background: #3498db;
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <ul class="nav-list">
            <li class="nav-item"><a href="#home" class="nav-link current">Home</a></li>
            <li class="nav-item"><a href="#about" class="nav-link">About</a></li>
            <li class="nav-item"><a href="#services" class="nav-link">Services</a></li>
            <li class="nav-item"><a href="#portfolio" class="nav-link">Portfolio</a></li>
            <li class="nav-item"><a href="#contact" class="nav-link">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

Solution:

.nav-link:link {
    color: #ecf0f1;
}

.nav-link:visited {
    color: #bdc3c7;
}

.nav-link:hover {
    background: #34495e;
    color: white;
}

.nav-link:active {
    background: #1f2937;
}

.nav-link:focus {
    outline: 3px solid #f39c12;
    outline-offset: -3px;
}

Exercise 2: Advanced Form with Validation States (15 minutes)

Objective: Create a registration form that uses pseudo-classes to provide real-time visual feedback.

Requirements:

  • Include email, password, confirm password, and optional fields
  • Use :valid and :invalid pseudo-classes for immediate feedback
  • Style :required and :optional fields differently
  • Add hover and focus states for all interactive elements
  • Include checkbox/radio button styling

Hints:

  • Use the pattern attribute for custom validation rules
  • Combine pseudo-classes for more specific targeting (:required:invalid)
  • Consider using :placeholder-shown for enhanced UX

Exercise 3: Dynamic Content Layout (15 minutes)

Objective: Build a blog layout using structural pseudo-classes for automatic styling.

Challenge: Create a blog post list where:

  • The first post is featured (larger, different styling)
  • Every third post has special highlighting
  • The last post has a “latest” indicator
  • Empty sections show helpful placeholder text
  • Hover effects enhance interactivity

Extension Ideas:

  • Add :target pseudo-class for highlighting linked sections
  • Use :not() to exclude certain elements from general styling
  • Implement :nth-child() formulas for complex patterns
  • Create responsive behavior using pseudo-classes combined with media queries

7. Common Pitfalls and Troubleshooting (10 minutes)

Frequent Mistakes

  1. Problem: Link pseudo-classes not working as expected Cause: Incorrect LVHA order or specificity conflicts Solution: Always follow Link-Visited-Hover-Active order and check CSS specificity

  2. Problem: :nth-child() selecting unexpected elements Cause: Misunderstanding that it counts all siblings, not just elements of the same type Solution: Use :nth-of-type() when you want to count only same element types

  3. Problem: Accessibility issues with focus states Cause: Removing default focus outlines without providing alternatives Solution: Always provide clear, visible focus indicators for keyboard users

  4. Problem: Form validation pseudo-classes not working Cause: Missing validation attributes or incorrect selector syntax Solution: Ensure proper HTML5 validation attributes and test with real user input

Debugging Tips

  • Use browser developer tools to inspect element states and applied pseudo-classes
  • Test interactive states manually (hover, focus, active) to verify styling
  • Check CSS specificity when pseudo-class styles aren’t applying
  • Validate HTML to ensure proper structure for structural pseudo-classes
  • Test keyboard navigation to verify focus states and accessibility

8. Best Practices and Professional Tips (5 minutes)

Industry Standards

  • Accessibility First: Always provide clear focus indicators and don’t rely solely on color
  • Performance: Use pseudo-classes instead of JavaScript for simple state changes
  • Progressive Enhancement: Ensure functionality works without CSS enhancements
  • Semantic HTML: Use appropriate HTML elements that work naturally with pseudo-classes

CSS Organization

/* Group related pseudo-class styles together */
.button {
    /* Base styles */
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px;
    
    /* State styles */
    transition: all 0.3s ease;
}

.button:link { background: #3498db; color: white; }
.button:visited { background: #9b59b6; }
.button:hover { background: #2980b9; transform: translateY(-1px); }
.button:active { background: #1f5582; transform: translateY(0); }
.button:focus { outline: 3px solid #f39c12; outline-offset: 2px; }

Next Steps in Your Learning Journey

  • CSS Pseudo-elements: Learn about ::before, ::after, and other pseudo-elements
  • Advanced Selectors: Explore attribute selectors and complex selector combinations
  • CSS Animations: Combine pseudo-classes with keyframe animations
  • JavaScript Integration: Learn when to use CSS pseudo-classes vs. JavaScript for interactivity

9. Summary and Review (5 minutes)

Key Takeaways

  1. Pseudo-classes select elements based on state or position rather than explicit markup
  2. Link states must follow LVHA order for proper functionality due to CSS specificity
  3. Structural pseudo-classes enable clean markup by styling based on document structure
  4. Form pseudo-classes enhance UX by providing immediate visual feedback to users

Quick Review Questions

  1. Why is the LVHA order important for link pseudo-classes?
  2. What’s the difference between :nth-child() and :nth-of-type()?
  3. How would you style only the middle item in a list of 5 elements?

Answers:

  1. Due to CSS specificity - later rules override earlier ones with equal specificity
  2. :nth-child() counts all sibling elements, :nth-of-type() counts only siblings of the same element type
  3. Use :nth-child(3) or :nth-of-type(3) depending on the HTML structure

For Instructors

Teaching Tips

  • Demonstrate pseudo-classes live in the browser, showing state changes in real-time
  • Use browser developer tools to show when pseudo-classes are active
  • Emphasize accessibility throughout the lesson, not just as an afterthought
  • Encourage students to test with keyboard navigation

Assessment Ideas

  • Interactive Component Creation: Students build a complete UI component using multiple pseudo-classes
  • Accessibility Audit: Review student work for proper focus indicators and keyboard navigation
  • Debugging Challenge: Provide broken pseudo-class code for students to fix

Adaptation Notes

  • For Beginners: Focus on basic :hover and :focus before introducing complex structural selectors
  • For Advanced Students: Include CSS custom properties with pseudo-classes and advanced selector combinations
  • Online Delivery: Use screen sharing to clearly demonstrate interactive states
  • Time Management: Allow extra time for hands-on practice as pseudo-classes are best learned through experimentation