◆ 待望のセレクタがついに使えるように
◆ Chrome や Firefox ではまだ使えない

まだ Safari だけ

Safari15.4 で色々新機能が使えるようになりました
個人的にかなり嬉しいのが :has() の対応です

以前から早く実装されてほしいと思っていたものです
日付を見てみると もうこの記事から 5 年以上経ってるんですね……
ただ 残念ながらまだ Chrome や Firefox でも未実装な機能です
https://developer.mozilla.org/ja/docs/Web/CSS/:has

シェア的に Chrome で動けば Firefox や Safari がまだでも使っていけることは多いですが 逆の Safari でだけ動くというのでは使っていくのは難しいところがあります
ですが たいていは Safari が動かないので使えないというパターンなので 先に Safari で動けばあとは Chrome を待つだけです
すでに実装されてるブラウザがあるならきっと Chrome も優先度を上げてくれるでしょう

まぁ 末尾再帰の最適化みたいに Safari だけ動いて Chrome などでは何年も導入されない機能もあるわけで こうはならないでほしいものです
この機能は MDN や Can I use で出てこないようですけど もしやなかったことにされてる？
ES compat table ではありました
https://kangax.github.io/compat-table/es6/

:has()

機能はセレクタの条件として 子孫要素の条件を指定できるものです
「div:has(.foo)」 なら .foo をも子孫要素に持つ div 要素が当てはまります
これは実質セレクタで親に戻ることができます
.foo 要素の親の div クラスと書くのと一緒ですから

例えば a クラスをもつ要素の中で b クラスを持つ要素が内側にあるもののみ文字色を変えます
:has() が動けば 1 と 2 が赤色になります
Safari でプレビューするとちゃんと動きます

<!doctype html>

<style>
	.a:has(.b) {
		color: red;
	}
</style>

<div class="a">
	1
	<div class="b">
		2
	</div>
</div>
<div class="a">
	3
	<div class="c">
		4
	</div>
</div>

もう少し実用的なものだとタブを切り替える UI を作るときに JavaScript でクラス操作なしに表示を切り替えられます
これまででも実現はできたのですが CSS の指定が親に戻れないため HTML 構造的にタブ切り替えボタンとタブの中身が同じ階層で並んでいないといけないみたいな制限がありましたがそれがなくなります

<!doctype html>

<style>
	.tab .tabbar {
		border-bottom: 1px solid #888;
	}

	.tab .tabbar label {
		display: inline-block;
		margin: 5px 5px 0;
		padding: 2px 8px;
		border: 1px solid #888;
		border-bottom: 0;
	}
	
	.tab .tabbar label:has(:checked) {
		background: #8cf;
	}
	
	.tab .tabcontent {
		padding: 8px;
	}

	.tab .tabcontent [data-tab] {
		display: none;
	}

	.tab:has(.tabbar [data-tab="x"]:checked) .tabcontent [data-tab="x"],
	.tab:has(.tabbar [data-tab="y"]:checked) .tabcontent [data-tab="y"] {
		display: block;
	}
</style>

<div class="tab">
	<div class="tabbar">
		<label>
			<input type="radio" name="tab" data-tab="x" checked>
			tab x
		</label>
		<label>
			<input type="radio" name="tab" data-tab="y">
			tab y
		</label>
	</div>
	<div class="tabcontent">
		<div data-tab="x">xxxxxxx</div>
		<div data-tab="y">yyyyyyyyyy</div>
	</div>
</div>

この例だとタブの数だけセレクタがいるので これまでの方法で

.tab-item:checked + .tab-content {
	display: block;
}

のほうが良いかもしれません
でも 親に戻れるということはできることの幅が大きく広がるので CSS だけで済む部分が増えて楽になりそうです

隣系はダメ

今は + を使ってある要素の次の要素を指定できます
ですが 逆の前の要素はできません
:has() があればこういう事ができるかなと思ったのですが 動きませんでした

.foo:has(+.bar) {
	color: red;
}

/*
<div class="foo">ココにスタイルをあてたい</div>
<div class="bar">xxxx</div>
<div class="foo">ココにはスタイルをあてない</div>
*/

:scope を使って

.foo:has(:scope+.bar) {
	color: red;
}

としてみてもダメでした

仕様を見てみると例として + は使われているので 使えてもいいと思うのですが Safari の実装がまだ限定的なのかもしれません
https://drafts.csswg.org/selectors/#relational

追記

Chrome では 105 (今は Canary) から :has() が使えるようになる予定みたいです
期待ですね

追記2

Chrome でも使えるようになったけど隣接が使えない件はどうなったんだろうと調べてみました
手元にあった 15.6 で確認したら普通に動いていました

15.4 では一部実装だったみたいですね
ただ release note では :has の修正があったようなことは書かれてないですけど……
https://developer.apple.com/documentation/safari-release-notes/safari-15_5-release-notes
https://developer.apple.com/documentation/safari-release-notes/safari-15_6-release-notes