CSSの親子セレクタの使い方と応用例

CSS

2023.12.262024.05.10

この記事は約4分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

はじめに

Webページのデザインを考える際、CSSはその主役の一つと言えるでしょう。

そして、その中の「親子セレクタ」は特定の親要素下の子要素だけを選んでデザインする力を持っています。

「親子セレクタって何？」と感じる初心者の方も、この記事を通して、その効果的な使い方をしっかり掴んでいただけるでしょう。

あなたのWebデザインスキルに新しい一歩を加えるためのガイドとして、どうぞ最後までお楽しみください！

親子セレクタとは、特定の親要素の子要素を指定するセレクタのことです。

親子セレクタを使うことで、CSSのスタイルを特定の要素に限定することができます。

親子セレクタは、「親要素子要素」という形で指定します。

例えば、次のように書きます。

親要素 子要素 {
  スタイルのプロパティ: スタイルの値;
}

ここで、親要素とは、指定したい要素の直前にある要素のことを指します。

子要素とは、親要素の中にある要素のことを指します。具体的な例を見てみましょう。

例えば、次のようなHTMLがあったとします。

<div class="parent">
  <p>親要素の中の子要素1</p>
  <p>親要素の中の子要素2</p>
</div>

ここで、親要素であるdiv要素の中にある、p要素にスタイルを指定したい場合は、次のように書きます。

.parent p {
  スタイルのプロパティ: スタイルの値;
}

このように書くことで、div要素の中にある全てのp要素に対して、指定したスタイルが適用されます。

親子セレクタは、実際にWebページを作成する際にも非常に役立ちます。

例えば、次のようなHTMLがあったとします。

<div class="container">
  <h2>タイトル</h2>
  <div class="content">
    <p>コンテンツ1</p>
    <p>コンテンツ2</p>
  </div>
</div>

ここで、タイトルのみにスタイルを指定したい場合は、次のように書くことができます。

.container > h2 {
  スタイルのプロパティ: スタイルの値;
}

ここで使われている「>」は、直接の子要素を指定するセレクタです。

つまり、この書き方で指定することで、container要素の直下にあるh2要素に対してのみスタイルが適用されます。

content要素内にあるp要素には適用されません。

また、親子セレクタを組み合わせて、より具体的にスタイルを指定することもできます。

例えば、次のようなHTMLがあったとします。

<div class="parent">
  <p>子要素1</p>
  <div class="child">
    <p>子要素2</p>
  </div>
</div>

ここで、子要素1には赤色のテキストを、子要素2には青色のテキストを指定したい場合は、次のように書くことができます。

.parent > p {
  color: red;
}
.parent > .child > p {
  color: blue;
}

このように書くことで、子要素1には赤色のテキストが、子要素2には青色のテキストが適用されます。

親子セレクタは、特定の親要素の子要素に対してスタイルを指定するためのセレクタです。

親子セレクタを使うことで、CSSのスタイルを特定の要素に限定することができます。

親子セレクタの基本的な使い方や応用例について、具体的なコード例を交えて紹介しました。

ぜひ、実際に使ってみて、Webページをより見やすくカスタマイズしてみてください。