「:not()」で複数のclassを指定するには 〜 擬似クラス[CSS]

プログラミングには論理演算というのがあって、条件を組み合わせることがよくあります。

1. 条件を組み合わせたい（論理積）ことは多い

例えば、擬似コードですが、

if(day ≠ "日" ∧ day ≠ "土")
   return 営業
else
   return 休日

このような２つの条件、Aでもなく、Bでもない、という書き方をすることがあります。

CSSではどうすればよいのでしょうか？

2. 否定擬似クラス:notを組み合わせる

否定擬似クラス:notがありますが、複数組み合わせる場合は実はつなげて書きます。

これは、「.entry-card-titleクラスでもなく、.related-entry-headingクラスでもないh2タグ」という意味になります。

ちなみに自分がしてしまった誤答を書いておくと、

#container h2:not(.entry-card-title,.related-entry-heading):after { ...

としてしまったんです。

この構文はまだ対応されていないようです。

こちらもどうぞ。

[CSS] 一行目以外にスタイルを設定するには？（否定擬似クラスには擬似要素を入れられない）

:not(::first-line)は無効になるtitle-listクラスのリスト要素（li）の各一行目を太字にしています。このCSSセレクタは、.title-list li::first-line 二行目以降にスタイルを設定したいと思いました。一見、::first-line 擬似要素を :not() 否定擬似クラスに入れれば、リスト項目の最初の行以外を選択するセレクタになりそうです。.title-list li:not(::first-line) しかし、これはうまくいきま...

chiilabo.com

CSSのクラス指定の空白の意味 知っていますか？子孫結合子と除外の方法

CSSのクラス指定が複雑になったときの意味を調べてみました。散々、迷って出来上がったCSSのコードは以下です。.article :not(div.toc-content) li { font-size: 115%; font-weight: 600;}意図としては、「記事（.articleクラス）の中のリスト項目のフォントサイズを大きくする、ただし、目次（toc-contentクラス）のリスト項目のフォントサイズは大きくしない」です。これは3つの要素が組み合わせてあります。....

chiilabo.com

ブログの絵文字のサイズを小さくした【CSSのクラス指定】

教室のブログを見ていたら、気になる点が……わかりますか？絵文字の部分が不自然に大きいんです。しかも、灰色の枠までついている。ということで、CSSをちょっといじります。デベロッパーツールでCSSを確認するChromeのデベロッパーツールで検証してみると、「.iwe-border-bold img」に該当するようです。絵文字ですが、インライン画像の挿入になっているんですね。ということで、文章中の画像には境界線が表示されないようにする必要があります。ところが、この「.iwe-bor...

chiilabo.com

QRコードを読み込むと、関連記事を確認できます。