少し高度なCSS文法: 隣接した要素などを指定

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

続きまして隣接した要素を指定したりしなかったりしてみましょう。

隣接した要素を指定するには要素と要素の間に『+』を記述します。

このような感じですね。

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>

サンプルをみてみる。

このように弟要素にデザインを反映させることができる記述です。便利な記述なのでバッチリ覚えてしまいましょう。

というわけで以上となりますね。次の記事では擬似クラスというものについて解説していきます。引き続き頑張っていきましょう。

ではではー。

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

著者が愛する小型哺乳類

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

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

トップページへ

前の記事へ

次の記事へ

Tweet

シェア