It’s supposed to be used by 2 people taking turns (click twice for the other sign).
Basic idea:
- It uses hidden checkboxes for the states (indeterminate means empty, checked means X, not checked means O) and labels for the visible part
- When it starts, a little script (the only js in the demo) sets the states of all checkboxes to indeterminate.
- It uses the
:checkedand:indeterminatepseudo-classes and sibling combinators to change the states and show who won. - Once somebody clicks on a checkbox (or in this case, its label) they change it’s state from indeterminate to either checked or not checked, depending on how many times they click on it.