CSSで直前の要素を指定する方法！:has()セレクタと隣接セレクタを併用して対応できる

質問

特定の要素の直前にある要素に CSS を設定したい。直後の要素は隣接セレクタ (+) で表現できるが、直前を指定することはできるのか？

対応方法

:has() セレクタと隣接セレクタ (+) を併用すれば取得できる。ただし :has() は Firefox が未サポート。その他、すべての主要ブラウザはサポートしています。

直前の要素を指定する CSS

実装したい内容

「要素Ｂ」の直前にある「要素Ａ」だけ CSS を反映させたい。その他のケースでは反映させたくない。

<div class="testA">要素Ａ</div>
<div class="testB">要素Ｂ</div>
<div class="testA">要素Ａ</div>
<div class="testC">要素Ｃ</div>

実装方法（サンプルプログラム）

直後に「要素Ｂ」を持つ「要素Ａ」の要素に対して CSS を定義すれば OK です。:has() に隣接セレクタを適用させることで、特定の要素に対する直前の要素を指定できます。

.testA:has(+ .testB) {
  background-color: #000;
  color: yellow;
}
.testB, .testC {
  color: blue;
}

実行結果

CSS を反映させた結果がこちら。

「要素Ｂ」の直前にある「要素Ａ」は CSS が反映され、その他の「要素Ａ」には何も反映されない動作になりました。