Syntax Tutorial

State Selectors

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

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

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.

  • avatar
    Dressing Table
    A dress-up space.
  • avatar
    Double Bed
    A sweet moment for everyone.
  • avatar
    Sofa
    A place to be lazy all day.
  • avatar
    Cabinet
    Secrets are hidden here.
  • avatar
    Desk
    A good partner in the office.
<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.

Be the change you wish to see in the world.
<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

Cat
Bear
Fox
Dog
Bunny
Camel
Bird
Chicken
Crocodile
Elephant
Frog
<div class="size:6::scrollbar bg:gray/.2::scrollbar-thumb overflow-x:auto ">

Attribute selectors


Class selectors

Getting Started
Introduction to Master CSS

The CSS language and framework for rapidly building modern and high-performance websites.

© Aoyue Design LLC.