疑似クラス:has()はSelectors Level 4の仕様書にあり、この疑似クラスが、一般的に使用できるようになると
1 2 3 4 5 |
<script> $(function(){ $(".itemBox:has(.item)").css('display','block'); }); </script> |
jsで上記のように書いていたものも、下記のように簡潔に書くことができるようになり、
クラス.itemBoxの要素内に.itemというクラス名を持つ子要素が存在した場合に、display:block;というCSSを適用することができます。
1 2 3 |
.itemBox:has(.item){ display:block; } |
1 2 3 |
h1:has(+ p){ display:block; } |
また、上記のようにh1の次にp要素があるh1要素に対してcssを適用など、応用した方法などができます
p要素が来るh1要素のみに一致します。
jsで実行可能ですが、cssだけで簡単に実装できるのは便利ですね
コメント