Custom Syntax

Selectors

Customizing selectors for your design system.

🚧This page is still under construction and some content may not be complete.

export default {
    selectors: {
        _headings: '_:where(h1,h2,h3,h4,h5,h6)'
    }
}

Simplify your existing markup in HTML:

<article class="font:bold_:where(h1,h2,h3,h4,h5,h6)">…</article>
<article class="font:bold_headings">…</article>

Basic usage

🚧

Selectors	Replace with
`::scrollbar`	`"::-webkit-scrollbar"`
`::scrollbar-button`	`"::-webkit-scrollbar-button"`
`::scrollbar-thumb`	`"::-webkit-scrollbar-thumb"`
`::scrollbar-track`	`"::-webkit-scrollbar-track"`
`::scrollbar-track-piece`	`"::-webkit-scrollbar-track-piece"`
`::scrollbar-corner`	`"::-webkit-scrollbar-corner"`
`::slider-thumb`	`["::-webkit-slider-thumb", "::-moz-range-thumb"]`
`::slider-runnable-track`	`["::-webkit-slider-runnable-track", "::-moz-range-track"]`
`::meter`	`"::-webkit-meter"`
`::resizer`	`"::-webkit-resizer"`
`::progress`	`"::-webkit-progress"`
`:first`	`":first-child"`
`:last`	`":last-child"`
`:even`	`":nth-child(2n)"`
`:odd`	`":nth-child(odd)"`
`:nth(`	`":nth-child("`
`:only`	`":only-child"`

View the full source code