Exhibit 09 of 17
A four-bit adder
Set the bits of A and B. The sum, carries and all, is computed by selectors: the textbook carry-lookahead adder, written as CSS.
The exhibit
A + B
In decimal, by counters: + =
How it works
Each bit is a checkbox. For bit i, generate means both A and B have it (:has(#a1:checked):has(#b1:checked)), and propagate means either does (:has(#a1:checked, #b1:checked): a list inside :has() is “or”). A carry arrives at bit i if some lower bit generated one and every bit in between propagated it. The sum bit is A xor B xor carry, which is four short rules per bit.
Separately, CSS counters add the checked bits’ weights in decimal. The site’s check sets all 256 pairs and compares both answers with JavaScript.
The key CSS
Cut from this exhibit’s stylesheet as it is served; the full file is generated, and shown in part.
/* sum bit i is on when a xor b xor carry-in. carry into bit i: some lower bit j generated (a_j and b_j)
and every bit between j and i propagated (a_k or b_k). :has(#a1:checked, #b1:checked) is "a1 or b1". */
.adder:has(#a0:checked, #b0:checked):not(:has(#a0:checked):has(#b0:checked)) #s0,
.adder:has(#a1:checked, #b1:checked):not(:has(#a1:checked):has(#b1:checked)):not(:is(:has(#a0:checked):has(#b0:checked))) #s1,
.adder:is(:not(:has(#a1:checked, #b1:checked)), :has(#a1:checked):has(#b1:checked)):is(:has(#a0:checked):has(#b0:checked)) #s1 {
background: var(--acid);
}Accessibility
The bit switches are labelled checkboxes (“A, bit worth 4”). The binary answer is drawn in boxes and hidden from screen readers; the decimal line under it carries the same sum as generated content, which a screen reader can read but isn’t told about when it changes. A script could announce the sum.
Browser support
:has()Works in this browser.Not in this browser: Without :has() it can’t work; the page says so instead of half-working. Checked 2026-10-14: Chromium 149 yes, Firefox 141 yes.CSS countersWorks in this browser.Not in this browser: Universal. Checked 2026-10-14: Chromium 149 yes, Firefox 141 yes.