【CSS】初心者必見!セレクタを理解しよう!(子孫セレクタ編)

HTMLは、ある要素がある要素の中にあるような階層構造となっており、このような関係を親子関係といいます。

親要素に設定したいくつかのスタイルは子要素にも反映されます。
例えば、body要素に設定した文字色(color)やフォントファミリー(font-family)は、body内の他の要素にも反映されます。


body {
    font-family: serif;
    color: red;
}
    

<body>
    <div>
        <!-- bodyのCSSが反映される -->
        こんにちは
    </div>
</body>
    

このように、CSSを書くときは、HTMLの構造を理解した上でどこにスタイルを当てるかを考えることが重要です。

理解度チェック

  • HTMLの親子関係について説明してみましょう!
  • HTMLの一番上の要素は何ですか?

子孫セレクタとは​

特定の親要素の下の要素を指定するセレクタのことを子孫セレクタといいます。


<div class="parent">
    <p>
        こんにちは
    </p>
    <div>
        <p>
            Hello
        </p>
    </div>
</div>
        

要素が多いので少し読みにくいかもしれませんが、クラスparentdiv要素の子要素にはp要素とdiv要素があり、div要素の更に子要素にp要素があります。


.parent p {
    color: blue;
}
    

そして、セレクタには、.parent pというようにClassセレクタとpの要素セレクタを空白で繋げています

このように記述することで、.parent要素の中にあるすべてのp要素をセレクタとして指定したことになります。


.parent div p {
    color: blue;
}
    

上の例では、.parent要素の子孫div要素の子孫であるp要素をセレクタに指定しています。

このように、空白区切りで複数の子孫要素を繋げることができます

メッセージボックスのデモ

次のような簡単なメッセージボックスをコーディングするデモを試してみましょう。

今日の一言

焦らない焦らない 一休み一休み

まずHTMLをコーディングします。

メッセージボックスの大枠の要素があり、その中にメッセージのタイトルと本文を表示させたいので次のようになります。


<div>
    <h3>今日の一言</h3>
    <div>
        焦らない焦らない 一休み一休み
    </div>
</div>
    

これだけであれば要素セレクタのみでスタイルを適用できますが、実際のページには他の要素も多く存在するため、クラスを設定します。


<div class="message-box">
    <h3>今日の一言</h3>
    <div>
        焦らない焦らない 一休み一休み
    </div>
</div>
    

子孫セレクタを使用するので、クラスを設定するのはメッセージボックスの親要素のみにしました。
場合によっては、titlebodyなどのクラスを子要素に設定することも自由です。


.message-box {
    padding: 1rem;
    border-radius: 16px;
    background-color: #e8eaf6;
}

.message-box h3 {
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 8px;
}

.message-box div {
    color: #424242;
}
    

子孫セレクタを使用しているので、これらのスタイルがメッセージボックスのスタイルであることがわかり易くなったと思います。

また、メッセージボックスの子要素以外のh3要素やdiv要素には影響を与えないため、メッセージボックス内のスタイルにのみ集中することができます。

理解度チェック

  • メッセージボックスのデモを実際に試してみましょう!
  • メッセージボックスを複数の色(エラーの赤、警告の黄色)で装飾できるようにbox-errorbox-warnクラスを定義してみましょう!

子セレクタとは

子セレクタとは、特定の要素のすぐ下の子要素のみを指定するセレクタです。

先程の子孫セレクタは特定要素内にあるすべての要素を指定していたので、


<div class="parent">
    <p>
        こんにちは
    </p>
    <div>
        <p>
            Hello
        </p>
    </div>
</div>
        

上のコードは子孫セレクタで使用したものと同じです。子セレクタを使うことで、「こんにちは」のp要素のみをセレクタに指定することができます。


.parent > p {
    color: blue;
}
    

子セレクタでは、大なり記号(>)で子要素を指定します
この場合は、.parentのすぐしたの子要素のp要素が指定されていることになります。ですので、「こんにちは」にはスタイルが反映されますが、「Hello」には反映されません。

理解度チェック

  • メッセージボックスのデモを子セレクタで試してみましょう!

前のレッスン
次のレッスン

Twitterでアウトプット

理解したことや分からないところはTwitterでつぶやいてみよう!

この学習ページで学んだことをTwitterでアウトプットしてください。

アウトプットするメリット

学習仲間が増える

同じ課題を持った仲間が増えるため、学習へのモチベーションが継続しやすくなります。

より深く理解する

頭では理解したと思っていても、文章化することで初めて気づくことがあります。