@state

Categories: css

Status: Implemented

Aliases: @pseudo

Sets modifying CSS selector (and optionally a title) for element state.

A special kind of modifier that doesn’t represent any valuable variation of element, but only some special state.

Commonly, it corresponds to some pseudo-class (or sometimes a regular class, or a combination of those), like :checked or .active.

Multiple states can be listed within the same section.

Handling in documentor

In StyleDoc documentor, state doesn’t produce separate showcase item (as opposed to @modifier, which does).

Instead, all state modifiers are sequentially applied within each showcase subsection.

Thus, base and each modifier also get all the states applied.

Not implemented This behavior can be disabled by setting documentor option.

Documentor limitation

Current version of StyleDoc documentor tool only supports CSS modifications that can by applied by creating or altering some HTML attribute(s).

That means, :hover, :focus or :empty states are useless for documentor, though :checked or :readonly will work (<input type="checkbox" checked>).

Examples

@base      input[type="checkbox"] Normal checkbox
@modifier  .large                 Large-sized checkbox
@state     :checked               Pre-checked checkbox
@state     :disabled              Unchangeble checkbox
@state     :disabled:checked      Unchangeble pre-checked checkbox

See also

• @pseudo
• @modifier