§ The add Command

§ Syntax

add <class-ref+ or attribute-ref or object-literal> [to <target-expression>] [when <expr>]

§ Description

The add command allows you to add a class (via a class ref), an attribute (via an attribute ref) or CSS attributes (via an object literal) to either the current element or to another element.

The when clause allows you to filter what elements have the class, property or CSS added in the target. The expression will be evaluated for each element in target and, if the result is true, the value will be added. If it is false, the value will be removed. The it symbol will be set to the current element, allowing you to express conditions against each element in target.

§ Examples

<div _="on click add .clicked">Click Me!</div>

<div _="on click add .clicked to #another-div">Click Me!</div>

<button _="on click add @disabled">Disable Me!</button>

<input
  type="color"
  _="on change add { --accent-color: my.value } to document.body"
/>

<button _="on click add [@disabled='true'] to <button/> when it is not me">Disable Other Buttons</button>

<button _"on click add .{'-foo-bar'} to #that">Add Class With A Dash Prefix!</button>