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

703
David Nordvall 2012-02-02 23:59.

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

これは可能ですか?

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

9 answers

961
BoltClock 2012-02-03 00:02.

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

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

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

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

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

191
Milche Patern 2014-03-05 11:30.
: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[]*/
115
SW4 2015-01-03 02:35.

: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>


ブラウザサポートなど

:notCSS3レベルセレクターですが、サポートに関する主な例外はIE9 +であるということです。

仕様も興味深い点です。

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

25
Eregrith 2012-02-03 00:04.

私はこれがうまくいくと思います:

:not(.printable)

「負のCSSセレクタ」の答え。

9
BaneStar007 2016-04-06 15:02.

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

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

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

7
Hakan 2016-09-21 20:35.

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

//不透明度0.6すべて「セクション-」ですが「セクション名」はありません

2
MelkorNemesis 2013-09-10 06:07.

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

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

ただし、apacheで実行することを忘れないでください。そうしないと、効果が見られません。

2
Willem van der Veen 2018-09-19 08:22.

: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>

1
Mihai 2020-02-06 04:19.

ログインしているクラスがない場合に特定のクラスメニューに特定のCSSを持たせたい場合:

body:not(.logged-in) .menu  {
    display: none
}

Related questions

MORE COOL STUFF

「水曜日」シーズン1の中心には大きなミステリーがあります

「水曜日」シーズン1の中心には大きなミステリーがあります

Netflixの「水曜日」は、典型的な10代のドラマ以上のものであり、実際、シーズン1にはその中心に大きなミステリーがあります.

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ケイト・ミドルトンは、州の夕食会と州の訪問中にカミラ・パーカー・ボウルズからスポットライトを奪いたくなかった、と専門家は言う.

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンが、オリビア・ワイルドが彼女とハリー・スタイルズとの間の「難しい」が「非常に友好的」な分割を恒久的にすることを望んでいる理由を見つけてください.

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする&nbsp;

エリザベス女王の死後、ケイト・ミドルトンが舞台裏で「非常に困難な時期」を過ごしていたと伝えられている理由を調べてください.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

HMSプリンスオブウェールズの橋はスターウォーズからまっすぐです

HMSプリンスオブウェールズの橋はスターウォーズからまっすぐです

BAE Systems Maritimeは昨日、英国海軍の2番目のクイーンエリザベスクラスの空母であるHMSプリンスオブウェールズのブリッジモジュールを展開しました。公海を航海するよりも、アウターリムの惑星を周回してタイファイターを発射する必要があるようです。70,000の排水量のトン運搬船は、2020年に就役し、姉のエリザベス女王と同様に、約40機の航空機を運ぶ予定です。

ルイビルはサヨナラゲームでウェイクフォレストを倒すために家を盗んだ

ルイビルはサヨナラゲームでウェイクフォレストを倒すために家を盗んだ

ルイビルは、通常の大学野球の強みであるピッチング、ディフェンス、スマートベースランニングを通じて、全国ランキングのトップ5と19-2の会議記録への道を歩みました。昨夜、彼らは野球の最もエキサイティングなプレーの1つである盗塁を使用して、ウェイクフォレストのスイープを完了しました。

おいしいツイストのためにコーンブレッドであなたの次のサンドイッチを作りましょう

おいしいツイストのためにコーンブレッドであなたの次のサンドイッチを作りましょう

粗いパン粉とふわふわの食感のコーンブレッドは、唐辛子を吸い上げるのに理想的な乗り物です。しかし、それだけではありません。

別の驚くべきマーベルヒーローがキャプテンアメリカに参加します:シビルウォー!

別の驚くべきマーベルヒーローがキャプテンアメリカに参加します:シビルウォー!

ニール・ブロムカンプが、チャッピーが第10地区をどのように遅らせたのかについて話します。フォースの覚醒の噂は、次の予告編に何を期待するかについてのいじめを提供します。

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、子供向けのパズルの本の序文を書き、ジョージ王子、シャーロット王女、ルイ王子と一緒にテキストを読むと述べた.

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

Yak's Produce は、数十個のつぶれたメロンを野生動物のリハビリ専門家であるレスリー グリーンと彼女のルイジアナ州の救助施設で暮らす 42 匹の動物に寄付しました。

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

8 枚目のスタジオ アルバムのリリースに向けて準備を進めているデミ ロヴァートは、「スーパー グレート ガイ」と付き合っている、と情報筋は PEOPLE に確認しています。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

ホームオフィスのセットアップ術を極めよう!AppExert の開発者は、家族全員が一緒にいる場合でも、在宅勤務の技術を習得しています。祖父や曽祖父が共同家族で暮らしていた頃の記憶がよみがえりました。

2022 年、私たちのデジタル ライフはどこで終わり、「リアル ライフ」はどこから始まるのでしょうか?

20 年前のタイムトラベラーでさえ、日常生活におけるデジタルおよびインターネットベースのサービスの重要性に驚くことでしょう。MySpace、eBay、Napster などのプラットフォームは、高速化に焦点を合わせた世界がどのようなものになるかを示してくれました。

ニューロマーケティングの秘密科学

ニューロマーケティングの秘密科学

マーケティング担当者が人間の欲望を操作するために使用する、最先端の (気味が悪いと言う人もいます) メソッドを探ります。カートをいっぱいにして 3 桁の領収書を持って店を出る前に、ほんの数点の商品を買いに行ったことはありませんか? あなたは一人じゃない。

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

私たちが住んでいる世界を確実に理解するには、データが必要です。ただし、空間参照がない場合、このデータは地理的コンテキストがないと役に立たなくなる可能性があります。

Language