Demo 4: Named States / Cyclical control (CSS Toggles)

How

Add a toggle-value to the toggle shorthand to give it a specific value, e.g. toggle-trigger: colors green.

Control cycling with the toggle-overflow property (default value: cycle). Set a toggle-trigger property with no specific trigger-value to advance the toggle, e.g. toggle-trigger: colors;

Code

HTML

<div class="colors">
    <button>Cycle</button>
    <button class="grape">Grape</button>
    <button class="green">Green</button>
    <button class="blue">Blue</button>
    <button class="red">Red</button>
</div>
<output class="show-colors">I am affected by the colors cycle</output>

CSS

.colors {
    toggle-root: colors [grape green blue red] at blue;
}

.colors button {
    toggle-trigger: colors;
}

/* for each color */
.colors button.grape {
    toggle-trigger: colors grape;
}

/* for each color */
:is(.show-colors, button.grape):toggle(colors grape) {
    background-color: rebeccapurple;
}

Demo (by Oddbird, slightly adjusted)

ℹ Your browser does not support CSS Toggles. To cater for this a polyfill has been loaded.

I am affected by the colors cycle