In CSS, what does the :checked pseudo-class match, and how can it drive styling elsewhere on the page without JavaScript?

## What it matches `:checked` is a state pseudo-class from the form family. It matches: - a checkbox input that is currently checked, - a radio input that is currently selected within its group, - an `option` element that is currently selected. The crucial word is *currently*. A pseudo-class describes state, not markup. If the source says the box is checked and the user unchecks it, `:checked` stops matching, even though the attribute in the source is unchanged. This is the same distinction that makes `[checked]` — an attribute selector — the wrong tool: it matches the initial attribute and does not follow the user. ```css input[type="checkbox"]:checked { accent-color: rebeccapurple; } ``` ## Driving styles elsewhere On its own, `:checked` can only style the control. Combined with a sibling combinator it reaches other elements in the same parent: ```css /* the label immediately after the checked control */ input:checked + label { font-weight: 700; } /* any later sibling with .panel, once the control is checked */ input:checked ~ .panel { display: block; } ``` This is the mechanism behind the JS-free toggle. The pattern places the real control and the thing you want to style as siblings, hides the control visually while keeping it focusable and operable, and paints a decorative element from the checked state: ```css .toggle input { position: absolute; opacity: 0; /* still focusable and clickable via the label */ } .toggle .track { background: #ccc; transition: background 120ms; } .toggle input:checked + .track { background: #0b5fff; } .toggle input:focus-visible + .track { outline: 2px solid #0b5fff; } ``` Two cautions come with it. First, hide the control with `opacity: 0` or a clip-based visually-hidden helper rather than `display: none` or `visibility: hidden` — those remove it from the interaction and accessibility trees entirely, which breaks keyboard operation. Second, remember the reach is limited by the combinators available: `+` and `~` only see **later siblings**, so the styled element must come after the control in source order and share its parent. That constraint is why so many of these patterns have a peculiar DOM order. ## The rest of the state family `:checked` sits in a group of pseudo-classes that reflect form-control state, and interviewers often ask for its neighbours: - `:disabled` / `:enabled` — whether the control accepts interaction. `:disabled` is the everyday way to grey out a control and its label without adding a class. - `:indeterminate` — the third checkbox state, set only from script, plus a radio group with nothing selected and a `progress` element with no value. It is neither checked nor unchecked, and `:checked` does not match it. - `:read-only` / `:read-write` — whether the value can be edited. - `:required` / `:optional` — whether a value must be supplied. - `:default` — the control that was the default in its form. ```css input:disabled + label { color: #999; cursor: not-allowed; } input[type="checkbox"]:indeterminate + .box::after { content: "–"; } ``` ## Where the technique stops CSS-only state is charming and genuinely useful for small toggles — a details disclosure, a tab strip, a custom checkbox — but it has a hard ceiling. The state lives in a control, so it is only as expressive as that control: a boolean per checkbox, one-of-N per radio group. Anything that must persist, be read back, or coordinate with data belongs in application state. And because the visual result depends on source order and sibling relationships, the markup becomes fragile to reorder. State a preference clearly in an interview: use `:checked` for the presentational half of a real control, not to reimplement application logic in selectors. ## A related trick worth knowing `:target` matches the element whose id equals the current URL fragment, giving a second source of JS-free state — click a link to `#panel-2` and `#panel-2:target { display: block }` reveals it. Unlike `:checked` it survives a page reload and is shareable as a URL, but it is limited to one active target at a time and it moves the scroll position.