Retour au cours

Lesson 41: Pseudo-Classes: Interactivity (:hover, :active, :focus)

**La Maîtrise de CSS : De zéro à expert en 100 leçons** *(Alternative, slightly punchier version using a common French idiomatic structure for full coverage: CSS : Maîtrisez l'essentiel en 100 leçons, but the first option is closer to the original progression.)*

41. Pseudo-Classes: Interactivity

Pseudo-classes allow you to select elements based on a state, rather than just their name or attributes. They are essential for adding interactivity and user feedback.

Syntax

Pseudo-classes start with a single colon (:).

Common Interactive Pseudo-Classes

1. :hover

Applies when the user's mouse pointer is hovering over the element.

css .button { background-color: blue; color: white; }

.button:hover { /* Changes when the mouse is over the button / background-color: darkblue; cursor: pointer; / Changes the mouse cursor to a pointer icon */ }

2. :active

Applies when the element is being clicked (held down by the mouse).

css .button:active { transform: translateY(2px); /* Makes the button look 'pressed' down */ box-shadow: none; }

3. :focus

Applies when the element is currently selected (e.g., a form input when the user is typing, or a link selected via the Tab key). Crucial for accessibility.

css input[type="text"]:focus { outline: 2px solid orange; /* Highly recommended for visibility */ border-color: orange; }

L-V-H-A Rule (Link State Order): For links, always define the states in the order: :link, :visited, :hover, :active. If :hover comes before :visited, :visited might override :hover due to cascade order.