Building Connect 4 in Pure CSS: Rethinking CSS as a Programming Language

An Old Question Gets a New Answer: Is CSS a Programming Language?

"CSS is not a programming language" — this is probably one of the most classic debates in the front-end development community. However, when you see someone build a fully functional Connect 4 game using nothing but CSS, you might want to reconsider.

A well-known front-end developer shared this pure CSS Connect 4 project — created by developer Jay — on YouTube, sparking widespread attention. The project contains zero lines of JavaScript, relying entirely on HTML and CSS to implement an interactive board game — complete with dropping pieces, turn switching, and even diagonal win detection.

CSS-Only Games: An Underappreciated Technical Domain

Many people may not realize that "CSS-only games" is actually a niche but active area of technical exploration. Developers leverage CSS features like the Checkbox Hack, the :checked pseudo-class selector, and the ~ sibling combinator to implement complex interactive logic without any JavaScript whatsoever.

CSS-only games aren't a recent phenomenon — they have over a decade of history. Early landmark projects include the pure CSS Tic-Tac-Toe that appeared around 2011, one of the first CSS games to gain widespread attention. Since then, developers have created CSS-only Minesweeper, CSS-only chess interfaces, and even simple CSS-only RPGs. CodePen hosts an active CSS-only community that regularly holds creative challenges, producing a wealth of astonishing work. The complexity of these projects has steadily increased: from initially handling simple binary states to now managing dozens of interrelated state variables. The CSS Connect 4 game is particularly noteworthy because diagonal win detection requires cross-row, cross-column state correlation — something extremely challenging to implement at the CSS selector level. It demands carefully designed HTML structures that keep relevant elements in DOM positions where they can be associated through selectors.

What makes these projects so impressive is that they shatter conventional assumptions about CSS. CSS is fundamentally a declarative styling language, but through clever combinations of its selectors and state management capabilities, developers can simulate conditional logic and state transitions similar to those found in programming languages. This touches on an important concept in programming language classification: a declarative language describes what you want, not how to do it — developers simply declare the desired result, and the underlying engine determines the execution process. SQL, HTML, and CSS all fall into this category. In contrast, imperative languages like JavaScript, Python, and C require developers to describe the program's execution flow step by step. This classification lies at the heart of the debate over whether CSS qualifies as a programming language: traditional programming languages typically feature imperative characteristics like variables, loops, and conditional branching, which CSS lacks as explicit constructs. However, with the introduction of CSS Custom Properties, the calc() function, container queries, and other new features, CSS is gaining increasingly powerful dynamic computation capabilities, blurring the line between declarative and imperative.

Core Features and Implementation Principles of CSS Connect 4

Based on the demo, this pure CSS Connect 4 game includes the following complete features:

• Piece placement: Players can choose a column to drop their piece
• Turn alternation: Red and yellow pieces automatically alternate
• Win detection: Supports four-in-a-row detection in horizontal, vertical, and even diagonal directions
• 3D visual effects: The board presents a three-dimensional visual style

The core technical implementation relies on several key CSS features:

State Management: The Checkbox Hack

Hidden <input type="checkbox"> or <input type="radio"> elements, combined with <label> tags, enable click interactions. Each click effectively toggles a checkbox's checked state, and CSS's :checked pseudo-class can alter the page's display based on that state. This is the cornerstone of pure CSS interactivity.

The Checkbox Hack exploits the native behavior of HTML form elements: when a user clicks a label associated with a checkbox, the browser automatically toggles the checkbox's checked state — this is built-in browser behavior that requires no JavaScript. The key insight is that CSS's :checked pseudo-class selector can detect this state change, and when combined with the general sibling combinator (~), it can affect the styles of any sibling element that follows the checkbox in the DOM. This technique was widely discovered and adopted by the front-end community around 2010, initially used to build pure CSS dropdown menus, accordion components, and tab switches. As developers continued to explore, the technique was pushed to its limits, eventually being used to build complete games. Notably, the mutual exclusivity of radio buttons is especially useful in game development — only one radio button in a group can be selected at a time, which naturally models constraints like "only one piece can occupy a given position."

Conditional Logic: Selector Combinations

CSS's sibling combinator (~) and attribute selectors can be combined to create complex conditional logic. For example, when multiple checkboxes at specific positions are simultaneously checked, a "victory" state style can be triggered. For Connect 4, this means exhaustively enumerating all possible winning combinations — horizontal, vertical, and both diagonal directions — resulting in a massive number of CSS selector rules.

The CSS selector system is itself a powerful pattern-matching engine. Its operation is essentially pattern matching against the DOM tree: it defines a set of conditions (element types, class names, attribute values, hierarchical relationships, states, etc.), and the browser engine traverses the DOM tree to find all matching nodes and apply styles. This is conceptually similar to how regular expressions match strings or how database queries match records. The expressive power of modern CSS selectors has become remarkably rich: the introduction of the :has() selector (often called the "parent selector") was a milestone, allowing elements to be selected based on the state of their children or descendants, dramatically expanding CSS's conditional capabilities. The :is() and :where() pseudo-classes simplify the writing of complex selectors. The combination of these new features enables CSS to express increasingly complex logical conditions, forming the technical foundation that allows CSS-only games to continually push the boundaries of complexity.

Visual Presentation: CSS 3D Transforms

The board's 3D effect leverages CSS properties like transform and perspective, making the entire game interface feel more dynamic and engaging.

Technical Significance: Redefining the Boundaries of CSS

The value of projects like this goes far beyond showing off. They reveal an important truth: CSS's computational power is far greater than most people imagine.

From a computational theory perspective, CSS3 combined with HTML's checkbox mechanism can effectively simulate a finite state machine. A Finite State Machine (FSM) is a computational model that has a finite number of states and transitions between them based on inputs. A Connect 4 board has 42 cells, each with three possible states (empty, red, yellow). While the total number of possible board states is enormous, it is still finite, making it modelable as an FSM.

Although CSS is not Turing-complete (it lacks loops and general-purpose variables), it is perfectly capable of handling problems with finite state spaces — such as board games. Turing completeness is a higher bar, requiring a system to simulate any Turing machine's computation — which typically demands unlimited storage, conditional branching, and looping capabilities. CSS lacks true loop structures and general variable assignment, so it is not considered Turing-complete. Interestingly, however, researchers demonstrated in 2023 that CSS combined with specific user interaction patterns can theoretically achieve Turing completeness — but this requires an infinitely large HTML document and continuous user participation, placing it firmly in the realm of theoretical exploration rather than practical application.

Of course, this doesn't mean we should build complex applications in pure CSS for production environments. But these experimental projects do offer several valuable insights:

1. Never underestimate the potential of any technical tool — CSS's selector system is itself a powerful pattern-matching engine
2. Constraints breed creativity — it's precisely the restriction of "no JavaScript allowed" that forces developers to deeply explore every CSS feature
3. Understanding fundamentals matters — developers who can create work like this possess a depth of understanding of the CSS specification that far exceeds the norm

Conclusion

Is CSS really a programming language? This question may never have a definitive answer. But when a "stylesheet language" can implement complete game logic, it at least proves that CSS is far more powerful than many give it credit for. If you can build things like this with CSS, then it might be more of a programming language than you think.

For front-end developers, rather than getting caught up in definitional debates, it's better to draw inspiration from these remarkable projects and rediscover the true potential of the tools at your fingertips.