Kann ich einen CSS-Selektor schreiben, der Elemente auswählt, die KEINE bestimmte Klasse oder kein bestimmtes Attribut haben?

641

Ich möchte eine CSS-Auswahlregel schreiben, die alle Elemente auswählt, die keine bestimmte Klasse haben. Zum Beispiel mit folgendem 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>

Ich möchte einen Selektor schreiben, der alle Elemente auswählt, die nicht die "druckbare" Klasse haben, in diesem Fall das Navi und ein Element.

Ist das möglich?

HINWEIS: In dem tatsächlichen HTML-Code, in dem ich dies verwenden möchte, wird es viel mehr Elemente geben, die nicht über die "druckbare" Klasse verfügen als dies der Fall ist (im obigen Beispiel ist es umgekehrt).

html css css-selectors David Nordvall
quelle

Antworten:

893

Normalerweise fügen Sie der Pseudoklasse einen Klassenselektor hinzu, :not()wie folgt:

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

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

Aber wenn Sie brauchen eine bessere Browser - Unterstützung (IE8 und älter nicht unterstützt :not()), sind Sie wahrscheinlich besser aus Stilregeln für Elemente zu schaffen, tun die „printable“ Klasse. Wenn selbst das trotz Ihrer Aussagen zu Ihrem tatsächlichen Markup nicht möglich ist, müssen Sie Ihr Markup möglicherweise um diese Einschränkung herum bearbeiten.

Beachten Sie, dass abhängig von den Eigenschaften, die Sie in dieser Regel festlegen, einige von ihnen entweder von Nachkommen geerbt werden .printable oder sie auf die eine oder andere Weise beeinflussen. Obwohl dies displaynicht vererbt wird, verhindert das Festlegen display: nonevon a :not(.printable), dass es und alle seine Nachkommen angezeigt werden, da das Element und sein Teilbaum vollständig aus dem Layout entfernt werden. Sie können dies häufig umgehen, indem Sie visibility: hiddenstattdessen verwenden, wodurch sichtbare Nachkommen angezeigt werden. Die ausgeblendeten Elemente wirken sich jedoch weiterhin wie ursprünglich auf das Layout aus. Kurz gesagt, sei einfach vorsichtig.

BoltClock
quelle
4
Als kleine Informationsquelle ist die Browserunterstützung für medienunabhängige Aspekte von CSS häufig für alle Medientypen gleich. Wenn ein Browser :not()auf dem Bildschirm keine Unterstützung bietet, wird er auch im Druck nicht unterstützt.
BoltClock
19
Beachten Sie, dass :not()nur ein einfacher Selektor benötigt wird, was bedeutet, dass er keine verschachtelten Selektoren enthalten kann, wie :not(div .printable)- siehe W3C-Selektorsyntax
Steve Eynon
1
Ich habe es nur für .active a versucht: nicht (.active a) hat bei mir nicht funktioniert. Aber a: nicht (.active) hat!
user2367418
Wenn Sie sagen, dass es bei Ihnen nicht funktioniert hat, meinen Sie wahrscheinlich, dass es bei Ihnen nicht funktioniert hat , oder? Dies bedeutet nicht, dass es nicht funktioniert. Es handelt sich wahrscheinlich um einen Fall von Spezifität. Die Eigenschaften in Ihrer :not(.active)Regel wurden möglicherweise einfach durch Eigenschaften in Regeln mit höherer Priorität überschrieben.
Amn
1
@ Kilves: Bist du dir da sicher? Die Spezifität von :not()ist die seines Arguments, was bedeutet, dass :not(div)es für div, :not(.cls)für .clsund :not(#id)für gleichermaßen spezifisch ist #id.
BoltClock
177 
:not([class])

Tatsächlich wird dadurch alles ausgewählt, auf das keine CSS-Klasse ( class="css-selector") angewendet wurde.

Ich habe eine jsfiddle- Demo gemacht

    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>
Erweitern Sie das Snippet

Wird das unterstützt? Ja: Caniuse.com (abgerufen am 02. Januar 2020) :

  • Unterstützung: 98,74%
  • Teilunterstützung: 0,1%
  • Gesamt: 98,84%

Lustige Bearbeitung, ich googelte für das Gegenteil von: nicht. CSS-Negation?

selector[class]  /* the oposite of :not[]*/
Milche Patern
quelle
109

Die :notNegationspseudoklasse

Die Negations-CSS-Pseudoklasse :not(X)ist eine funktionale Notation, die einen einfachen Selektor X als Argument verwendet. Es entspricht einem Element, das nicht durch das Argument dargestellt wird. X darf keinen weiteren Negationswähler enthalten.

Sie können verwenden :not, um eine Teilmenge übereinstimmender Elemente auszuschließen, die wie normale CSS-Selektoren angeordnet sind.

Einfaches Beispiel: Ausschluss nach Klasse

div:not(.class)

Würde alle divElemente ohne die Klasse auswählen.class

div:not(.class) {
  color: red;
}
<div>Make me red!</div>
<div class="class">...but not me...</div>
Erweitern Sie das Snippet

Komplexes Beispiel: Ausschluss nach Typ / Hierarchie

:not(div) > div

Würde alle divElemente auswählen , die keine Kinder eines anderen sinddiv

div {
  color: black
}
:not(div) > div {
  color: red;
}
<div>Make me red!</div>
<div>
  <div>...but not me...</div>
</div>
Erweitern Sie das Snippet

Komplexes Beispiel: Verkettung von Pseudo-Selektoren

Mit der bemerkenswerten Ausnahme, dass :notSelektoren und Pseudoelemente nicht verkettet / verschachtelt werden können, können Sie sie in Verbindung mit anderen Pseudoselektoren verwenden.

div {
  color: black
}
:not(:nth-child(2)){
  color: red;
}
<div>
  <div>Make me red!</div>
  <div>...but not me...</div>
</div>
Erweitern Sie das Snippet

Browser-Unterstützung usw.

:notist ein CSS3-Level-Selektor . Die Hauptausnahme in Bezug auf die Unterstützung ist, dass es sich um IE9 + handelt

Die Spezifikation macht auch einen interessanten Punkt:

Das :not()Pseudo ermöglicht das Schreiben nutzloser Selektoren. Zum Beispiel :not(*|*), das überhaupt kein Element darstellt oder foo:not(bar)das äquivalent ist, fooaber eine höhere Spezifität aufweist.

SW4
quelle
3
Das war eine gut dokumentierte und gut untersuchte Antwort zum Abendessen! #thumbsup
Jonathan Bredo Christensen
Ok, dein Beispiel :not(div) > divwürde nur mit direkten Eltern funktionieren. Was ist mit anderen Großvätern?
FindOut_Quran
Tolle Infos! Genau das, was ich brauchte! Vielen Dank!
Jamie
9

Ich möchte nur dazu beitragen, dass die obigen Antworten von: not () in eckigen Formen sehr effektiv sein können, anstatt Effekte zu erzeugen oder die Ansicht / das DOM anzupassen. 

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

Stellt sicher, dass beim Laden Ihrer Seite in den Eingabefeldern nur ungültige (rote Ränder oder Hintergründe usw.) angezeigt werden, wenn Daten hinzugefügt wurden (dh nicht mehr makellos sind), die jedoch ungültig sind.

BaneStar007
quelle
7

Beispiel

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

// Deckkraft 0,6 alle "Abschnitts-" aber nicht "Abschnittsname"

Hakan
quelle
2

Sie können den :not(.class)Selektor wie oben erwähnt verwenden.

Wenn Sie sich für die Kompatibilität mit dem Internet Explorer interessieren, empfehlen wir Ihnen, http://selectivizr.com/ zu verwenden .

Aber denken Sie daran, es unter Apache auszuführen, sonst sehen Sie den Effekt nicht.

MelkorNemesis
quelle
3
Was meinst du damit, es unter Apache laufen zu lassen? Selectivizr ist eine Front-End-Bibliothek, die nichts mit der Serversoftware zu tun hat
Kloar
Es führt eine Ajax-Anfrage aus - das funktioniert nicht ohne einen http-Server.
MelkorNemesis
2

Verwenden der :not()Pseudoklasse:

Zum Auswählen von allem außer einem bestimmten Element (oder Elementen). Wir können die :not() CSS-Pseudoklasse verwenden . Die :not()Pseudoklasse benötigt einen CSSSelektor als Argument. Der Selektor wendet die Stile auf alle Elemente mit Ausnahme der Elemente an, die als Argument angegeben sind.

Beispiele:

/* 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>
Erweitern Sie das Snippet

Wir können bereits die Leistungsfähigkeit dieser Pseudoklasse erkennen. Sie ermöglicht es uns, unsere Selektoren bequem zu optimieren, indem bestimmte Elemente ausgeschlossen werden. Darüber hinaus erhöht diese Pseudoklasse die Spezifität des Selektors . Zum Beispiel:

/* 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>
Erweitern Sie das Snippet

Willem van der Veen
quelle
0

Wenn Sie eine bestimmte Klasse wollen Menü eine bestimmte CSS haben , wenn fehlende Klasse angemeldet in :

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

Wie andere sagten, sagen Sie einfach: nicht (.class). Für CSS-Selektoren empfehle ich den Besuch dieses Links. Er war während meiner gesamten Reise sehr hilfreich: https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

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

Die Negationspseudoklasse ist besonders hilfreich. Angenommen, ich möchte alle Divs auswählen, mit Ausnahme derjenigen, die die ID eines Containers hat. Das obige Snippet wird diese Aufgabe perfekt erledigen.

Oder wenn ich jedes einzelne Element (nicht empfohlen) außer Absatz-Tags auswählen wollte, könnten wir Folgendes tun:

*:not(p) {
  color: green;
}
HBhering
quelle