Doing it with style
It has been a few years since I produced my first version of this game for player versus computer - Tic-Tac-Toe version 1. So I thought that I would bring this up to date using the latest CSS3 styling.
This is just a standard tic-tac-toe game where you start first as 'noughts' and the computer plays 'crosses'.
As with the game of player v player it is virtually impossible to win, but I have styled this so that there are two combinations of moves for 'noughts' to win.
You can find these moves by trial and error or analyse the stylesheet to find the correct combinations.
Absolutely no javascript or any other scripting language has been used, just HTML and the latest CSS attribute selectors with the negation pseudo-class, :not(X).
Date 25th September 2014
Stylesheet reduced from 400 lines to 250 lines.
For anyone who is interested, Firefox and 'webkit' browsers support their own versions of the CSS4 selector :matches. Firefox uses :-moz-any and webkit uses :-webkit-any. So I have produced a further version (for webkit browsers) which cuts down the stylesheet even further and can be seen here Tic-Tac-Toe using CSS4 :any (:matches)
Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.
This demonstration can be used subject to the following terms and conditions.
Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.