HTML5 and CSS3 Advent 2011

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 :checked, we've played with the idea of creating a CSS3-only Tic-Tac-Toe game. And here it is, fresh from the oven; and it uses no javascript at all!

Let's play!

And the winner is:
Player 1
Player 2

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
  • Seriously, there is no javascript
Check out our all new HTML & CSS Advent 2012