[CSS] 隣接セレクタで直後の要素にスタイルを適用しよう!

1.隣接セレクタとは?

セレクタを結合子(+)で区切ると、同じ階層にある要素同士で、 ある要素の直後に隣接している要素を対象にスタイルを適用することができます。

2.隣接セレクタの使い方

それでは隣接セレクタの使い方をみていきましょう。

・・・

<h1>隣接セレクタとは?</h1>
<p>セレクタを結合子(+)で区切ると、同じ階層にある要素同士で、 ある要素の直後に隣接している要素を対象にスタイルを適用することができます。</p>
・・・

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

以下のような感じです。

h1 + p {
 color: blue;
}

隣接セレクタは、実際に使う機会がないと少しイメージがつきづらいかと思います。

隣接セレクタは役立つので、じっくりと時間を掛けて使い方を覚えていきましょう!