疑似クラス:has()

疑似クラス:has()はSelectors Level 4の仕様書にあり、この疑似クラスが、一般的に使用できるようになると

jsで上記のように書いていたものも、下記のように簡潔に書くことができるようになり、
クラス.itemBoxの要素内に.itemというクラス名を持つ子要素が存在した場合に、display:block;というCSSを適用することができます。

.itemBox:has(.item){
  display:block;
}

h1:has(+ p){
  display:block;
}

また、上記のようにh1の次にp要素があるh1要素に対してcssを適用など、応用した方法などができます

p要素が来るh1要素のみに一致します。

jsで実行可能ですが、cssだけで簡単に実装できるのは便利ですね