Connect 4 Game Built with CSS :has()
Connect 4 with :has() by Jhey Tompkins on CodePen
Open on CodePen ↗A working 3D Connect 4 game by Jhey Tompkins, built with CSS and not a single line of JavaScript. It relies on the :has() selector.
Hidden checkboxes stand for the disc drops, CSS counters handle whose turn it is, and :has() checks for four in a row across, down and diagonally.
games:has():checkedcounter()
The modern.css newsletter
New CSS each month, and new things in the Atlas. 806 subscribers. Past issues
More like this
See all →- interactive
by Jhey TompkinsWorking stopwatch
A stopwatch that keeps real time, counted by CSS animationsinteractiveanimation:checkedcounter() - games
Best in Chromeby Ben EvansCTRL ALT ELITE
Elite from 1984, played with Alt and the original keysgames3D:checkedtransform-style - interactive
by Jhey TompkinsRussian doll bears
Open each bear to find a smaller one inside, then resetinteractiveart:checkedtransition