`:has`を使って「特定の要素が後ろにある場合」にマッチ

これまでのCSSは、要素の並び順によりスタイルングは「特定の要素に続く要素へのスタイリング」が可能でした。
しかし、最近導入された:has セレクタを利用すると、「特定の要素が『後ろ』に続く要素へのスタイリング」できるようになります。

サンプル:

四角形の要素は丸の要素があとに続く場合、色が変化しテキストが追加されます。次のコードが該当のセレクタです。

.box:has(+ .circle)

:has 擬似クラスは、擬似クラスが指定された要素を基準に（参考: :has() - CSS: カスケーディングスタイルシート | MDN）カッコ内のセレクタを満たす場合にスタイルが有効となります。
このセレクタを文章に置き換えると .boxを起点に、.circleが隣接している場合の.box です。

別の例で考えてみます。

.box:has(> .circle)

これは .box を起点に子要素に.circleが存在する場合の .box です。

名前から想像して、:has 擬似クラスは子孫要素のみを対象にしたセレクタだと勘違いしていました。

リストの間隔を隣接セレクタとmargin-topの組み合わせで指定することがありますが、:hasを使うと次のように書き換えられます。

.item + .item {
  margin-top: 10px;
}

/* :hasを使用 */

.item:has(+ .item) {
  margin-bottom: 10px;
}

セレクタはやや複雑ですが、左から右へ読めるため理解はしやすいかもしれません。

このパターンの用途ですが、う〜ん。。。ぱっとは思いつきません。例えばボタンが連続する場合に、前のボタンの角丸やボーダーを消したい場合に使えるでしょうか。ただ、覚えておいて損はなさそうです。

この記事を書くきっかけになったCSS :has() Interactive Guideには:hasを使った様々なパターンが丁寧なデモつきで紹介されています。是非読んでみてください。