Exhibit 17 of 17
Rule 110
Each row is a generation of Rule 110, worked out by CSS from the row above. CSS decides every cell; you press Step to make each decision stick. Edit the seed in the top row first, if you like.
The exhibit
How it works
Every cell of every generation is a pair of checkboxes, “on” and “off”, in one long flat list. Because the list is flat, a cell’s three parents in the row above are always the same number of boxes back (34, 32 and 30 here), so one selector made of sibling combinators per row of the rule’s table finds the right box for the next cell: .on:checked + * + .on:checked + * + .on:not(:checked) + … + .on is “on, on, off above me”. That box, and only that one, sits under the Step button. Press it and the cell is decided; the next cell’s box appears.
The picture is drawn from the same boxes, and counters keep the tally. The site’s check presses Step through several generations from several seeds, with the mouse and with the keyboard, and compares every row with Rule 110 computed in JavaScript, in the test only.
Turing complete? Rule 110 is: Matthew Cook proved it can simulate any computation, given an infinite row and a suitable repeating background. CSS here computes each step correctly, but it can’t check a box, so it can’t take a step on its own; you are the clock. And 16 cells is a finite machine. More on that.
The key CSS
Cut from this exhibit’s stylesheet as it is served; the full file is generated, and shown in part.
/* A cell's parents are 2N+2, 2N and 2N−2 boxes back (N = 16 cells per generation, two boxes per cell), and the
previous cell is 2 back. So one selector per row of the rule's table finds the right box for the next cell. */
/* 110 → 1: the on box is the right one */
.x-rule-110 .on:checked + * + .on:checked + * + .on:not(:checked) + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + .on:checked + .off + .on:not(.c0):not(.cL):not(:checked):has(+ .off:not(:checked)),
/* 111 → 0: the off box is the right one */
.x-rule-110 .on:checked + * + .on:checked + * + .on:checked + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + .on:checked + .off + .on:not(.c0):not(.cL):not(:checked) + .off:not(:checked) { visibility: visible; }
/* …and 30 more like these: the other neighbourhoods, the two edges, and the previous cell set off */Accessibility
The Step button is a real checkbox under the visible face, named for what it does (“Step: generation 3, cell 5 turns on”), so the keyboard (Tab, Space, repeat) and screen readers can drive the whole thing, and hear each result. The grid itself is a picture with no text equivalent; a script could describe each row. The seed cells are labelled checkboxes until the first step.
Browser support
:checked + ~Works in this browser.Not in this browser: Nothing to fall back from; every browser has had it for years. Checked 2026-10-14: Chromium 149 yes, Firefox 141 yes.