Blogブログ

子から親参照する方法

cssは親から子参照することによって装飾内容を指定できますが、基本的にその逆はできません。

<ul class="list">
<li>リスト1-1</li>
<li>リスト1-2</li>
<li>
リスト1-3
<ul>
<li>リスト2-1</li>
<li>リスト2-2</li>
<li>リスト2-3</li>
</ul>
</li>
</ul>

例えば上記のようなリストで組まれているときに
ulを入れ子にしているliにだけcssで変更する場合、以下のような書き方になると思います。

ul li:nth-child(3) {
background: #ff0000;
}

これがn番目ではなく
何番目のliタグであろうとulが入れ子になったら、その該当するliだけにcssが適用される
というような指定ができれば、nth-child(n)で上から数えて何番目かというのがなくなるので便利になるかと思います。

その方法が以下になるのですが、cssとしては使用不可。残念です。

li:has(> ul)

ですが、jqueryだと逆参照が可能になります。

<script>
$(function(){
$("li").has("ul").css("background","#ff0000");
});
</script>

これならばli内にulをもってる要素のみcssを適用できます。
今はjqueryのみですが、css4が登場するとしたらその時に実装されると思われるので使用できる日が楽しみです。