お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSS
中級編

少し高度なCSS文法: 子孫セレクタ

みなさまどうもこんにちは。

続きまして少し高度なCSS文法について勉強していきましょう。

当サイトのCSS入門編で紹介したセレクタの記述方法は要素を直に指定するのみでした。こんな感じですね。

p {
    color: red;
}
p.test {
    color: blue;
}
p#test {
    color: aqua;
}

セレクタ指定の方法は色々な記述方法がありますが、まず『◯◯要素の中にいる◯◯要素に対してCSSデザインを反映させる』方法を紹介します。

記述方法はとても簡単でいずれかの要素を記述した後に半角スペースを空けてさらに要素を記述すればOKです。以下のような感じですね。

p span {
    color: red;
}

上記の場合はp要素の中にいるspan要素のみデザインを反映させることができます。HTML要素で考えると以下のような感じです。

<p><span>ここはデザイン反映されるよ</span></p>

<ul>
    <li>
        <span>ここはデザイン反映されないよ</span>
    </li>
</ul>

この子要素指定はいくらでも連続して記述することができます。以下はdiv要素の中にいるp要素のさらにその中にいるspan要素のみデザインを反映させる記述です。

div p span {
    color: red;
}

<div><p><span>ここはデザインが反映されるよ</span></p></div>
<p><span>ここはデザインが反映されないよ</span></p>

idセレクタやクラスセレクタと同時に指定することも可能です。下記の場合はdiv要素の中にいて、かつクラス名がtestとなっているspan要素のみデザインが反映されます。p要素の直下にいるspan要素はtestというクラス名がついてはいますが、div要素の中にいないのでデザインが反映されません。

div span.test {
    color: red;
}

<div><p><span class="test">ここはデザインが反映されるよ</span></p></div>
<p><span class="test">ここはデザインが反映されないよ</span></p>

では続いて『◯◯要素の直下にいる◯◯要素に対してCSSデザインを反映させる』記述方法を学んでいきましょう。直下にいる、というのがミソです。

記述方法は以下のように要素と要素の間に『>』を挟んで記述します。

div > span {
    color: red;
}

<div><span>ここはデザインが反映されるよ！</span></div>
<div><p><span>ここはデザインが反映されないよ！</span></p></div>

こう記述することでdiv要素の直下にいるspan要素のみデザインを反映させることができます。p要素の中のspan要素はdiv要素の直下にいないのでデザインが反映されません。

子要素を指定する『>』を使用したセレクタの記述方法はInternet Explorer 6以下では動きませんのでご注意ください。

ある要素に内包されている要素をまとめて『子孫要素』と呼びます。

ある要素の直下にいる要素を『子要素』と呼びます。

そして内包されている要素からみて直上の要素を『親要素』、さらに上の要素をまとめて『祖先要素』、同じ階層に存在する要素を『兄弟要素』といいます。

『兄要素』が前にいる要素、『弟要素』が後ろにいる要素です。

<div>
    <p><span></span></p>
    <ul>
        <li></li>
    </ul>
</div>

p要素を基準にみた場合、div要素が親要素、span要素が子要素、ul要素が兄弟要素(弟要素)です。span要素から見るとp要素とdiv要素が祖先要素にあたりますね。

子要素などはウェブ開発でよく使用される言葉ですので覚えておくと良いでしょう。

今回勉強したような子孫要素が指定されているセレクタを『子孫セレクタ』と呼んだりしますがあまり使われないので覚えなくても多分大丈夫です。半角スペース等を空けて記述したりする文法だけバッチリマスターしちゃいましょう。

次の記事では隣接する要素にデザインを反映させる記述を紹介します。引き続き頑張っていきましょう。

ではではー。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

前の記事へ

次の記事へ