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ではない要素」を指してしまいます。

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

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

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

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

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

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

スポンサーリンク

まとめ

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

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

タイトルとURLをコピーしました