:nth-var()

selectorsince 0.1requires runtime

Matches the sibling whose one-based index equals the integer value of a custom property or state, read on the parent.

On this page · 9 sections+

Syntax Parameters Return value Example Behavior Supported contexts Limitations Examples Related

Syntax

selector:nth-var(<custom-property>) { … }

:nth-var()Selector · hover any red tokenMatches the sibling whose one-based index equals the integer value of a custom property or state, read on the parent.Reference →

registry syntax: :nth-var(--name)

Parameters

custom-property<dashed-ident>required: A state() or a plain custom property computing to an integer literal.

Return value

A pseudo-class, compiled to [data-rcss-nth-N]. Same specificity as :nth-child().

Example

.tabs {  --active: state(1);}.tab:on(click) {  --active: set(sibling-index());}.panel {  display: none;}.panel:nth-var(--active) {  display: block;}.tab:nth-var(--active) {  border-color: currentColor;}

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

With a state, the cell is read directly and only the old and new active element are touched.
With a plain property, groups are re-checked on child, attribute and ancestor changes.

Supported contexts

Any selector.

Limitations

Doesn’t see changes that come only from media or container queries, animations or stylesheet edits. Call ReactiveCSS.refresh().
For calc() values, register the property as <integer>.

Examples

Accessible tabs · Test lab, runs the real runtime

set():when()Dynamic Selectors

Experimental · syntax may change between minor versions