Menu

Tech

English

Pseudo-Classes

Part of the CSS Mastery section of Coddy's HTML journey — lesson 7 of 43.

Interactive pseudo-classes let you change the look of elements when users do things like move their mouse over them, click them, or select them. They help make your website feel more responsive and fun to use.

The syntax of pseudo-classes:

selector:pseudo-class {
  property: value;
}

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Cheat sheet

Interactive pseudo-classes change element appearance based on user interactions. They use the syntax:

selector:pseudo-class {
  property: value;
}

Try it yourself

This lesson doesn't include a code challenge.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

All lessons in CSS Mastery

1Selector Mastery – Combination

Introduction Descendant Selector Child Selector Adjacent Sibling Selector General Sibling Selector Recap Challenge

4Dropdown Menu Project

Add the Submenu Show the Submenu More styling Input and button

7Build with CSS Grid

Grid Basics Grid-row Item Placement Named Areas Recap Challenge

2Interactive Pseudo-Classes

Pseudo-ClassesHover Effects Focus Effects Active Styles Recap Challenge

5Visual effects

Gradients CSS Filters Transform Transitions & Hover Effects Recap Challenge

8Flavor Fiesta website

Setting the grid Header The main part Footer

3Structural pseudo-classes

Structural pseudo-classes Targeting the First Child Targeting the Last Child Pattern Power: Using nth-child Recap Challenge

6Landing Page

Style the Header Section Style the button Section Layout Card Layout Add Finishing Touches

9Final Challenges

Highlight Active Menu Zebra Table Rows Button Hover Effect Grid Card Layout Blurred Hero Image