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



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