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

はじめに

CSSはWebデザインにおいて欠かせない技術であり、要素を指定してスタイルを設定する際にはセレクタが必要です。

セレクタ親要素は、指定した要素の親要素を指定する方法であり、スタイルをまとめて指定する場合などに役立ちます。

本記事では、CSSセレクタ親要素の使い方と応用例について解説します。

●CSSセレクタ親要素とは？

セレクタ親要素は、CSSのセレクタを用いて、指定した要素の親要素を指定することができる機能です。

例えば、次のようなHTMLコードがあった場合、

<div class="parent">
  <div class="child">
    <p>テキスト</p>
  </div>
</div>

子要素のpタグに対して、親要素であるdivタグにスタイルを設定したい場合に、次のようにセレクタ親要素を用いることができます。

.parent p {
  /* スタイル */
}

このように、セレクタ親要素を使用することで、より効率的にスタイルを指定することができます。

●セレクタ親要素の使い方

CSSにおいて、セレクタ親要素を使用するというのは、特定の要素やその内包される要素に対して、スタイルを適用する手法の1つです。

このセレクタ親要素の指定方法は非常にシンプルで、「親要素 子要素」という形式で記述します。

ここで、親要素と子要素の間に半角スペースを挿入することに注意が必要です。

このスペースは、指定された親要素の下に存在する子要素へのスタイルの適用を意味します。

【例1】セレクタ親要素で親要素にスタイルを設定する

次のようなHTMLコードがあった場合、セレクタ親要素を用いて親要素のdivに背景色を指定することができます。

<div class="parent">
  <div class="child">
    <p>テキスト</p>
  </div>
</div>

.parent {
  background-color: #ccc;
}

このコードでは、.parentというクラス名を持つdiv要素を用いて、子要素として別のdiv要素（.childクラス名を持つ）が配置されています。

そして、CSSでは.parentセレクタを使って、この親要素のdivに灰色（#ccc）の背景色を設定しています。

この例では、.parentというクラスを持つdiv要素の背景色を変更することにより、このdiv要素が親であることを明確にすることができます。

結果として、ページ上でこの.parentクラスを持つdiv要素の部分だけが灰色の背景として目立つこととなります。

【例2】セレクタ親要素で子要素にスタイルを設定する

次のようなHTMLコードがあった場合、セレクタ親要素を用いて子要素のpタグにフォントサイズを指定することができます。

<div class="parent">
  <div class="child">
    <p>テキスト</p>
  </div>
</div>

このコードは、クラス名”parent”を持つdiv要素があり、その中にクラス名”child”を持つ別のdiv要素が入れ子になっています。

さらに、”child”クラスを持つdiv要素の中には、pタグが存在します。

.parent p {
  font-size: 16px;
}

このCSSコードでは、”parent”クラスを持つ要素の中にあるすべてのpタグに、フォントサイズとして16pxを適用しています。

この例では、”child”クラスの中のpタグにもフォントサイズが適用されます。

要するに、”parent”クラスの中にあるすべてのpタグ、直接の子供であろうと孫であろうと、すべてのpタグにこのスタイルが当てられます。

【例3】セレクタ親要素で直接子要素にスタイルを設定する

セレクタ親要素を使用すると、親要素とその子孫要素全てにスタイルが適用されますが、直接子要素にのみスタイルを適用する場合には、「親要素 > 子要素」の形式で指定します。

<div class="parent">
  <div class="child">
    <p>テキスト</p>
  </div>
  <p>テキスト</p>
</div>

このHTMLコードでは、前の例とは異なり、”parent”クラスを持つdiv要素の中に直接配置されたpタグが追加されています。

.parent > div {
  background-color: #ccc;
}

このCSSコードは、”parent”クラスを持つ要素の直接の子要素であるdivタグにのみ背景色を適用します。

具体的には、”parent”クラスの中の”child”クラスを持つdiv要素に背景色が適用されます。

しかし、”parent”クラスの中に直接配置されたpタグには、この背景色は適用されません。”>” セレクタは、直接の子要素だけをターゲットにするための便利な方法です。

●セレクタ親要素の応用例

CSSのセレクタは、HTMLの要素にスタイルを適用するための強力なツールとしてデザイナーやデベロッパーに使われています。

特に、親要素のセレクタを使うことで、一貫したデザインや特定の条件下でのみスタイルを適用するなど、柔軟かつ効率的にスタイルを指定することができます。

【例1】複数の要素に同じスタイルを指定する

まず、複数の子要素に同じスタイルを一度に適用する基本的な使い方を見てみましょう。

<div class="parent">
  <div class="child1">
    <p>テキスト</p>
  </div>
  <div class="child2">
    <p>テキスト</p>
  </div>
  <div class="child3">
    <p>テキスト</p>
  </div>
</div>

.parent div {
  background-color: #ccc;
  padding: 10px;
}

このコードは、.parentクラスを持つdiv要素の中にあるすべてのdiv子要素に背景色とパディングを指定しています。

具体的には、.parentの直下にあるだけでなく、そのさらに子要素の中にあるすべてのdivにも同様のスタイルが適用されます。

このように親要素のセレクタを使用することで、繰り返し同じスタイルルールを書く手間を省き、コードの保守性も高めることができます。

【例2】特定の要素に対してのみスタイルを指定する

次に、特定の子要素だけにスタイルを適用する方法を考えてみましょう。

<div class="parent">
  <div class="child1">
    <p>テキスト</p>
  </div>
  <div class="child2">
    <p class="target">テキスト</p>
  </div>
</div>

.parent .target {
  color: red;
}

このコードでは、.parentクラスを持つdiv要素の中にある、.targetクラスを持つp要素の文字色を赤色に指定しています。

この方法を使用することで、特定の条件下でのみスタイルを適用することができます。

この場合、親要素が.parentであり、その中のp要素が.targetクラスを持っている場合のみ赤色が適用されるのです。

【例3】特定の階層に対してスタイルを指定する

最後に、特定の階層の要素だけにスタイルを適用する場合を見てみましょう。

<div class="parent">
  <div class="child1">
    <div class="grandchild1">
      <p>テキスト</p>
    </div>
  </div>
  <div class="child2">
    <div class="grandchild2">
      <p>テキスト</p>
    </div>
  </div>
</div>

.parent .child1 .grandchild1 p {
  font-weight: bold;
}

このコードは、.parentクラスを持つdiv要素の中の、.child1クラスを持つdiv要素のさらに中の、.grandchild1クラスを持つdiv要素の中にあるp要素のテキストを太字にしています。

このように、セレクタの階層を指定することで、特定の深い階層にある要素だけにスタイルを適用することができます。

まとめ

CSSセレクタ親要素は、より効率的にスタイルを指定するための便利な機能です。

セレクタ親要素を使用することで、特定の子要素にスタイルを指定したり、複数の子要素に同じスタイルを指定したりすることができます。

この記事が参考になれば何よりです。