Algebra of CSS Selectors

A basic demo of the algebra of CSS selectors. Enter many selectors (they can be complex selectors), and it will compute their conjunction. (Disjunction is already given by the comma separator in CSS.)

I need to add better support for selectors and negation. The output can be optimized too (I know how, I just need to finish implementing it). The part I was not able to do originally but probably can do now is to implement negation of complex selectors.

Some examples to get you started:

• a + b, a + b
• a + b, a + c
• a + .b, a + .c
• a + .b, a ~ .c
• .x + .b, .y ~ .c
• .x ~ .b, .y ~ .c
• a ~ c, a + b + c
  (actually not optimal, oops …)
• .a ~ .c, .a + .b + .c
  (whatʼs the difference? why? but this is also not optimal)
• .a ~ .b + .c ~ .d, .w + .x ~ .y ~ .z
  (okay, youʼre not guessing this one!)

Can you guess what the result will be? See if you can figure out the rules for how it works!

CSS selectors as Boolean Algebra (warning: 35MB PDF)