Specificity

Addressing Specificity Issues

Elevate CSS encourages concise, semantic class names by combining properties with modifiers. In some situations, this flexibility can lower selector specificity, which may let other styles override your intent.

To prevent conflicts, Elevate provides a context utility. It creates a temporary, named scope so that everything inside it gains higher, predictable specificity.

The context Property

Property	Expected Values	Example
ctx	PassThroughToken (for example, card)	ctx:card
ctx:end	None (closes the most recent scope)	ctx:end
ctx:end:Name	None (closes a specific scope)	ctx:end:card

Although the modifier accepts any string, use a name that clearly relates to the component you are styling. It keeps your markup self-documenting, and ctx:end:Name helps prevent mismatched nesting.

<div class="ctx:card w:full grid:cols-5-fr:rows-1:gap-d6 /lg/ grid:cols-12-fr">
  <div class="h:full bd:round-d4 col:x-start:y-between /lg/ col-spans:from-1:to-6">
    <h2 class="font:h5:regular:sans text:white mg-b:d4">
      Declaring Contexts Is Fun
    </h2>
    <p class="font:base:sans:regular text:grey+2:brief:snug mg-b:d4 /lg/ mg-b:0 ctx:end:card">
      Any class between ctx:card and ctx:end:card is now scoped to the card context and will not collide with styles elsewhere.
    </p>
  </div>
</div>

Place ctx:Name at the start of the section you want to isolate, then add ctx:end (or ctx:end:Name) where that section finishes. Every class between these two markers inherits the context, giving you a clean, conflict-free way to manage specificity.

Combinator directives (for example, @child+hover:[...]) require an active scope so they can target a specific boundary. In normal usage that means an active ctx: scope; inside env aliases they scope to the env element itself.