Extreme CSS3 Tic Tac Toe
In recent weeks we've seen more and more examples which used
input:checked. Since we've seen the possibilities of
How does it work!?
We start by adding 18 checkboxes to the board (9 for each player) and link them
to 18 label elements. The label elements are the actual ticks on the playing board. We need to do this as we can't properly style the checkboxes in all browsers. Another advantage is
that we can use the general sibling selector (
~) to select the labels in different situations.
Each field of the playing board consists of 2 labels (1 for each player) layered over each other. On each turn we change the
z-index so that only the top-most (the current player) is clickable. After each click, we "disable" the checkbox by setting
pointer-events: none on both labels.
Turns are defined by matching the amount of
input:checked following each other. This means that
input:checked ~ input:checked is the third turn (= second turn of player 1).
The winning states are defined as a series of following checkboxes. To match the top-row for player one, we use the selectors below.
input.p1:nth-child(1):checked ~ input.p1:nth-child(3):checked ~ input.p1:nth-child(5):checked
..but should we?
No, we probably shouldn't misuse checkboxes for this kind of thing, as the example above has no semantic value at all. Nevertheless the techniques used here can be useful in a lot of other situations.
Show us the source!
Feel free to look around the different source files we used for this example.
- The CSS