Magic & Identifier

AliasCSS uses & when you want the generated selector to appear before the class name instead of after it.

By default, element selectors and pseudo-element selectors are scoped after the class name:

<div class="_div-bgc-red"></div>

This compiles to:

._div-bgc-red div {
  background-color: red;
}

If you want the selector to come before the class name, place & where the class should be inserted.

Basic syntax

_selector&-utility

Example:

<h1 class="_div&-bgc-red">Hello World!</h1>

Compiled CSS:

div ._div\&-bgc-red {
  background-color: red;
}

In this case, div comes before the class selector instead of after it.

Why & exists

The & character gives you more control over how AliasCSS builds selectors.

Use it when:

• you want the target selector to appear before the class name,
• you are working with nested selector structures,
• you need more advanced control over contextual styling.

This is especially useful when combining AliasCSS with parent-level state or document-level selectors.

Example: dark mode context

A common use case is styling based on a root-level condition.

Example

<div class="--is(_html[class~=dark])&-bgc--dark-bg-color">
  ...
</div>

Compiled CSS

:is(html[class~="dark"]) .--is\(_html\[class\~\=dark\]\)\&-bgc--dark-bg-color {
  background-color: var(--dark-bg-color);
}

This means the utility applies only when the page is in dark mode.

Mental model

Think of & as a selector anchor.

• Without &, the selector is attached after the class.
• With &, you can move the selector before the class.
• This gives you more control over parent/child and contextual selector placement.

Practical example

<div class="--is(_html[class~=dark])&-bgc--dark-bg-color">
  Content
</div>

This is useful when:

• the utility should only apply inside a special page state,
• the state lives on a parent or root element,
• you want to keep the class name itself as the styling entry point.

Best practices

• Use & only when the default selector placement is not enough.
• Keep selector chains readable.
• Prefer simpler selector patterns for everyday styling.
• Reserve this pattern for advanced contextual rules.

Quick reference

_div-bgc-red              -> selector follows the class name
_div&-bgc-red             -> selector appears before the class name
--is(_html[class~=dark])&-bgc--dark-bg-color
                          -> contextual selector before the class anchor

Notes

• This pattern is advanced.
• It is most useful when working with root-level conditions or nested selector logic.
• For most cases, the default _selector-utility form is easier to read and maintain.