No javascript or jQuery, just HTML and CSS to produce this demonstration.

This is the second update of this demonstration.

The first version was produced in 2012 when CSS only had :target to work with. The CSS to produce logic for this version was 774 lines.

An update in 2022 reduced the number of logic lines to 140 and used the new style :is().

This version has reduced the logic to 29 lines and uses :has() and :not(:has()). Also the only style change in this logic is {display:block;}.

The object of the puzzle is to move the three cars on the left to the right and the three cars on the right to the left.

1 The cars on the right can only move to the left and the cars on the left can only move to the right (no reversing).

2 You can click a car to move it to an adjacent space as long as the space is in the direction of travel.

3 You can overtake a car of the same color if there is a space in front of the car you are overtaking.

4 You can pass by an oncoming car if there is a space behind the oncoming car.

The stylesheet for this demonstration is in the page head, but if you use this, please keep my copyright comment with the stylesheet.