Combinators

Child Next sibling After sibling Descendant Self

Viewport

Viewport width

Device

Device type Hoverable

DOM Structure

Empty Not empty Even Odd First Not first Last Not last

Interaction

Hover Focus Active Visited

State

Valid Invalid Enabled Disabled Checked Unchecked Mode

Pseudo elements

Placeholder Selection Before After Thumb

Mode

Syntax

Class

Properties

mode-{name}:{...}

.mode-{name}.{...} { ... }

Parameters

name

string

Use mode-* selectors in combination with identically named mode-* classes for custom states. This allows you to conditionally apply utilities based on an element's mode.

It is primarily intended to simplify toggling user interface states via JavaScript.

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.

Only show an element when the mode-show class is added.

t1 mode-show:flex

.t1.mode-show\:flex.mode-show { display: flex; }

Mode selector with multiple words.

t1 mode-show-with-multiple-words:flex

.t1.mode-show-with-multiple-words\:flex.mode-show-with-multiple-words { display: flex; }

Only show an element when the grand-parent element has the mode-show class added.

t1 mode-show://flex

.mode-show > * > .t1.mode-show\:\/\/flex { display: flex; }

Only show the element when any of its ancestors has the mode-show class added.

t1 mode-show:/../flex

.mode-show .t1.mode-show\:\/\.\.\/flex { display: flex; }

Mode selectors may contain numbers and uppercase letters.

t1 mode-havingNumbers-1-2-3:flex

.t1.mode-havingNumbers-1-2-3\:flex.mode-havingNumbers-1-2-3 { display: flex; }

When using mode-open as a class, it does nothing. It is not namespaced, no CSS is generated and no error is thrown. It is used to match thus activate other mode selectors.

t1 mode-open

Mode class name with multiple segments.

t1 mode-class-name-with-multiple-segments

Mode class with numbers in it.

t1 mode-1-2-3