【CSS】 「直後」は簡単、「直前」の要素を選択する方法は？

こんにちは、さち です。

先日、「CSS」を書いているときに、直前の要素を選択したいことがありました。

直後の要素を選択する + はありますが、直前の要素を選択する「セレクター」はないんですよね。

ただ、できないわけではありません。既存の「セレクター」を組み合わせることで、実装することは可能です。

実装方法

サンプルソース

.target の直前にある .section だけを選択して、背景色を「緑（ライムグリーン）」にしてみましょう。

<div class="section">section</div>
<div class="target">▲target▲</div>
<div class="section">section</div>
<div class="section">section</div>
<div class="section">section</div>
<div class="target">▲target▲</div>

.section:has(+.target) {
  background: limegreen;
  color: white;
}

.target {
  font-weight: bold;
}

 .section:has(+.target) は直後に .target を持つ .section という意味のセレクター。つまり、.target の直前にある .section と同じ意味になります。

結果

ちゃんと、.target の直前にある .section だけ、背景色が「緑（ライムグリーン）」になっていますね。