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

:not([class])

Tatsächlich wird hiermit 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>

Wird dies unterstützt? Ja: Caniuse.com (abgerufen am 25. August 2014 :

• Unterstützung: 88,85%
• Teilweise Unterstützung: 4,36%
• Gesamt: 93,21%

Lustiger Schnitt, ich googelte für das Gegenteil von: nicht. CSS Negation?

selector[class]  /* the oposite of :not[]*/

Die :not Negationspseudoklasse

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 _:not_ verwenden, um eine Teilmenge übereinstimmender Elemente auszuschließen, die wie normale CSS-Selektoren sortiert sind.

Einfaches Beispiel: Ausschluss nach Klasse

div:not(.class)

Würde alle div Elemente ohne die Klasse _.class_ auswählen

_div:not(.class) {
  color: red;
}_

_<div>Make me red!</div>
<div class="class">...but not me...</div>_

Komplexes Beispiel: Ausschluss nach Typ/Hierarchie

:not(div) > div

Würde alle div Elemente auswählen, die keine Kinder eines anderen div sind

_div {
  color: black
}
:not(div) > div {
  color: red;
}_

_<div>Make me red!</div>
<div>
  <div>...but not me...</div>
</div>_

Komplexes Beispiel: Verketten von Pseudo-Selektoren

Mit der bemerkenswerten Ausnahme, dass _:not_ Selektoren und Pseudoelemente nicht verkettet/verschachtelt werden können, können Sie sie in Verbindung mit anderen Pseudo-Selektoren verwenden.

_div {
  color: black
}
:not(:nth-child(2)){
  color: red;
}_

_<div>
  <div>Make me red!</div>
  <div>...but not me...</div>
</div>_

Browser-Unterstützung usw.

_:not_ ist ein CSS3 Level Selector , die Hauptausnahme in Bezug auf die Unterstützung ist, dass es IE9 + ist

Die Spezifikation macht auch einen interessanten Punkt:

mit dem Pseudo :not() können unbrauchbare Selektoren geschrieben werden. Zum Beispiel :not(*|*), das überhaupt kein Element darstellt, oder foo:not(bar), das foo entspricht, aber eine höhere Spezifität aufweist.

Ich denke das sollte funktionieren:

:not(.printable)

Von "Negative CSS Selector" Antwort .

Ich möchte nur dazu beitragen, dass die obigen Antworten von: not () in angular 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 Rahmen oder Hintergründe usw.) angezeigt werden, wenn Daten hinzugefügt wurden (d. H. Nicht mehr unberührt), diese jedoch ungültig sind.

Beispiel

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

// Deckkraft 0.6 alle "section-" aber nicht "section-name"

Verwenden der Pseudoklasse :not():

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

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>

Wir können die Stärke dieser Pseudoklasse bereits erkennen. Sie ermöglicht es uns, unsere Selektoren durch Ausschließen bestimmter Elemente bequem zu optimieren. 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>

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

Wenn Sie sich für die Kompatibilität mit Internet Explorer interessieren, empfehlen wir die Verwendung von http://selectivizr.com/ .

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