Core Concepts

Hover and other states

Change styles when element states change.

Overview

In Sfumato, you can make any utility class conditional by prefixing it with a variant that specifies the state you want to target.

For example, to set the background color to sky-500 when an element is hovered, use the class hover:bg-sky-500:

Learn more

<div class="w-fit mx-auto grid">
    <a tabindex="0" class="bg-sky-700 hover:shadow-md hover:bg-sky-500 focus:outline-2 active:outline-2 focus:outline-offset-2 active:outline-offset-2 focus:outline-sky-700 active:bg-sky-700 text-white cursor-pointer rounded-full leading-none px-5 py-3 select-none">Learn more</a>
</div>

Try interacting with the anchor button above to see hover, focus, and active states.

Sfumato offers a wide range of variants to cover nearly any scenario, including:

Pseudo-classes such as :hover, :focus, and :first-child
Pseudo-elements like ::before, ::after, and ::placeholder
Media and feature queries, including responsive breakpoints, dark mode, and prefers-reduced-motion
Attribute selectors, for example [dir="rtl"] and [open]
Child and descendant selectors like & > and &

You can even combine multiple variants to target highly specific situations—for instance, changing the background color on hover, but only when it is also not focused:

<button class="hover:not-focus:bg-fuchsia-500 ...">
    Lean more
</button>

Quick reference

Pseudo-classes

Following are state pseudo-class variants:

Variant CSS

*  (children)

& > *

** (descendants)

& *

active

&:active

after

&::after

aria-busy

&[aria-busy="true"]

aria-checked

&[aria-checked="true"]

aria-disabled

&[aria-disabled="true"]

aria-expanded

&[aria-expanded="true"]

aria-hidden

&[aria-hidden="true"]

aria-pressed

&[aria-pressed="true"]

aria-readonly

&[aria-readonly="true"]

aria-required

&[aria-required="true"]

aria-selected

&[aria-selected="true"]

autofill

&:autofill

backdrop

&::backdrop

before

&::before

checked

&:checked

closed

&:is([closed],:popover-closed,:closed)

data-*, data-[]

&[data-*] /* data attribute exists */

default

&:default

disabled

&:disabled

empty

&:empty

enabled

&:enabled

even

&:nth-child(even)

file

&::file-selector-button

first

&:first-child

first-letter

&::first-letter

first-line

&::first-line

first-of-type

&:first-of-type

focus

&:focus

focus-visible

&:focus-visible

focus-within

&:focus-within

hover

&:hover

in-range

&:in-range

indeterminate

&:indeterminate

inert

&[inert]

invalid

&:invalid

last

&:last-child

last-of-type

&:last-of-type

ltr

&:where(:dir(ltr),[dir=ltr],[dir=ltr] *)

marker

&::marker

odd

&:nth-child(odd)

only

&:only-child

only-of-type

&:only-of-type

open

&:is([open],:popover-open,:open)

out-of-range

&:out-of-range

placeholder

&::placeholder

placeholder-shown

&:placeholder-shown

read-only

&:read-only

required

&:required

rtl

&:where(:dir(rtl),[dir=rtl],[dir=rtl] *)

selection

&::selection

target

&:target

valid

&:valid

visited

&:visited

Excluding states

Use the not-{pseudo-class} variant to set styles when a state is not true, like "not hover".

Variant CSS

not-active

&:not(:active)

not-after

&:not(::after)

not-aria-busy

&:not([aria-busy="true"])

not-aria-checked

&:not([aria-checked="true"])

not-aria-disabled

&:not([aria-disabled="true"])

not-aria-expanded

&:not([aria-expanded="true"])

not-aria-hidden

&:not([aria-hidden="true"])

not-aria-pressed

&:not([aria-pressed="true"])

not-aria-readonly

&:not([aria-readonly="true"])

not-aria-required

&:not([aria-required="true"])

not-aria-selected

&:not([aria-selected="true"])

not-autofill

&:not(:autofill)

not-backdrop

&:not(::backdrop)

not-before

&:not(::before)

not-checked

&:not(:checked)

not-closed

&:not(:is([closed],:popover-closed,:closed))

not-data-*, not-data-[]

&:not([data-*]) /* data attribute does not exist */

not-default

&:not(:default)

not-disabled

&:not(:disabled)

not-empty

&:not(:empty)

not-enabled

&:not(:enabled)

not-even

&:not(:nth-child(even))

not-file

&:not(::file-selector-button)

not-first

&:not(:first-child)

not-first-letter

&:not(::first-letter)

not-first-line

&:not(::first-line)

not-first-of-type

&:not(:first-of-type)

not-focus

&:not(:focus)

not-focus-visible

&:not(:focus-visible)

not-focus-within

&:not(:focus-within)

not-hover

&:not(:hover)

not-in-range

&:not(:in-range)

not-indeterminate

&:not(:indeterminate)

not-inert

&:not([inert])

not-invalid

&:not(:invalid)

not-last

&:not(:last-child)

not-last-of-type

&:not(:last-of-type)

not-ltr

&:not(:where(:dir(ltr),[dir=ltr],[dir=ltr] *))

not-marker

&:not(::marker)

not-odd

&:not(:nth-child(odd))

not-only

&:not(:only-child)

not-only-of-type

&:not(:only-of-type)

not-open

&:not(:is([open],:popover-open,:open))

not-out-of-range

&:not(:out-of-range)

not-placeholder

&:not(::placeholder)

not-placeholder-shown

&:not(:placeholder-shown)

not-read-only

&:not(:read-only)

not-required

&:not(:required)

not-rtl

&:not(:where(:dir(rtl),[dir=rtl],[dir=rtl] *))

not-selection

&:not(::selection)

not-target

&:not(:target)

not-valid

&:not(:valid)

not-visited

&:not(:visited)

Styling with utility classes

Responsive design