previous()

The value of a state before its last effective change.

Syntax

previous(<custom-property>)

registry syntax: previous(--state)

Parameters

custom-property<dashed-ident>required

A state name.

Return value

The previous value. The initial value until the first change.

Example

.counter {  --count: state(0);  --last: previous(--count);  /* --count as a position in the strip */  --pos: state(6);}.plus:on(click) {  --count: increment(1);  --pos: increment(1);}.minus:on(click) {  --count: decrement(1);  --pos: decrement(1);}output {  animation-duration: 240ms;}.counter:changed(--count) output {  animation-name: when(    direction(--count) > 0,    slide-up,    slide-down  );}.trail span:nth-var(--pos) {  border-color: oklch(0.55 0.2 35);  color: oklch(0.55 0.2 35);}.trail span:nth-var(--pos) ~ span {  display: none;}

Behavior

• Updates when the state changes. Shares the state’s history, with no extra storage.
• Usable as a condition operand: when(--count > previous(--count), …).

Supported contexts

• Any value or condition.

Limitations

• One step only. A bounded history() is planned, not shipped.

Examples

• State history · API examples, runs the real runtime

Related