CSS as formal language for pattern matching trees (2026)

By Xah Lee. Date: .

CSS as a formal language, the rise of specificity

CSS is very complex n interesting. Let me slop finger type it out now quick extempore.

Selectors, r patterns that match tree. Tree is the html nodes.

A single selector can match many nodes. 2 selectors can have overlapping results. E.g. div vs div.x . When overlap, rule may clash.

e.g. .x {color:red} vs p {color:black} on <p class=x>.

Typical css use hundreds of selectors. You need to resolve the clash.

Typically, later in source code overrides. But in css, that's silly, cuz obviously we want class spec to have priority.

So u have the concept of specificity. ID first, then class, then rest. But u need to cover all possible selectors. U need to, classify all selector patterns, and design, give them priority order aka the specificity.

Ok. That's it for now. There's also the selector syntax precedence issue thats very interesting and css seems a abomination or genius design, i am not sure which yet.

CSS as formal language: pattern matching on trees

CSS turns out is super interesting, for functional programing fans and formal language fans such as combinatorial logic fan.

The selectors acts as pattern matchers for tree. U can compare it to patterns in ocaml fsharp haskell, and wolfram lang. U get insights. Eg on the pattern matcher's semantic power.

But the selector syntax, also became very interesting. The question is, how to design the syntax for the given semantics. Again, compare to ocaml fsharp haskell, and wolfram lang.

CSS as computer language aspects