it-swarm.com.de

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

Ich möchte eine CSS-Auswahlregel schreiben, die alle Elemente auswählt, die nicht eine 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 über die Klasse "printable" verfügen, die in diesem Fall die Elemente nav und a sind.

Ist das möglich?

HINWEIS: In dem tatsächlichen HTML, in dem ich dies verwenden möchte, wird es viel mehr Elemente geben, die nicht die Klasse "printable" haben als tun (ich merke, dass es umgekehrt ist im obigen Beispiel).

575
David Nordvall

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

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

Wenn Sie jedoch eine bessere Browserunterstützung benötigen (IE8 und ältere Versionen unterstützen :not() nicht), sollten Sie Stilregeln für Elemente erstellen, die do die Klasse "printable" haben. Wenn dies trotz Ihrer Aussagen zu Ihrem tatsächlichen Markup nicht möglich ist, müssen Sie Ihr Markup möglicherweise um diese Einschränkung herumarbeiten.

Beachten Sie, dass abhängig von den Eigenschaften, die Sie in dieser Regel festlegen, einige von ihnen entweder von Nachkommen geerbt werden, die are.printable sind, oder sie auf die eine oder andere Weise beeinflussen. Obwohl display nicht vererbt wird, verhindert die Einstellung von display: none für :not(.printable), dass das Element und alle untergeordneten Elemente angezeigt werden, da das Element und sein Teilbaum vollständig aus dem Layout entfernt werden. Sie können dies häufig umgehen, indem Sie stattdessen visibility: hidden verwenden, damit sichtbare Nachkommen angezeigt werden. Die ausgeblendeten Elemente wirken sich jedoch weiterhin auf das ursprüngliche Layout aus. Kurz gesagt, sei einfach vorsichtig.

814
BoltClock
: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[]*/
154
Milche Patern

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.

100
SW4

Ich denke das sollte funktionieren:

:not(.printable)

Von "Negative CSS Selector" Antwort .

20
Eregrith

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.

9
BaneStar007

Beispiel

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

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

4
Hakan

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

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.

2
MelkorNemesis