CSSで便利な隣接セレクタの使い方

CSSを記述するのに慣れてきた時に覚えるととても便利なものの１つに、隣接セレクタと呼ばれるものがあります。名前の通り、１つの要素に隣接して記述されている要素にスタイルを指定できるものです。＋を使用して記述します。

隣接セレクタを使ってみよう

では実際に、例を見てみましょう。

上記の様な記述の仕方になります。例えば、h1に隣接するpの文字の色を赤くしたいとします。

この様になります。すると、h1要素に隣接したpだけ文字の色が赤くなります。

表示はこの様な感じになります。うまく活用すると、とても便利ですので覚えておくと良いと思います。

隣接クラスタは直後クラスタ

隣接ってことは、要素の前に記述してある要素も指定できるのではないだろうか？　と疑問に思った方もいると思いますが、それはできません。

隣接とは言いますが、親要素内の隣接した小要素、という決まりがあります。親要素より前に記述してある要素は小要素にはなりませんから、これは隣接していても指定できません。

これと少し似ていてより複雑なものに、間接セレクタがあります。間接セレクタは、同じ親要素の中で、ある小要素以降に出てきた孫要素を指定できるものです。こちらも理解して覚えてしまうと便利ですが、最初は混乱しがちなので、まずは隣接セレクタをしっかりと理解して使いこなせるようにしてみると良いと思います。