シェアする
Advanced CSS Syntax: Descendant Selectors - Japanese Only
みなさまどうもこんにちは。
続きまして少し高度な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要素が祖先要素にあたりますね。
子要素などはウェブ開発でよく使用される言葉ですので覚えておくと良いでしょう。
今回勉強したような子孫要素が指定されているセレクタを『子孫セレクタ』と呼んだりしますがあまり使われないので覚えなくても多分大丈夫です。半角スペース等を空けて記述したりする文法だけバッチリマスターしちゃいましょう。
次の記事では隣接する要素にデザインを反映させる記述を紹介します。引き続き頑張っていきましょう。
ではではー。
This article was written by Sakurama.
Author's beloved small mammal |
桜舞 春人 Sakurama HarutoA Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him. |
If you find any errors or copyright issues, please contact us.
