:when()
selectorsince 0.2requires runtimeMatches elements for which the condition is true, with states resolved from that element.
On this page · 9 sections+−
Syntax
selector:when(<condition>) { … }:when()Selector · hover any red tokenMatches elements for which the condition is true, with states resolved from that element.Reference →
registry syntax: :when(condition)
Parameters
- conditionsame as
when()required - States, comparisons and logical operators.
Return value
A pseudo-class, compiled to [data-rcss-when-N]. Same specificity as one pseudo-class.
Example
.item { --open: state(false);}.item > button:on(click) { --open: toggle();}.item .body { display: none;}.item .body:when(--open) { display: block;}.item .chevron { rotate: when(--open, 180deg, 0deg);}state()Function · hover any red tokenMakes each matching element the owner of an independent state with an initial value.Reference →
Resultvisual only
waiting for interaction
Behavior
- Unknown conditions don’t match and log a warning.
Supported contexts
- Any selector.
Limitations
- Not in at-rule conditions.
Examples
- State toggle · API examples, runs the real runtime
- Conditional state · API examples, runs the real runtime
Related
Experimental · syntax may change between minor versions