State Selectors

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

Features

<!-- Set foreground to blue on hover -->
<div class="fg:blue:hover">
 
<!-- Set border to red on input invalid -->
<input class="border:red:invalid" />
 
<!-- Set background to white on expanded -->
<details class="bg:white[open]" open>
…

Master CSS allows you to suffix, such as pseudo-classes, pseudo-elements, compound states, etc., to apply styles on different conditions.

Multiple states

Master CSS allows the same property to have different states on the same element.

<h2 class="font:18 font:24@sm font:32@md …">

Stackable states

Master CSS allows the same style declaration with multiple state conditions.

<div class="bg:blue-20:hover@md@dark …">

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, 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>

Form validations

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" />

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

Class selectors