【CSS】よく使うセレクタの組み合わせ

今回は、CSSのセレクタの組み合わせでよく使うものをご紹介します。
組み合わせによって、自分の適用したい範囲にのみスタイルを適用することができるようになります。

子孫セレクタ

「section p」のように、セレクタの間を半角スペースで区切って指定する方法です。

<style>
  section p {
    font-size: 14px;
  }
</style>

<section>
  <p>テキスト</p> <!-- ここにスタイルが適用される -->
  <div>
    <p>テキスト</p> <!-- ここにスタイルが適用される -->
  </div>
</section>
<p>テキスト</p> <!-- ここにはスタイルが適用されない -->

上記のサンプルコードでは、sectiontタグに含まれるpタグ全てにスタイルが適用されます。
共通したスタイルを様々な場所で適用したいときに使うと便利です。

子セレクタ

「section > p」のように、セレクタの間を「>」で区切って指定する方法です。

<style>
  section > p {
    font-weight: bold;
  }
</style>

<section>
  <p>テキスト</p> <!-- ここにスタイルが適用される -->
  <div>
    <p>テキスト</p> <!-- ここにはスタイルが適用されない -->
  </div>
</section>

上記のサンプルコードでは、sectionタグ直下にあるpタグのスタイルを指定することができます。
この指定方法では、子孫セレクタよりもスタイルの適用範囲を限定できるので、より限定した範囲でスタイルを指定したいときに便利です。

隣接セレクタ

「section + p」のように、セレクタの間を「+」で区切って指定する方法です。

<style>
  section + p {
    font-weight: bold;
  }
</style>

<section>
  <p>テキスト</p> <!-- ここにはスタイルが適用されない -->
</section>
<p>テキスト</p> <!-- ここにスタイルが適用される -->

上記のサンプルコードでは、sectionタグに隣接するpタグのスタイルを指定することができます。

まとめ

今回はCSSのセレクタの組み合わせでよく使うものをご紹介しました。
今回はよく使う3つをご紹介しましたが、他にも組み合わせの方法はありますので、興味のある方は調べてみると面白いと思います！