BinaryDevelop
  1. ホーム
  2. ハイパーリンク

[解決済み】特定のクラスや属性を持たない要素を選択するCSSセレクタを書くことはできますか？

2022-04-13 19:08:19

質問

という要素をすべて選択する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>

printable"クラスを持たないすべての要素を選択するセレクタを書きたいと思います。 ナビ と a 要素を使用します。

これは可能なのでしょうか？

注：実際にこれを使いたいHTMLでは、もっと多くの要素で はありません。 は、printable" クラスを持つものよりも、持たないものです（上の例では逆になっていますね）。

どのように解決するのですか？

通常、クラスセレクタを :not() のような擬似クラスです。 

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

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

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

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

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します