【CSSセレクタ入門】CSSの入れ子とは？半角スペースや >・+・~ などの書き方をわかりやすく解説書き方をわかりやすく解説

2023年12月23日2024年9月14日

CSSの入れ子とは、複数のセレクタ（要素）を組み合わせて、CSSを適用していくことです。

入れ子を理解することで、複雑になったHTMLでも記述量を増やすことなく、適切に適用することも可能です！

CSSって何だろう？CSSをまだ触ったことがない！といった方は、下記の記事も参考にされてください。

これから勉強を始める方向けに、CSSがどんなものなのか解説しております！

入れ子の種類について

子孫セレクタ（半角スペース）

セレクタを半角スペースで区切って指定する方法です。こちらの指定方法が一番多く使用されます。

セレクタの中のセレクタといった意味合いになるため、細かくセレクタを指定して制御することができます。

<div>
  <p>1つ目のpタグ</p>
  <p>2つ目のpタグ</p>
</div>

<style>
  div p {
    color: red;
  }
</style>

divタグの中のpタグに対して、指定しています。

<div>
  <p>1つ目の<span>pタグ</span></p>
  <p>2つ目の<span>pタグ</span></p>
</div>

<style>
  div span {
    color: red;
  }
</style>

divタグの中のspanタグに対して指定しています。pタグには指定していないため、spanタグで囲まれていない箇所は赤文字になっていません。

<div class="box">
  <p class="text">1つ目の<span>pタグ</span></p>
  <p>2つ目の<span>pタグ</span></p>
</div>

<style>
  .box .text {
    color: red;
  }
</style>

classを追記し、クラスでの指定を行っております。

class：boxの中のclass：textに対して指定しております。

classで指定を行っておりますので、divタグ内の２つ目のpタグには反映されておりません。

このように、classを付与して、classに対して指定を行うことでより正確にCSSを適用することができます。

div p { } のように、タグを直接記載しても適用は可能ですが、予期しない箇所にもCSSが適用されてしまい、管理が難しくなってしまいます。

可能な限りclassを付与し、CSSではclassで指定することが望ましいです。

間違えやすいポイント

<div>
  <p>1つ目の<span>pタグ</span></p>
  <article>
    <p>2つ目の<span>pタグ</span></p>
    <p>3つ目の<span>pタグ</span></p>
  </article>
</div>

<style>
  div span {
    color: red;
  }
</style>

div span { } で記載しているため、divの一つ下の「1つ目のpタグ」のみ赤くなりそうですが、この指定ではdivの中のspanタグすべてが適用範囲となってしまいます。

このようにclassを使用しないと、想定しない挙動になってしまいがちになってしまいます。

最初のうちはこういった箇所で、わからなくなりがちなため、動きを把握していきたいですね。

直下セレクタ（ > ）

一つ下の階層に絞ってCSSを指定する方法です。

半角スペースではなく、「 > 」を記載します。

<div class="box">
  <p>1つ目の<span>pタグ</span></p>
  <div>
    <p>2つ目の<span>pタグ</span></p>
    <p>3つ目の<span>pタグ</span></p>
  </div>
</div>

<style>
  .box > p {
    color: red;
  }
</style>

.box > p と指定しているため、すぐ下のpタグにしかCSSが適用されておりません。

これが.box p だった場合は、下層のpタグにもすべて適用されてしまい、すべて赤色になってしまいます。

子孫セレクタでの記載方法の場合、下の階層の要素に対してプロパティの値が継承されるため、ここだけに適用したいといった場合に、便利な記載方法となります。

隣接セレクタ（+）

隣り合った要素に対してCSSを適用する方法です。

<div class="box">
  <h2>見出しです</h2>
  <p>1つ目の<span>pタグ</span></p>
  <p>2つ目の<span>pタグ</span></p>
  <p>3つ目の<span>pタグ</span></p>
  </div>
</div>

<style>
  h2 + p {
    color: red;
  }
</style>

h2タグの隣にあるpタグに対してCSSが適用されております。

CSSを適用する範囲を制限することができるのですが、classをつけれる場合は、classに対して適用したほうが見やすいと思われます。

コーディングが複雑になり、階層が深くなった場合は、すべてに対してclassを付与しない場合もあります。

特定の要素だけにCSSを適用したいといった場合に使用できるため、とても便利です。

範囲指定セレクタ（～）

<div class="box">
  <h2>大見出しです</h2>
  <p>1つ目の<span>pタグ</span></p>
  <p>2つ目の<span>pタグ</span></p>
  <h3>中見出しです</h3>
  <p>3つ目の<span>pタグ</span></p>
  <p>4つ目の<span>pタグ</span></p>
  <h4>子見出しです</h4>
  <p>5つ目の<span>pタグ</span></p>
  <p>6つ目の<span>pタグ</span></p>
  </div>
</div>

<style>
  h2 ~ p {
    color: red;
  }
</style>

h2タグ以降のpタグにCSSが適用されます。

注意点があり、

適用されるのは同じ階層に存在する要素のみとなります。

<div class="box">
  <h2>大見出しです</h2>
  <p>1つ目の<span>pタグ</span></p>
  <p>2つ目の<span>pタグ</span></p>
  <h3>
    中見出しです
    <p>3つ目の<span>pタグ</span></p>
    <p>4つ目の<span>pタグ</span></p>
  </h3>
  <h4>子見出しです</h4>
  <p>5つ目の<span>pタグ</span></p>
  <p>6つ目の<span>pタグ</span></p>
  </div>
</div>

<style>
  h2 ~ p {
    color: red;
  }
</style>

h3のタグの中に記載されているpタグにはCSSが適用されておりません。h2 と同じ階層にあるpタグのみが対象となります。

複数セレクタ（ , ）

複数のセレクタに対してCSSを適用する方法です。

<div class="box1 b-blue"></div>
<div class="box2 b-gray"></div>

<style>
  .box1,.box2 {
    height: 50px;
    width: 50px;
  }
  .b-blue {
    background-color: blue;
  }
  .b-gray {
    background-color: gray;
  }
</style>

.box1と.box2に対して指定を行っております。

※下記の記載方法と挙動は同じになります。

<style>
  .box1 {
    height: 50px;
    width: 50px;
  }
  .box2 {
    height: 50px;
    width: 50px;
  }
</style>

組み合わせセレクタ（繋げて記載）※要注意

<div class="box b-blue"></div>
<div class="box b-gray"></div>

<style>
  .box {
    height: 50px;
    width: 50px;
  }
  .b-blue {
    background-color: blue;
  }
  .b-gray {
    background-color: gray;
  }
  .box.b-blue {
    border: 3px solid #555;
  }
</style>

.boxとb-blueが同じ要素に指定されている場合にのみ、CSSを適用する方法になります。半角スペースを空ける子孫セレクタでの指定とは挙動が全く異なるため、気を付けたいポイントとなります。

classは1つの要素に複数指定することが可能です。
※この場合、boxとb-blue

※classは複数指定することも可能なため、

ちなみに子孫セレクタ（半角スペース）で指定した場合、

<div class="box b-blue"></div>
<div class="box b-gray"></div>

<style>
  .box {
    height: 50px;
    width: 50px;
  }
  .b-blue {
    background-color: blue;
  }
  .b-gray {
    background-color: gray;
  }
  .box .b-blue {
    border: 3px solid red;
  }
</style>