Customization
Customizing Selectors
A guide to adding custom selector tokens and aliases.
Overview
| Token | Selector Text |
|---|---|
:first | :first-child |
:last | :last-child |
:even | :nth-child(2n) |
:odd | :nth-child(odd) |
:nth | :nth-child |
:only | :only-child |
:rtl | :dir(rtl) |
:ltr | :dir(ltr) |
::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 |
::slider-runnable-track | ::-webkit-slider-runnable-track |
::resizer | ::-webkit-resizer |
::progress | ::-webkit-progress |
You can predefine selectors to simplify your markup. This is useful for common selectors that you use frequently, such as :first, :last, or :nth(). By defining these selectors, you can use them in your HTML without having to write the full selector each time.
export default { selectors: { ':headings': ':is(h1,h2,h3,h4,h5,h6)', ':first': ':first-child', }}Simplify your markup:
<div class="font:bold_:headings">…</div> <div class="font:bold_:is(h1,h2,h3,h4,h5,h6)">…</div><div class="font:bold_:first">…</div> <div class="font:bold_:first-child">…</div>Basic usage
Add a selector alias
Create a selector alias to simplify native CSS selectors.
export default { selectors: { ':first': ':first-child', }}Use the selector alias in your markup:
<div class="font:bold_:first">…</div>Add a selector token
Create a selector token to reuse it in your markup.
export default { selectors: { ':headings': ':is(h1,h2,h3,h4,h5,h6)', }}Use the selector token in your markup:
<div class="font:bold_:headings">…</div>