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

645

特定のクラスを持たないすべての要素を選択する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要素です。

これは可能ですか？

注：これを使用したい実際のHTMLでは、「印刷可能」クラスを持たない要素が多くなります（上記の例ではその逆です）。

html  css  css-selectors 
— デビッド・ノードヴァル
ソース

回答:

899

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

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

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

しかし、あなたは、より良いブラウザのサポートが必要な場合（IE8と古いサポートしていない:not()）、あなたは要素のスタイルルールを作成するオフ、おそらくより良いね行う「印刷可能」クラスを持っています。実際のマークアップについて何を言っているにも関わらずそれが実現できない場合は、その制限を回避してマークアップを処理する必要がある場合があります。

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

— ボルトクロック
ソース
4
情報の小さなナゲットとして、CSSのメディアに依存しない側面に対するブラウザーのサポートは、多くの場合、メディアタイプ全体で同じです。ブラウザーが:not()画面でサポートしていない場合、印刷でもサポートしません。
— BoltClock
19
単純なセレクター:not()しか受け取らないことに注意してください。つまり、ネストされたセレクターを含めることはできません:not(div .printable)
— 。W3C
1
.active a：not（.active a）で試したところ、うまくいきませんでした。しかし、a：not（.active）はそうしました！
— user2367418 2018年
あなたはそれがあなたのために動作しませんでしたと言うとき、あなたはおそらく、それが機能しなかった意味あなたのために右、？これは、機能しないことを意味するのではなく、おそらく特定性のケースです- :not(.active)ルールのプロパティは、優先度の高いルールのプロパティによって単にオーバーライドされた可能性があります。
— 18年
1
@Kilves：それでよろしいですか？特異性が:not()あることを意味し、その引数のもの:not(div)にも同様に固有ですdiv、:not(.cls)と.clsと:not(#id)します#id。
— BoltClock
179 
:not([class])

実際には、CSSクラス（class="css-selector"）が適用されていないものはすべて選択されます。

jsfiddleデモを作成しました

    h2 {color:#fff}
    :not([class]) {color:red;background-color:blue}
    .fake-class {color:green}
    <h2 class="fake-class">fake-class will be green</h2>
    <h2 class="">empty class SHOULD be white</h2>
    <h2>no class should be red</h2>
    <h2 class="fake-clas2s">fake-class2 SHOULD be white</h2>
    <h2 class="">empty class2 SHOULD be white</h2>
    <h2>no class2 SHOULD be red</h2>
スニペットを展開

これはサポートされていますか？ はい：Caniuse.com（2020年1月2日アクセス）：

  • サポート：98.74％
  • 部分サポート：0.1％
  • 合計：98.84％

おかしい編集、私は：notの反対をググってた。CSS否定？

selector[class]  /* the oposite of :not[]*/
— ミルチェ・パターン
ソース
109

:not否定擬似クラス

否定CSS擬似クラスは:not(X)、単純なセレクタXを引数として取る関数表記です。引数で表されない要素と一致します。Xには別の否定セレクターを含めることはできません。

を使用:notして、通常のCSSセレクターと同じように順序付けされた、一致する要素のサブセットを除外できます。

簡単な例：クラスによる除外

div:not(.class)

divクラスのないすべての要素を選択します.class

div:not(.class) {
  color: red;
}
<div>Make me red!</div>
<div class="class">...but not me...</div>
スニペットを展開

複雑な例：タイプ/階層による除外

:not(div) > div

div別の子を持たないすべての要素を選択しますdiv

div {
  color: black
}
:not(div) > div {
  color: red;
}
<div>Make me red!</div>
<div>
  <div>...but not me...</div>
</div>
スニペットを展開

複雑な例：疑似セレクターのチェーン

:notセレクターと疑似要素をチェーン/ネストできないという顕著な例外を除いて、他の疑似セレクターと組み合わせて使用​​できます。

div {
  color: black
}
:not(:nth-child(2)){
  color: red;
}
<div>
  <div>Make me red!</div>
  <div>...but not me...</div>
</div>
スニペットを展開

ブラウザのサポートなど

:notあるCSS3レベルセレクタは、支持体の面で主な例外は、それがあることです IE9 +

仕様は興味深い点も示しています。

:not()擬似は、無駄なセレクタが書き込むことができます。たとえば:not(*|*)、要素をまったく表さない、または foo:not(bar)と同等fooですが、より高い特異性があります。

— SW4
ソース
3
それは夕食の十分に文書化され、よく例示された答えでした！#thumbsup
— ジョナサンブレドクリステンセン、
OK、あなたの例:not(div) > divは直接の親だけで動作します。他の祖父はどうですか？
— FindOut_Quran 2016
素晴らしい情報！ちょうど私が必要なもの！ありがとう！
— ジェイミー
9

上記の：not（）の回答が効果を作成したり、ビュー/ DOMを調整したりするのではなく、角度のある形式で非常に効果的であると貢献するのと同じように、 

input.ng-invalid:not(.ng-pristine) { ... your css here i.e. border-color: red; ...}

ページの読み込み時に、入力フィールドにデータが追加されている（つまり、元の状態ではなくなっている）が無効である場合にのみ、入力フィールドに無効（赤い境界線や背景など）が表示されるようにします。

— BaneStar007
ソース
7

例

  [class*='section-']:not(.section-name) {
    @include opacity(0.6);
    // Write your css code here
  }

// Opacity 0.6 all "section-" but not not "section-name"

— ハカン
ソース
2

:not(.class)前述のようにセレクターを使用できます。

Internet Explorerの互換性に関心がある場合は、http：//selectivizr.com/を使用することをお勧めします。

しかし、Apacheで実行することを忘れないでください。そうしないと、効果がわかりません。

— メルコルネメシス
ソース
3
Apacheで実行するとはどういう意味ですか？Selectivizrはフロントエンド
— ライブラリ
ajaxリクエストを実行します-httpサーバーなしでは機能しません。
— MelkorNemesis 2014
2

:not()疑似クラスを使用する：

特定の要素以外のすべてを選択します。:not() CSS疑似クラスを使用できます。:not()疑似クラスが必要ですCSS引数としてセレクタ。セレクターは、引数として指定された要素を除くすべての要素にスタイルを適用します。

例：

/* This query selects All div elements except for   */
div:not(.foo) {
  background-color: red;
}


/* Selects all hovered nav elements inside section element except
   for the nav elements which have the ID foo*/
section nav:hover:not(#foo) {
  background-color: red;
}


/* selects all li elements inside an ul which are not odd */
ul li:not(:nth-child(odd)) { 
  color: red;
}
<div>test</div>
<div class="foo">test</div>

<br>

<section>
  <nav id="foo">test</nav>
  <nav>Hover me!!!</nav>
</section>
<nav></nav>

<br>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
スニペットを展開

この疑似クラスの機能はすでに確認できています。特定の要素を除外することで、セレクターを簡単に微調整できます。さらに、この疑似クラスはセレクターの特異性を高めます。例えば：

/* This selector has a higher specificity than the #foo below */
#foo:not(#bar) {
  color: red;
}

/* This selector is lower in the cascade but is overruled by the style above */
#foo {
  color: green;
}
<div id="foo">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
スニペットを展開

— ウィレムファンデルヴィーン
ソース
0

ログインしているクラスがない場合に、特定のクラスメニューに特定のCSSを設定する場合：

body:not(.logged-in) .menu  {
    display: none
}
— ミハイ
ソース
-1

他の人が言ったように、あなたは単に：not（.class）を置きます。CSSセレクターについては、このリンクにアクセスすることをお勧めします。これは、私の旅の全体を通して非常に役に立ちました。https： //code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

div:not(.success) {
  color: red;
}

否定疑似クラスは特に役立ちます。コンテナーのIDを持つdivを除くすべてのdivを選択するとします。上記のスニペットはそのタスクを完全に処理します。

または、段落タグ以外のすべての要素（推奨されません）を選択したい場合は、次のようにします。

*:not(p) {
  color: green;
}
— HBhering
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.