HTMLintroevergreen

data-* attributes and dataset

Stash your own data on any element.

Custom data-* attributes let you attach arbitrary state to HTML, read and write it from JavaScript via the dataset API, and hook into it from CSS with attribute selectors and attr().

Style and label by data attribute

HTML+CSS+JSintro

Press Run to execute

⌘+↩

Each <li> is colour-coded purely by its data-status value (green/gold/grey left borders, plus a faded "done" row) and prefixed with a gold DONE/WIP/TODO badge pulled from data-label via attr() — all driven by HTML data, with zero JavaScript.