Respond to a checked checkbox

Emphasise the immediately following label when the option is checked.

Official sourceW3C Selectors — :checked and adjacent siblingReviewed: 2026-08-26

STEP 1 · LEARN

How it works

:checked selects checked controls, while the + combinator selects the immediately following sibling. The HTML must keep the label after the input for the relationship to exist.

Correct example

.choice:checked + label { color: #166534; font-weight: 700; }

The selected option label becomes green and bold.

Common mistake

.choice + label:checked { color: #166534; }

A label is not checkable; :checked belongs on the input before the combinator.

STEP 2 · APPLY

Your exercise

For .choice:checked + label, set colour to #166534 and font-weight to 700.

index.htmlCSS

Safe resultisolated

The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked

STEP 4 · CHECK

What needs to pass

0%not checked

The checked label uses #166534.
The checked label has weight 700.
The target element is present in the page.

Explain the solution logic

The pseudo-class identifies the control state, while + directs the visual effect to the following label.

How it works

Your exercise

Write and see the result

What needs to pass