CSSの勉強 6 : 子孫結合子(Descendant combinator)について(グループ化とは異なる)

 このブログ記事は個人的な勉強のメモ書き、覚え書き程度のものです。内容の正確性などあまり当てにならない面が多いので、ちゃんとしている情報を知りたい場合は他のサイトを探して下さい。

---

セレクタをグループ化で作るとき
.aaa, .bbb {
  font-size: 20px;
  color: green;
}
のようにセレクタはカンマ(,)で区切って作る。この場合、セレクタを使うときclass="aaa"とclass="bbb"は同じ設定となる。

それと似た以下のような書き方がある。
.aaa .bbb {
  font-size: 20px;
  color: green;
}
こちらはカンマ区切りではなく、半角スペースで区切られている。これはカンマを書き忘れたのではなく、子孫結合子(Descendant combinator)を用いるときの書き方となる。

子孫結合子(Descendant combinator)とは

子孫結合子とは、セレクタを作るときにいくつかある結合子の中の一つ。子孫結合子によってセレクタを作ると、そのセレクタの有効となる条件も合わせて決まる。条件とは、始めのセレクタが適用されている要素内でその次のセレクタを適用した要素を作ることで有効となる。
 上の例で作ったセレクタだとHTMLに
<要素1 class="aaa">
  <要素2 class="bbb">
   子孫結合子のテスト
  </要素2>
</要素1>
と書いた場合に要素2の中で .aaa .bbb のセレクタが有効となる。
どちらか一方だけでは有効とはならない。また順序が逆の場合も有効とはならない。


グループ化の書き方と似ているが、働きは異なるので注意。