957 Stimmen

David Nordvall avatar

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

Gefragt el 2 de Februar, 2012
Wann wurde die Frage gestellt
665089 Ansichten
Anzahl der Besuche der Frage
5 Antworten
Anzahl der Fragenantworten
Gelöst
Aktueller Status der Frage

Ich würde gerne eine CSS-Selektor-Regel schreiben, die alle Elemente auswählt, die nicht eine bestimmte Klasse haben. Ein Beispiel: Geben Sie den folgenden HTML-Code ein:

<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 Klasse "printable" haben, in diesem Fall also die nav y a Elemente.

Ist dies möglich?

HINWEIS: In der eigentlichen HTML-Datei, in der ich dies verwenden möchte, wird es eine Menge weiterer Elemente geben, die nicht die Klasse "printable" haben (mir ist klar, dass es im obigen Beispiel andersherum ist).

Gefragt el 2 de Februar, 2012 von David Nordvall

Antworten

Zu viele Anzeigen?

1299voto

BoltClock avatar
BoltClock Punkte 660640

Normalerweise fügen Sie einen Klassenselektor zur :not() Pseudo-Klassen wie diese:

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

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

Wenn Sie jedoch eine bessere Browserunterstützung benötigen (IE8 und ältere Versionen unterstützen keine :not() ), ist es wahrscheinlich besser, Stilregeln für Elemente zu erstellen, die tun die Klasse "druckbar" haben. Wenn sogar das ist nicht machbar, trotz was Sie sagen, über Ihre tatsächliche Markup, müssen Sie möglicherweise Ihre Markup um diese Einschränkung zu arbeiten.

Denken Sie daran, dass je nach den Eigenschaften, die Sie in dieser Regel festlegen, einige von ihnen entweder an Nachkommen vererbt werden können, die son .printable oder sie auf die eine oder andere Weise beeinflussen. Zum Beispiel, obwohl display nicht vererbt wird, wird die Einstellung display: none in einem :not(.printable) verhindert, dass es und alle seine Nachkommen angezeigt werden, da es das Element und seinen Teilbaum vollständig aus dem Layout entfernt. Sie können dies oft umgehen, indem Sie visibility: hidden statt, wodurch sichtbare Nachkommen angezeigt werden können, aber die ausgeblendeten Elemente wirken sich weiterhin auf das Layout aus, wie sie es ursprünglich taten. Kurz gesagt, seien Sie einfach vorsichtig.

Beantwortet el 2 de Februar, 2012 von BoltClock (660640 Punkte )

246voto

Milche Patern avatar
Milche Patern Punkte 18286 
:not([class])

Eigentlich wird damit alles ausgewählt, was keine CSS-Klasse hat ( class="css-selector" ) auf sie angewandt.

Ich habe eine jsfiddle Demo

    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 (Zugriff am 02. Januar 2020) :

  • Unterstützung: 98.74%
  • Teilweise Unterstützung: 0.1%
  • Insgesamt:98,84%

Lustiger Edit, ich habe nach dem Gegenteil von :not gegoogelt. CSS-Negation?

selector[class]  /* the oposite of :not[]*/
Beantwortet el 4 de Marsch, 2014 von Milche Patern (18286 Punkte )

139voto

SW4 avatar
SW4 Punkte 67314

En :not Negations-Pseudoklasse

Die Negation CSS Pseudoklasse, :not(X) , die einen einfachen Selektor X als Argument annimmt. Sie passt auf ein Element, das nicht durch das Argument repräsentiert wird. X darf kein anderes Negationsselektor enthalten.

Sie können verwenden :not um eine beliebige Untergruppe von übereinstimmenden Elementen auszuschließen, die wie normale CSS-Selektoren angeordnet sind.

Einfaches Beispiel: Ausschluss nach Klasse

div:not(.class)

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

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 auswählen div Elemente, die keine Kinder eines anderen sind div

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

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

Komplexes Beispiel: Verkettung von Pseudoselektoren

Mit der bemerkenswerten Ausnahme, dass sie sich nicht aneinander ketten/nesten können :not Selektoren und Pseudoelemente, die Sie in Verbindung mit anderen Pseudoselektoren verwenden können.

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 eine CSS3-Ebene Selektor Die wichtigste Ausnahme in Bezug auf die Unterstützung ist, dass es sich IE9+

Die Spezifikation enthält auch einen interessanten Punkt:

die :not() Pseudo erlaubt es, nutzlose Selektoren zu schreiben. Für zum Beispiel :not(*|*) , foo:not(bar) , was gleichbedeutend ist mit foo b Spezifität.

Beantwortet el 2 de Januar, 2015 von SW4 (67314 Punkte )

32voto

Eregrith avatar
Eregrith Punkte 4203

Ich denke, das sollte funktionieren:

:not(.printable)

Von "negativer css-Selektor" Antwort .

Beantwortet el 2 de Februar, 2012 von Eregrith (4203 Punkte )

12voto

BaneStar007 avatar
BaneStar007 Punkte 358

Ich möchte nur anmerken, dass die oben genannten Antworten von :not() in Angular-Formularen sehr effektiv sein können, anstatt Effekte zu erzeugen oder die Ansicht/DOM anzupassen,

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

Stellt sicher, dass die Eingabefelder beim Laden Ihrer Seite nur dann ungültig sind (rote Ränder oder Hintergründe usw.), wenn ihnen Daten hinzugefügt wurden (d. h. sie sind nicht mehr unberührt), aber ungültig sind.

Beantwortet el 6 de April, 2016 von BaneStar007 (358 Punkte )

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

Yandex
X