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, someUniqueString)	ctx:someUniqueString
ctx:end	None	ctx:end

Although the modifier accepts any string, use a name that clearly relates to the component you are styling. It keeps your markup self-documenting.

<div class="ctx:someComponent w:full col:x-start:y-end /lg/ grid:cols-5-fr:rows-1:gap-d12">
  <div class="h:full bd:round-d6 col:x-start:y-between /lg/ col-spans:from-1:to-3">
    <h2 class="font:h6:regular:sans text:fwhite mg-b:d6 /lg/ mg-b:c3">
      Declaring Contexts Is Fun
    </h2>
    <p class="font:h6:sans:regular:tight text:findigogray:brief mg-b:d6 /lg/ mg-b:0 ctx:end">
      Any class between ctx:someComponent and ctx:end is now scoped to the someComponent context and will not collide with styles elsewhere.
    </p>
  </div>
</div>

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