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

CSSのクラス指定が複雑になったときの意味を調べてみました。

散々、迷って出来上がったCSSのコードは以下です。

.article :not(div.toc-content) li {
  font-size: 115%;
  font-weight: 600;
}

意図としては、「記事（.articleクラス）の中のリスト項目のフォントサイズを大きくする、ただし、目次（toc-contentクラス）のリスト項目のフォントサイズは大きくしない」です。

これは3つの要素が組み合わせてあります。

• .article
• :not(div.toc-content)
• li

もとあった.articleに含まれるliについてのスタイルから.toc-contentを除外したいのです。

ちなみに、もとのCSSはこうでした。

.article li {
  font-size: 115%;
  font-weight: 600;
}

このスタイルが目次にも適用されてしまって、見た目が悪かったのです。

これを

こう直しました。

迷ったのは、順序です。

はじめはあまり順序を意識せずに.article li:not(.toc-content)と指定していました。

しかし、実は順序が大事です。

CSSのクラスセレクタでの空白文字は「子孫結合子」という名前です。

つまり、「.articleの中の liタグの中の.toc-contentではない要素」を指してしまいます。

左側が親要素になるように記述する必要があります。

それを、てっきり論理積「∧（かつ、アンド）」と同じように誤解していたために、うまくいきませんでした。

CSS セレクター - CSS: カスケーディングスタイルシート | MDN

CSS セレクターモジュールは、要素を選択するパターンを定義し、一連の CSS ルールをその詳細度とともに適用します。 CSS セレクターモジュールには、 60 以上のセレクターと 5 つの結合子が用意されています。他のモジュールは、さらに擬似クラスセレクターと擬似要素が提供されています。

developer.mozilla.org

あと、.articleの意味もよく理解していませんでした。

これは、ただクラス指定をしていると思っていたのですが、もともとは*.articleの略記だということです。意味としては、div.articleとかp.articleなどをタグによらずに全ての要素を含むということになります。あくまで、タグが主なのです。

正しく、.article :not(div.toc-content) li とすれば、親要素に「*.article」を含み、「div.toc-content」を含まない、liに対してスタイルを指定できます。

ちなみに、:notなどコロンで始まる要素は、「擬似クラス」といいます。

:not() - CSS: カスケーディングスタイルシート | MDN

:not() は CSS の擬似クラスで、列挙されたセレクターに一致しない要素を表します。特定の項目が選択されることを防ぐため、否定擬似クラス (negation pseudo-class) と呼ばれています。

developer.mozilla.org

1. まとめ

タグ タグ 対象タグ {スタイル}

最後のタグが重要で、それ以前のタグは親要素で絞り込んでいることになります。

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