【CSS】隣接する要素にスタイルを適用する方法

CSSは、Webページのレイアウトやデザインを制御するための強力な言語です。しかし、その中にはまだ広く知られていない、しかし非常に便利な機能がいくつかあります。今日の記事では、その一つ、隣接兄弟コンビネータについて詳しく説明します。このセレクタを使用すると、特定の要素のすぐ後ろにある要素を選択し、その要素にスタイルを適用することができます。

さらに、一見難しそうな「前の要素」へのスタイリングについても、いくつかのクリエイティブな手法を通じて探ります。これらのテクニックを駆使することで、より高度なCSSスタイリングを実現し、Webページのデザインを次のレベルに引き上げることができます。では、隣接兄弟コンビネータの魅力に一緒に迫っていきましょう。

隣接兄弟コンビネータとは

隣接兄弟コンビネータは、ある要素のすぐ後ろにある兄弟要素を選択します。このセレクタは、+ 記号で表現されます。具体的には、element1 + element2の形で記述します。ここでelement1は前の要素、element2は後の要素を指します。

p + div {
    color: red;
}

この例では、

要素の直後にある

p:not(div ~ p) {
    /* CSS rules here */
}