[CSS] 特定の孫要素を含む要素にCSSを追加 [jQuery]

CSS
投稿日:
カテゴリー JavaScript HTML/CSS

特定の孫要素を含む要素にCSSを追加する方法を紹介します。

これはCSSだけでは実現できません。jQueryを使用します。

ソースコード

div.childを孫に持つdiv.parentにCSSを追加します。

HTML

<div class="parent">
    <div>
        <div class="child">
        </div>
    </div>
</div>

jQuery

window.addEventListener('DOMContentLoaded', function() { 
    $("div.parent:has(div.child)").addClass('new-class');
});

window.onloadは、画像などを全て読み込んだ後に実行されるので遅いです。DOMContentLoadedを使用します。

CSS

.new-class{
    display: none;
}

おわりに

私は、WordPressで特定の要素を含むウィジェットを非表示にするのに、この方法を使いました。

広告