Rumyra's Head

I found myself using the CSS psuedo class :not() the other day. It proved superbly useful. For those that are unaware, by adding it to your CSS, you can choose not to affect a set of elements.

myelement:not(.ofthisclass) { style: "property; }

There's a couple of good resources about it in the CSS Tricks Almanac or the MDN docs.

What I was looking for was a way to affect anything but a certain class, plus another certain class. If I had declared both separately in my CSS, the first declared would have been overwritten. In this example the div with a class of blue would still have a crimson background, as the declaration below it would overwrite it.

div:not(.blue) {
  background: crimson;
}
div:not(.green) {
  background: crimson;
}

But wait... there is a way. All we need to do is chain the two nots together:

div:not(.blue):not(.green) {
  background: crimson;
}

Voilà! Just what I was looking for. For a demo, check out this codepen.