【スポンサーリンク】

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

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

\記事が役に立ったらシェアしてね/
キーワード
【スポンサーリンク】

条件を組み合わせたい(論理積)ことは多い

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

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

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

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

否定擬似クラス: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() 否定擬似クラスに入れれば、リスト項目の最初の行以外を選択するセレクタになりそうです。 .t...

CSSのクラス指定の空白の意味 知っていますか?子孫結合子と除外の方法
CSSのクラス指定が複雑になったときの意味を調べてみました。 散々、迷って出来上がったCSSのコードは以下です。 .article :not(div.toc-content) li { font-size: 115%; font-weight: 600; } 意図としては、「記事(.articleクラス)の中のリスト項目のフォントサイズを大きくする、ただし、目次(toc-contentクラス)のリ...

ブログの絵文字のサイズを小さくした【CSSのクラス指定】
教室のブログを見ていたら、気になる点が…… わかりますか? 絵文字の部分が不自然に大きいんです。 しかも、灰色の枠までついている。 ということで、CSSをちょっといじります。 デベロッパーツールでCSSを確認する Chromeのデベロッパーツールで検証してみると、「.iwe-border-bold img」に該当するようです。 絵文字ですが、インライン画像の挿入になっているんですね。 ということで...

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

「:not()」で複数のclassを指定するには 〜 擬似クラス[CSS]
【スポンサーリンク】
タイトルとURLをコピーしました