CSSは、Webページのレイアウトやデザインを制御するための強力な言語です。しかし、その中にはまだ広く知られていない、しかし非常に便利な機能がいくつかあります。今日の記事では、その一つ、隣接兄弟コンビネータについて詳しく説明します。このセレクタを使用すると、特定の要素のすぐ後ろにある要素を選択し、その要素にスタイルを適用することができます。
さらに、一見難しそうな「前の要素」へのスタイリングについても、いくつかのクリエイティブな手法を通じて探ります。これらのテクニックを駆使することで、より高度なCSSスタイリングを実現し、Webページのデザインを次のレベルに引き上げることができます。では、隣接兄弟コンビネータの魅力に一緒に迫っていきましょう。
隣接兄弟コンビネータとは
隣接兄弟コンビネータは、ある要素のすぐ後ろにある兄弟要素を選択します。このセレクタは、+ 記号で表現されます。具体的には、element1 + element2の形で記述します。ここでelement1は前の要素、element2は後の要素を指します。
p + div {
color: red;
}
この例では、
要素の直後にある
要素に、文字色を赤にするスタイルを適用します。
前の要素へのスタイリング
しかし、CSSは基本的に後ろ向きの選択しかサポートしていません。つまり、一つの要素の前にある要素を直接選択することはできません。ただし、工夫次第で前の要素へのスタイリングも可能です。
p:not(div ~ p) {
/* CSS rules here */
}
このセレクタは、
の後にある
要素を除外し、その他すべての
要素にスタイルを適用します。つまり、
要素の前にある
要素すべてにスタイルが適用されます。
よくある質問（FAQ）
Q. 隣接セレクタ（+）と一般兄弟セレクタ（~）の違いは何ですか？
A.
A + B（隣接セレクタ）はAの直後にある1つのBのみ選択します。A ~ B（一般兄弟セレクタ）はAの後にある全てのBを選択します。例：h2 + pはh2の直後のpだけ・h2 ~ pはh2以降の全てのpを対象にします。Q. チェックボックスのchecked状態に基づいて兄弟要素のスタイルを変えるにはどうすればよいですか？
A.
input[type=checkbox]:checked + labelまたはinput[type=checkbox]:checked ~ .targetで隣接・後続の兄弟要素のスタイルをCSSだけで変更できます。このテクニックはJavaScriptなしでトグルメニューやアコーディオンを実装する「チェックボックスハック」として知られています。Q. CSSセレクタで親要素を選択することはできますか？
A. CSS4の
:has()擬似クラスで「ある要素を含む親」を選択できます：div:has(> p)でp要素を直接子に持つdivを選択。モダンブラウザでは広くサポートされています。従来はJavaScriptを使う必要がありました。まとめ
一般的に、前にある要素を選択する必要がある場合、HTMLの構造を再検討するか、JavaScriptを使用することを検討すると良いでしょう。今回紹介したテクニックを活用することで、より高度なCSSスタイリングが可能になります。
