No javascript or jQuery, just HTML and CSS to produce this version of tic-tac-toe (noughts and crosses OXO).

The last time I tackled this was exactly 2 years ago (4th March 2022) and CSS has come a long way since then.

This version uses the latest CSS 'styles' :has() :not(:has) and & (nesting styles).

It also includes a method to reduce the number of start positions from 9 to 3, thus reducing the number of calculations by 2/3!!

The CSS just calculates the start positions from the top row left square, the top row middle square and the centre square.

So if you start on the top row right square, the grid is rotate clockwise by 90 degrees and the top right square becomes the top left square.

If you start on the bottom row right square, the grid is rotated 180 degrees, and if you start on the bottom row left square the grid is rotate 270 degrees.

Similarly if you start on the middle row right square, the grid is rotated 90 degrees and this becomes position top row middle square.

The same applies to the bottom row middle square and the middle row left square, with rotations of 180 degrees and 270 degrees.

To the player, the rotations are instant and it looks like the chosen square is selected.

If you want to copy this method, please keep my copyright comment in the stylesheet.