38
21

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

CSSのセレクタと論理演算

Posted at

暇つぶしに考えてたらちょっと面白かったので書いてみた

OR (A または B)

A, B {}

AND (A かつ B)

AB {}

NOT (A ではない)

:not(A) {}

NOR (「A または B」ではない: ORの否定)

この書き方はまだできない
:not(A, B) {}

単純に考えると以上の書き方だが,今はできない.現在WDのSelectors Level 4で定義されているようだった.

こういう時はド・モルガンの法則が便利で

\overline{A \cup B} = \overline{A} \cap \overline{B}

以上からNORはAのNOTとBのNOTのANDとできるので,以下で書ける.

:not(A):not(B) {}

3つ以上セレクタがある場合などは結構セレクタが汚くなる.Selectors Level 4の実装を待つことにしたい.

NAND (「A かつ B」ではない: ANDの否定)

NORより素直で以下の書き方で大丈夫.

:not(AB) {}

NORの場合と同じように,ド・モルガンの法則

\overline{A \cap B} = \overline{A} \cup \overline{B}

から,NANDはAのNOTとBのNOTのORとできるので,以下でも書ける.

:not(A), :not(B) {}

XOR (排他的論理和)

排他的論理和は ABのNOTのAND」と「AのNOTとBのAND」のOR で表せるので,以下のように書ける.

A:not(B), :not(A)B {}

(A:not(B), B:not(A) のほうが素直で読みやすいかもしれない)

雑感

実はNORなことをしようとしてて困ったのがきっかけでこんなことを考え始めた.
込み入ったことをするときは集合論理を思い出してこういうことをすると対処しやすそう.
とはいえUIデザイナーになって数学がこんな役の立ち方するとは思わなかったである.

38
21
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
38
21

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?