CSSの様々な指定方法について解説

まずは、子要素と孫要素にCSSを適用させる方法について確認していきたいと思います。

<div class="item">
  <p>ここは子要素になります。</p>
  <div class="sub-item">
    <p>ここは孫要素になります。</p>
  </div>
</div>

.item p {
  color: red;
}

上記のように .item p と指定すると、itemクラスの中にあるpタグの要素に対してCSSを適用します。

今回は全てのpタグが .item クラスの中にあるので、全てのテキストが赤色になりました。

次に子要素のみにCSSを適用させる方法について確認していきたいと思います。

<div class="item">
  <p>ここは子要素になります。</p>
  <div class="sub-item">
    <p>ここは孫要素になります。</p>
  </div>
</div>

.item > p {
  color: red;
}

上記のように .item > p と指定すると、itemクラスの子要素になるpタグに対してCSSを適用します。

そのため、今回は子要素である「ここは子要素になります。」のテキストが赤色になりました。

次に隣接する要素のみにCSSを適用させる方法について確認していきたいと思います。

<div>
  <p>1つ目のテキストです。</p>
  <p class="color-red">2つ目のテキストです。</p>
  <p>3つ目のテキストです。</p>
  <p>1つ目のテキストです。</p>
</div>

.color-red + p {
  color: red;
}

上記のように .color-red + p と指定すると、color-redクラスの隣接するpタグのみにCSSを適用します。

そのため、今回は .color-red クラスの次のpタグに対してCSSが適用されるので、「3つ目のテキストです。」が赤色になりました。

次に全ての要素にCSSを適用させる方法について確認していきたいと思います。

<div>
  <h1>h1タグのテキストです。</h1>
  <h2>h2タグのテキストです。</h2>
  <h3>h3タグのテキストです。</h3>
</div>

* {
  color: red;
}

上記のように * と指定すると、全ての要素にCSSを適用します。

そのため、今回は全てのテキストが赤色になりました。

最後に複数の要素にCSSを適用させる方法について確認していきたいと思います。

<div>
  <h1>h1タグのテキストです。</h1>
  <h2>h2タグのテキストです。</h2>
  <h3>h3タグのテキストです。</h3>
</div>

h1, h2 {
  color: red;
}

上記のように h1, h2 と指定すると、h1タグとh2タグの要素に対してCSSを適用します。

そのため、h1タグとh2タグのテキストが赤色になり、h3タグのテキストはCSSが適用されませんでした。

この記事ではCSSの様々な指定方法について解説しました。

それぞれの指定方法を理解し、使い分けていきましょう。

最後までお読みいただきありがとうございます。