:just-checked

Matches a checkbox or radio after an observed unchecked → checked change, until its next change.

Syntax

input:just-checked { … }

registry syntax: :just-checked

Parameters

None.

Return value

A pseudo-class, compiled to [data-rcss-just-checked].

Example

.task {  --done: state(false);}/* The span next to the checkbox reads the state, so it lives on .task. */.task input:on(change) {  --done: set(event(checked));}.task input:just-checked + span {  animation: pop 300ms;}.task input:just-unchecked + span {  animation: settle 300ms;}.task span {  opacity: when(--done, 0.55, 1);}

Behavior

• Never matches on page load.
• Markers swap on each change, so the animation restarts. There are no timers.
• Keyboard, label clicks and mouse clicks all count, as does form.reset().

Supported contexts

• Checkboxes and radio buttons.

Limitations

• Non-animation declarations stay applied until the next change; use :checked for those.
• A script setting checked directly fires no event: dispatch change or call refresh().

Related