# CSS `.class` vs. `:not(.class)` Chained and Grouped

I often found myself overthinking when reaching for chained or grouped `:not()` . So I made this to visualize it.

## Chained .class

`div.this.that { }`

Acts like AND logic gate

`no class`
`.this`
`.that`
`.this.that`

## Chained :not(.class)

`div:not(.this):not(.that) { }`

Acts like NOR logic gate

`no class`
`.this`
`.that`
`.this.that`

## Grouped .class

`div.this, div.that { }`

Acts like OR logic gate

`no class`
`.this`
`.that`
`.this.that`

## Grouped :not(.class)

`div:not(.this), div:not(.that) { }`

Acts like NAND logic gate

`no class`
`.this`
`.that`
`.this.that`