CSS 隣接セレクタ 直下セレクタ 間接セレクタの使い方を理解しよう

2017/02/15

スタイルシートで画面デザインをしていると、ある特別な条件に限ってスタイルを指定したいことがあります。無理矢理その条件に対してクラス設定をして強制的にスタイルを噛ませることが多々ありましたが、ソースコードが煩雑になってしまい、修正を加えたあと整理するのが大変でした。

しかし今回紹介する隣接セレクタ、直下セレクタ、間接セレクタを上手く使いこなすことで、HTML のコードだけでなく CSS もすっきりした形となり、より管理しやすい状態となりました。本格的に CSS に触れない限り、なかなか理解するのが難しい各セレクタですが、使いこなせるようになればかゆいところに手が届くこと間違いなしなので、これを機会に是非身につけてみてください。

隣接セレクタ – 結合子:[+] プラス記号

CSS 上で [+] プラス記号で結ばれる隣接セレクタを使うと、隣り合う要素に対してスタイルを指定することができます。次のように div タグと p タグが並ぶ状況を例にとって説明しましょう。

分かりやすいように外側を div タグで囲って outer クラスを指定しておきます。そして CSS を次のように指定します。

5行目の定義を見てください。このプラス記号が隣接セレクタを表します。言葉で説明すると次の通りです。

outer クラスの子要素である div タグの隣にある p タグに対するスタイル

それでは実際に描画された画面をご覧ください。

隣接セレクタ表示サンプル

P 要素0

DIV 要素1

P 要素1

P 要素2

DIV 要素2

P 要素3

P 要素4

DIV 要素の隣にいる P 要素1P 要素3だけが反映されています。P 要素2もDIV 要素の隣にいますが、手前の要素は対象外となります。「div + p」と記載したら「DIV タグの次に登場する隣の P タグに対する設定」を指すのでご注意ください。

なお、P 要素0も outer クラスを指定した DIV タグと隣接しているように見えますが、この場合は親子関係を成しているため隣接関係ではありません。あくまでタグ同士が隣り合っていることが条件となります。

直下セレクタ – 結合子:[>] 右山括弧

CSS 上で [>] 右山括弧で結ばれる直下セレクタを使うと、ある要素の直下にある要素に対してスタイルを指定することができます。

スタイルシートは次のように設定します。

5行目の定義を見てください。この右向きの山括弧が直下セレクタを表します。言葉で説明すると次の通りです。

outer2 クラス直下に属する p タグに対するスタイル

こちらも画面描画結果を確認ください。

直下セレクタ表示サンプル

P 要素0

DIV 要素1

DIV 内 P 要素

P 要素1

P 要素2

DIV 要素2

DIV 内 P 要素

P 要素3

P 要素4

P 要素0P 要素4は、全て outer2 クラスの直下に属する P タグであるためスタイルが反映されています。一方 DIV 内 P 要素は、outer2 クラスの直下ではなく、outer2 クラス直下の DIV タグに属しているため、outer2 クラスの要素から見ると孫の扱いになります。

直下セレクタは自身の直下の子要素に対してのみ反映され、孫より深い要素に対しては反映されない仕組みとなります。

間接セレクタ – 結合子:[~] チルダ

CSS 上で [~] チルダで結ばれる間接セレクタを使うと、同じ親要素に属するある要素の後続に出現する要素に対してスタイルを指定することができます。

上記2つと比べるとあまり見慣れないセレクタなので、どこで使うかを判断すうのが少々難しいのですが、仕組みが分かればデザインの幅が広がることは間違いありませんので、まずはどのようなものかを理解していきましょう。

HTML は最初の直下セレクタと同じものを利用します。

5行目の定義にあるチルダが間接セレクタを表します。言葉で説明すると次の通りです。

outer3 クラスの子要素である div タグの次に現れる同じ階層の p タグに対するスタイル

それでは画面描画結果を確認ください。

間接セレクタ表示サンプル

P 要素0

DIV 要素1

DIV 内 P 要素

P 要素1

P 要素2

DIV 要素2

DIV 内 P 要素

P 要素3

P 要素4

outer3 クラスの子要素の div タグに対する同じ階層の p タグが P 要素1P 要素4になります。DIV 内 P 要素は、div タグと同じ階層ではないため対象外となります。間接セレクタとは兄弟要素に対して指定するものと覚えておくと良いでしょう。

PAGE TOP ↑