CSS Pseudo-Classes

Introduction

Syntax

1/* pseudo-class syntax */
2selector:pseudo-class {
3  property: value;
4}

Example

1/* this changes color on hover */
2button:hover {
3  background-color: green;
4}

Key Points

• Pseudo-classes reflect user interactions.
• The `:hover` pseudo-class triggers on mouse over.
• The `:focus` pseudo-class triggers when clicking an input field.
• The `:nth-child()` pseudo-class targets specific items in a list.