DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

ln_north
ln_north

Posted on

CSS Selector and Logical Operation

japanese Version(Qiita)

OR


A, B {}
Enter fullscreen mode Exit fullscreen mode

AND


AB {}
Enter fullscreen mode Exit fullscreen mode

NOT


:not(A) {}
Enter fullscreen mode Exit fullscreen mode

NOR


:not(A, B) {} /* Currently undefined syntax  */
Enter fullscreen mode Exit fullscreen mode

That way is so simply, but can't it now.
Selectors Level 4 which is under working draft, defined this syntax.

At such times De Morgan's law is convenient.

Since NOR is "NOT A" AND "NOT B", it can be written as follows.

:not(A):not(B) {}
Enter fullscreen mode Exit fullscreen mode

If there are three or more selectors, the selector becomes dirty.γ€€I hope to be implemented Selectors Level 4.

NAND

It's simpler then NOR.

:not(AB) {}
Enter fullscreen mode Exit fullscreen mode

Adapting Domorgan's law in the same way as NOR, so

:not(A), :not(B) {}
Enter fullscreen mode Exit fullscreen mode

is OK.

XOR

XOR is "A AND NOT B" OR "NOT A AND B", so it can be written as follows.

A:not(B), :not(A)B {}
Enter fullscreen mode Exit fullscreen mode

(Maybe, A:not(B), B:not(A) is simpler.)

Impression

Actually, I was thinking about doing NOR things and started thinking about this at the trigger.

When doing something complicated, it seems to be easy to deal with remembering aggregate logic and doing this kind of things.

Top comments (0)

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.