Experimenting with logic in CSS selectors & thinking through the conditional

This post includes an in progress example of logical statements expressed in CSS. The conditional is tricky for me. “If P then Q” is not the same as an if/else statement.


A few weeks ago I posted an experiment with logical equivalence in JavaScript – here is something similar in CSS. What do logical operators look like in CSS? Here’s an idea:

See the Pen Propositional Logic with CSS Selectors by Lara Schenck (@laras126) on CodePen.

I got very stuck on what a bi-conditional (i.e. “if and only if” if iff) would be in this example. Similarly, implication, or the conditional statement, was tricky – implication can be read as “if p then q” but this is not the same as if/else in JavaScript’s (and other languages) construct. I am still contemplating how this maps to CSS, and I’m thinking the child combinator, >, used in the experiment above is probably not quite right.

Thinking through the conditional

To be honest, I feel that I still don’t fully understand the bi-conditional or the conditional (i.e. the p → q, or “p implies q”, or “if p then q”). In the JS example from the other week (which I trust because I created test cases for it based on truth tables), implies is like this:

if ( p === true && q === false ) {
   return false;
} else {
   return true;

Ah…this video clears things up a bit.

p → q is not only “if p then q”, rather “if p is true then q is true”. And, if p is false, then q is vacuously true meaning we don’t have enough information to say it is false, so we say it is true.

In plain language, let’s say:

P = It is raining,
Q = I will bring an umbrella
P → Q = If it is raining, then I will bring an umbrella.

A vacuously true statement would be if P is false, or if it is not raining. If it is not raining, will I bring an umbrella? We don’t have enough information to say, so the answer is vacuously true.

In any event…I still have some exploring to do.

Why am I doing this?

I initially became interested in this formal logic because I wanted to make a truth table showing that CSS is a programming language for my talk. Now, I’m interested in logic because practicing this kind of mathematical thinking helps me greatly in many aspects of life. It helps me think more formally and intentionally about code and software specifications, it helps me to write tests, it helps me to write more expressive documentation. Most important, however, is that it helps me to think about my own thinking and to recognize emotions without turning them into more emotions (therapy also is helping with this).

An aside: I don’t think I would be pursuing any of this if I hadn’t stopped using social media (specifically Twitter) about nine months ago. There is an unprecedented amount of space (and patience) in my mind these days. Leaving social media is not an option for everyone, but if you’ve been considering it, maybe this is the nudge you need to finally do it.