Skip to Content
DocumentationMagic '&' Identifier

Magic & Identifier

Sepcial & character in className

By default in AliasCSS the Element selector or Pseudo Element selector identifier used, are applied after the className i.e they are scoped to given className i.e in_div-bgc-red className div selector follows className _div-bgc-red div {...}, what if you want the div selector to come before the give class _div-bgc-red like div _div-bgc-red{...}. To acheive same feature, you can use & at the point where you want the selector to come before the className.

<h1 class="_div&-bgc-red">Hello World!</h1>
div ._div\&-bgc-red{ background-color:red }
Simple use case Example
<div class="--is(_html[class~=dark])&-bgc--dark-bg-color"> ....... </div>
:is( html[class~="dark"]) .--is\(_html\[class\~\=dark\]\)\&-bgc--dark-bg-color{ background-color: var(--dark-bg-color) }
Last updated on