State Selectors

Apply styles based on user interactions, element states, and other states.

Overview

<div class="fg:blue:hover"></div><input class="border:red:invalid" /><details class="bg:white[open]" open></details>

Master CSS provides a powerful and flexible way to style elements using selectors. These selectors allow you to apply styles based on the state of an element, such as :hover, :active, :focus, or based on attributes like [disabled] or [open].

<h2 class="font:18 font:24:hover font:32:active …">

You can also combine selectors, stack multiple states to create dynamic and interactive designs.

<div class="bg:blue-20:hover:not(.active) …">

With support for all CSS selectors, Master CSS ensures that you can achieve precise and efficient styling for any scenario.

For readability, Master CSS uses selectors in the configuration to create aliases for common selectors.

<div class="mt:3x:first"><div class="mt:3x:first-child"><div class="mt:3x:odd"><div class="mt:3x:nth-child(2n)"><div class="mt:3x:rtl"><div class="mt:3x:dir(rtl)">

Also, you can use them to create custom tokens for any selector you want.

<div class="font:semibold_:headings"><div class="font:semibold_:is(h1,h2,h3,h4,h5,h6)">

Basic selectors

Master CSS supports all CSS selectors, including:

* — Universal

Style all elements using the universal selector *.

<div class="bg:blue>*">    <div>hit</div>    <div>hit</div>    ...</div>

element

Style elements based on their type using the type selector.

<div class="bg:blue>span">    <span>hit</span></div>

Use :is() or :where() to resolve type selector conflicts.

<span class="bg:blue:is(span)"></span>

.class

Style elements using custom classes like .active to indicate their states.

<div class="bg:blue.active active">...</div>

#id

Style elements using IDs like #nav to indicate their states.

<nav id="nav" class="bg:blue#nav">...</nav>

[attribute]

Style elements using attributes like [disabled] to indicate their states.

<button class="bg:blue[disabled]" disabled>Submit</button>

:pseudo-class

Style elements using pseudo-classes like :hover to indicate their states.

<button class="bg:blue:hover">Submit</button>

::pseudo-element

Style elements using pseudo-elements like ::before and ::after to add decorative content.

<div class="content:'“'::before">quotes</div>

Combinators

Master CSS supports the following combinators to select elements based on their relationships in the DOM tree:

_ — Descendant

Style elements that are descendants of a specified element using the descendant combinator _ to proxy the space.

<div class="bg:blue_div">    <div>hit</div>    <div>hit        <div>hit            <div>hit</div>        </div>    </div></div>

> — Child

Style elements that are direct children of a specified element using the child combinator >.

<div class="bg:blue>div">    <div>hit</div></div>

+ — Adjacent sibling

Style elements that are adjacent siblings of a specified element using the adjacent sibling combinator +.

<div class="bg:blue+div"></div><div>hit</div>

~ — General sibling

Style elements that are siblings of a specified element using the general sibling combinator ~.

<div class="bg:blue~div"></div><div>hit</div><div>hit</div><div>hit</div>

Selector groups

Style multiple elements using the selector list separator ,.

<div class="content:'“'::before,::after">quotes</div>

@layer base, theme, preset, components, general;@layer general {    .content\:\'“\'\:\:before\,\:\:after::before,    .content\:\'“\'\:\:before\,\:\:after::after {        content: '“'    }}

You can use with any combinator. For example, select direct children of multiple elements.

<div class="block>div,>span">hit</div>

@layer base, theme, preset, components, general;@layer general {    .block\>div\,\>span>div,    .block\>div\,\>span>span {        display: block    }}

Pseudo-classes

:hover, :active, :focus

Style elements with different interactive appearances on :hover, :active, and :focus.

Try clicking the button to see states change

<button class="bg:indigo bg:pink:hover bg:purple:active">Submit</button>

:first, :last, :odd, :even

Select and style elements using :first, :last, :odd, :even, and :nth(N) shorthands.

<ul class="…">    <li class="bg:slate-5:even@light bg:gray-90:even@dark …">…</li></ul>

:valid, :invalid, :required

Style controls using :valid, :invalid, :required based on form validations.

Try typing co as a valid email address

<input class="b:red:invalid b:green:valid b:1|solid …" type="email" />

:disabled

Style elements using :disabled to indicate disabled states.

<button class="opacity:.5:disabled" disabled>Submit</button>

:checked, :indeterminate

Style checkboxes and radio buttons using :checked and :indeterminate to indicate their states.

<input class="bg:indigo:checked …" type="checkbox" checked />

:rtl, :ltr

Style elements based on their text direction using :rtl (:dir(rtl)) and :ltr (:dir(ltr)).

<div class="mr:2x:rtl">...</div>

:has()

Style elements based on their children using :has().

<div class="bg:blue:has(.active)">    <div >Item 1</div>    <div class="active">Item 2</div>    <div >Item 3</div></div>

:not()

Style elements using :not() to exclude certain elements from being styled.

<div class="fg:green:not(.active) active">...</div>

:of()

The only proprietary selector introduced by Master CSS. It resembles the native :has() pseudo-class but extends its capabilities with upward selection, enabling styles to be conditionally applied based on the state of parent, ancestor, or adjacent elements.

Style the element based on its ancestor.

<div class="active">    <div>        <div class="hidden:of(.active)">hidden</div>    </div></div>

Style the element based on its parent.

<div class="active">    <div class="hidden:of(.active>)">hidden</div></div>

Style the element based on its previous adjacent sibling.

<div class="active"></div><div class="hidden:of(.active+)">hidden</div>

Style the element based on all of its preceding siblings.

<div class="active"></div><div></div><div class="hidden:of(.active~)">hidden</div>

Cannot use combinators or pseudo-elements before ':of()'.

<div class="hidden_div::before:of(.active)">hidden</div>

Pseudo-elements

::before, ::after

Attach pseudo-elements to an element using ::before and ::after.

<div class="content:open-quote::before content:close-quote::after …">    Be the change you wish to see in the world.</div>

::scrollbar

Beautify the scrollbar of an element using ::scrollbar, ::scrollbar-thumb, ::scrollbar-track, ::scrollbar-button, ::scrollbar-corner and ::scrollbar-track-piece shorthand.

Try scrolling horizontally and interact with the scroll bar

<div class="size:6::scrollbar bg:gray/.2::scrollbar-thumb overflow-x:auto …">

Attribute selectors

[open]

Style <details> elements based on their open attribute using [open]. This allows you to apply specific styles when the <details> element is expanded.

<details class="bg:white[open]" open>    <summary>Details</summary>    <p>Details content goes here.</p></details>

[aria-<key>=<value>]

Style elements based on their ARIA attributes using [aria-<key>=<value>].

<div class="bg:blue[aria-checked=true]" aria-checked="true">...</div>

[data-<key>=<value>]

Style elements based on their custom data attributes using [data-<key>=<value>].

<div class="bg:blue[data-active]" data-active>...</div>

[<attr>=<value>]

Style elements based on their attribute values.

<input class="b:blue[type=checkbox]" type="checkbox" />

[<attr>^=<value>]

Style elements based on their attribute values that start with a specific string.

Links that start with http.

<a class="content:'↗'[href^=http]::after" href="https://…">External</a>

[<attr>$=<value>]

Style elements based on their attribute values that end with a specific string.

<a class="content:'⬇'[href$='.pdf']::after" href="https://….pdf">PDF</a>

[<attr>*=<value>]

Style elements based on their attribute values that contain a specific string.

<div class="bg:yellow[title*=master]" title="mastercss">...</div>

[<attr>|=<value>]

Style elements based on their attribute values that start with a specific string and are followed by a hyphen.

<div class="bg:blue[lang|=en]" lang="en-US">...</div>

[<attr>~=<value>]

Style elements based on their attribute values that is a whitespace-separated list of words, one of which is exactly value.

<div class="bg:blue[title~=css]" title="master css">...</div>