2021/2/18 HTML&CSS辞典をオープンしました! コンテンツは随時更新します!

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

隣接セレクタの評価
頻出度
(5.0)
重要度
(5.0)
総合評価
(5.0)




1.隣接セレクタとは?

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




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

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

・・・

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

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

以下のような感じです。

h1 + p {
 color: blue;
}

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

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




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です