peer & peer-* Variants

Definition

A complex state variant that allows an element to style itself based on the state (like focus, checked, or invalid) of a SIBLING element that comes immediately BEFORE it in the HTML.

Explain Like I'm New

If you check a secret checkbox, a hidden message appears. You make the Checkbox a `peer`. You tell the Message: 'Hide yourself, but `peer-checked:block` (reveal yourself if the peer is checked)'.

Real World Example

Creating a beautiful floating label on a text input. When the input field is focused (`peer-focus:`), the `<label>` sitting next to it floats up to the top border.

Common Use Cases

•CSS-only Dropdowns
•Floating labels
•Custom Checkboxes
•Form validation styling

Interactive Example

Interview Questions

basic

Does the `peer` class go on the element being watched, or the element reacting to the change?

intermediate

If the `peer` element is written in the HTML *after* the element trying to react to it, will it work?

Flash Cards

Question

Which gets 'peer'?

Click to reveal answer

Answer

The element being WATCHED gets the `peer` class (usually an `<input>`). The element REACTING gets the `peer-checked:` or `peer-focus:` class.

Question

Order in HTML?

Click to reveal answer

Answer

No! It will completely fail. Due to how CSS engines work, the `peer` MUST appear in the DOM *before* the element reacting to it. (Sibling combinators `~` only look forward, never backward).