Skip to content
Utility First, Design Driven

Supported Selectors

Elevate uses the @state:[...] flag to generate pseudo-classes and pseudo-elements directly from your class list. Inside the brackets, use underscores instead of spaces so the state block remains a single class token.

Pseudo-classes

Any pseudo-class token you place in the state chain is passed through without validation. Examples include hover, focus, focus-visible, active, disabled, checked, first-child, last-child, and empty.

<div class="@hover+focus-visible:[bg-color:indigo_text:white]"></div>

Pseudo-elements

Supported pseudo-elements are: before, after, placeholder, marker, selection, backdrop, file-selector-button.

Only one pseudo-element is allowed per chain.

<div class="@hover+before:[bg-color:indigo]"></div>

State Chaining

Use + to chain states in a single block.

<button class="@hover+active:[bg-color:indigo_text:white]"></button>

Combinator Directives

Elevate supports selector combinators through directives: @desc (alias: @descendants), @child (alias: @children), @sibling (adjacent), @general-sibling (alias: @siblings), @ancestor.

Only one combinator directive is allowed per chain. Combinator directives require an active scope (either a ctx: boundary or an implicit env alias scope) so they can target a specific boundary, and the combinator can appear anywhere in the chain.

Notes:

  • @children and @descendants target all matching elements inside the ctx scope (direct children or any depth).
  • @siblings targets all following siblings of the ctx anchor (general sibling ~ behavior).
  • @ancestor styles the ctx element when it contains the target (uses :has(...), so modern browser support is required).
<div class="ctx:card">
  <button class="@child+hover:[bg-color:indigo_text:white] ctx:end:card">Hover me</button>
</div>
<div class="ctx:card @children:[bg-color:grey-2_text:white] pd:d3">
  <div>Child A</div>
  <div>Child B</div>
</div>
<div class="ctx:end:card"></div>


<div class="ctx:sibs @siblings:[text:orange]">Anchor</div>
<div>Sibling A</div>
<div>Sibling B</div>
<div class="ctx:end:sibs"></div>

Not Supported

Nested state blocks like @child:[@hover:[...]] and raw CSS selector strings are not supported. State tokens that require parentheses (for example, nth-child(2)) are not currently supported.