特定のクラスまたは属性を持たない要素を選択する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

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは、夫に会ったとき、典型的な交際のアドバイスに逆らいました。

マイケルシーンが非営利の俳優である理由

マイケルシーンが非営利の俳優である理由

マイケルシーンは非営利の俳優ですが、それは正確にはどういう意味ですか?

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

特徴的なスターのコリン・エッグレスフィールドは、RomaDrama Liveでのスリル満点のファンとの出会いについて料理しました!加えて、大会での彼のINSPIREプログラム。

「たどりつけば」をオンラインでストリーミングできない理由

「たどりつけば」をオンラインでストリーミングできない理由

ノーザンエクスポージャーが90年代の最も人気のある番組の1つになった理由を確認するには、Blu-rayまたはDVDプレーヤーをほこりで払う必要があります。

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

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

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

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖は、世界で2番目に大きいボイリング湖です。そこにたどり着くまでのトレッキングは大変で長いですが、努力する価値は十分にあります。

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

サロンからのヘアトリミングや個人的な寄付は、油流出を吸収して環境を保護するのに役立つマットとして再利用できます。

ホワイトハウスの最も記憶に残る結婚式を見てください

ホワイトハウスの最も記憶に残る結婚式を見てください

過去200年以上の間にホワイトハウスで結婚したのはほんの数人です。彼らは誰でしたか、そしてそこで結婚式を獲得するために何が必要ですか?

Netflixのジョエルマクヘイルとのジョエルマクヘイルショーは、ジョエルマクヘイルにぴったりの車を復活させます

Netflixのジョエルマクヘイルとのジョエルマクヘイルショーは、ジョエルマクヘイルにぴったりの車を復活させます

ジョエル・マクヘイル、マイク・コルター(スクリーンショット:Netflix)「私の神よ、これは1つのことを変えます。」これは、ジョエル・マクヘイルとのジョエル・マクヘイルショーの最後のジョークです。リアリティ番組の嘲笑と寛大なスナキネスの時間は、なじみのある顔を見つけます。

チームロケットは20年ぶりにポケモンシリーズでアッシュを破った

チームロケットは20年ぶりにポケモンシリーズでアッシュを破った

画像経由:@pancakeparadox(Twitter)。1997年にポケモンシリーズが初公開されて以来、チームロケット(またはラテンアメリカではチームロケット)として知られる悪役のグループは、何度もアッシュに直面してきました。

今週の科学技術でトランプがめちゃくちゃになったことすべて

今週の科学技術でトランプがめちゃくちゃになったことすべて

画像:ゲッティ私たち全員が千年もの間生きていて、私たちの体が燃える風によってほこりと長引く悲鳴だけに押し流されたと考えるのは驚くべきことです。私たちがそうしていないことを除いて、それはトランプ政権の最初の週の終わりであり、驚くほど多くの恐ろしいことがすでに起こっています。

あなたの「マイクロピッグ」が代わりに通常のピッグになってしまったとしても驚かないでください

あなたの「マイクロピッグ」が代わりに通常のピッグになってしまったとしても驚かないでください

そして今、あることを手に入れていると思っていたが、まったく別のことをしてしまった男の話。CBSニュースは、彼女が「ミニブタ」であるという誤ったふりをしてエスターを養子にしたカナダ人のスティーブジェンキンスの心温まる物語をもたらします。これは、特にせいぜいゴールデンレトリバーまたはセントバーナードをストラップします。

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya shared a sweet photo in honor of boyfriend Tom Holland's 26th birthday Wednesday

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

シーレン「Ms.JuicyBaby」ピアソンは、先月脳卒中で入院した後、「もう一度たくさんのことをする方法を学ばなければならない」ため、言語療法を受けていることを明らかにしました。

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

オスカー受賞者の世紀半ばの家には、3つのベッドルーム、2つのバス、オーシャンフロントの景色があります。

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、生後4か月の娘、モナコに母乳育児をしていると語った。

投資ノート:Bioscout AU$300万シード

投資ノート:Bioscout AU$300万シード

Bioscoutは、農家を運転席に置くという使命を負っています。Artesian(GrainInnovate)やUniseedと並んで、最新のシードラウンドでチームを支援できることをうれしく思います。問題真菌症による重大な作物の損失は、農民にとって試練であることが証明されています。

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

遠隔医療は、パンデミック後の時代では新しいものではなく、時代遅れの分野でもありません。しかし、業界を詳しく見ると、需要と供給の強力な持続可能性と、米国で絶え間ない革命となる強力な潜在的成長曲線を示しています。

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

2021年は、世界的なベンチャーキャピタル(VC)の資金調達にとって記録的な年でした。DealStreetAsiaによると、東南アジアも例外ではなく、この地域では年間で記録的な25の新しいユニコーンが採掘されました。

ムーアの法則を超えて

ムーアの法則を超えて

計算に対する私たちの欲求とムーアの法則が提供できるものとの間には、指数関数的に増大するギャップがあります。私たちの文明は計算に基づいています—建築と想像力の現在の限界を超える技術を見つけなければなりません。

Language