シェアする
Advanced CSS Syntax: Targeting Adjacent Elements - Japanese Only
みなさまどうもこんにちは。
続きまして隣接した要素を指定したりしなかったりしてみましょう。
隣接した要素を指定するには要素と要素の間に『+』を記述します。
このような感じですね。
h1 + p {
color: red;
}
<h1>タイトルだよ！</h1> <p>ここはh1要素のとなりだからデザインが反映されるよ</p> <p>ここはh1要素のとなりにいないからデザインが反映されないよ</p>
h1要素のとなりにいるpタグのみデザインが反映されます。『+』を使用して記述されたセレクタを『隣接セレクタ』といいます。
注意点ですが、隣接セレクタという名前がついているので『+』を使用して記述すれば隣り合っている全ての要素に対してデザインを反映できそうな気がしますが、実際は隣接した次の要素に対してのみデザイン反映の対象になります。手前の要素は対象外になっちゃいます。
<p>ここはh1要素のとなりにいるけど手前にいるからデザインが反映されないよ</p> <h1>タイトルだよ！</h1> <p>ここはh1要素のとなりだからデザインが反映されるよ</p> <p>ここはh1要素のとなりにいないからデザインが反映されないよ</p>
勘違いしやすいところなので注意しましょう。
ちなみに以下のように隣接セレクタを連続して書くことができます。
h1 + p + p {
color: red;
}
<p>ここはh1要素のとなりにいるけど手前にいるからデザインが反映されないよ</p> <h1>タイトルだよ！</h1> <p>ここはh1要素のとなりだからデザインが反映されないよ</p> <p>ここはh1要素のとなりのとなりだからデザインが反映されるよ</p>
この場合はh1要素のとなりのとなりにいるp要素にデザインが反映されるという記述になりますね。こちらも知っておくと便利な記述なのでバッチリ覚えておいてください。
続いてある要素の後ろにいる指定された全ての要素に対してデザインを反映させる記述です。要素と要素の間に『~』を記述します。
h1 ~ p {
color: red;
}
<p>ここはh1要素の手前にいるからデザインが反映されないよ</p> <h1>タイトルだよ！</h1> <p>ここはh1要素の後ろにいるからデザインが反映されるよ</p> <p>ここもh1要素の後ろにいるからデザインが反映されるよ</p>
このように弟要素にデザインを反映させることができる記述です。便利な記述なのでバッチリ覚えてしまいましょう。
『+』と『~』を使用したセレクタ指定の記述は『>』と同じようにInternet Explorer 6以下では動きませんのでこちらもご注意ください。
というわけで以上となりますね。次の記事では擬似クラスというものについて解説していきます。引き続き頑張っていきましょう。
ではではー。
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.
