☰

特定のクラスや属性を持たない要素を選択する CSS セレクターを記述できますか? 質問する

tag-icon • tag-icon html css css-selectors
特定のクラスや属性を持たない要素を選択する CSS セレクターを記述できますか? 質問する

特定のクラスを持たないすべての要素を選択する CSS セレクター ルールを記述したいと思います。たとえば、次の HTML があるとします。

<html class="printable">
    <body class="printable">
        <h1 class="printable">Example</h1>
        <nav>
            <!-- Some menu links... -->
        </nav>
        <a href="javascript:void(0)" onclick="javascript:self.print()">Print me!</a>
        <p class="printable">
            This page is super interresting and you should print it!
        </p>
    </body>
</html>

この場合はnav 要素とa要素である、「printable」クラスを持たないすべての要素を選択するセレクターを作成したいと思います。

これは可能ですか？

注: これを使用したい実際の HTML では、 「printable」クラスを持たない要素の方が、持つ要素よりもはるかに多くなります (上記の例では逆になっていることに気付きました)。

ベストアンサー1

:not()通常、次のように擬似クラスにクラスセレクターを追加します。

:not(.printable) {
    /* Styles */
}

:not([attribute]) {
    /* Styles */
}

しかし、より優れたブラウザ サポートが必要な場合 (IE8 以前では がサポートされていません) は、"printable" クラスを持つ:not()要素のスタイル ルールを作成した方がよいでしょう。実際のマークアップについて述べたにもかかわらず、それが実現できない場合は、その制限を回避してマークアップを作成する必要があるかもしれません。

このルールで設定するプロパティによっては、その一部が である子孫に継承されるか .printable、何らかの形で子孫に影響を与える可能性があることに留意してください。たとえば、displayは継承されませんが、display: noneに を設定すると:not(.printable)、要素とそのサブツリーがレイアウトから完全に削除されるため、その要素とそのすべての子孫が表示されなくなります。visibility: hidden代わりに を使用してこれを回避できる場合が多くあります。これにより、表示されている子孫は表示されますが、非表示の要素は元どおりレイアウトに影響を与えます。つまり、注意してください。

おすすめ記事