Keine CSS-Selektoren

70

Gibt es eine Art "nicht" CSS-Selektor?

Wenn ich beispielsweise die folgende Zeile in mein CSS schreibe, haben alle Eingabefelder in einem Tag mit dem Klassennamen der Klasse einen roten Hintergrund.

.classname input {
  background: red;
}

Wie wähle ich alle Eingabefelder aus, die sich AUSSERHALB eines Tags mit Klassenklassenname befinden ?

css css-selectors BlaM
quelle

Antworten:

52


Mit der aktuellen Browser-CSS-Unterstützung ist dies nicht möglich.

Neuere Browser unterstützen es jetzt - siehe Sams Antwort für weitere Informationen.

(Siehe die anderen Antworten für die Alternativen in CSS.)


Wenn dies in JavaScript / jQuery zulässig ist, können Sie Folgendes tun:

$j(':not(.classname)>input').css({background:'red'});
Peter Boughton
quelle
1
Wäre der Selektor nicht "*: not (.classname) input"?
Zack The Human
Ah, verstehe die Frage falsch. Ja, das sollte es - obwohl das * optional ist.
Peter Boughton
Ah, außerdem muss ein direkter Nachkomme (a> b) anstelle eines Nachkommen (ab) verwendet werden, da sonst alle Eingaben übereinstimmen, da es wahrscheinlich einen höheren Container ohne die Klasse gibt (wie body).
Peter Boughton
4
Sie können dies jetzt mit CSS in aktuellen Browsern tun - siehe Antwort unten.
Sam Dutton
Abgestimmt; Wenn Sie dies in jQuery tun können, sollten Sie es in reinem JavaScript tun, ohne zusätzliche Bandbreite im Wert von 70 KB auszugeben, die verarbeitet werden muss.
John
32

Mozilla unterstützt die Negations-Pseudoklasse :

:not(.classname) input {background: red;}

Siehe auch: http://developer.mozilla.org/en/Mozilla_CSS_support_chart

ultracrepidarian
quelle
1
ie9 + unterstützen dies auch.
Chovy
auch Chrom, Safari und Oper, scrollen Sie nach unten und lesen Sie weitere Antworten, wenn Sie mir nicht glauben; P
Rooster
Oh, ich glaube dir. Ich habe mich einfach nie darum gekümmert, meine Antwort, die ich vor genau 6 Jahren und 1 Woche gegeben habe, zu erweitern. : D
ultracrepidarian
Danke dafür. Nur um Ihre Antwort zu ergänzen ... Ich wollte allen Tags, die Nachkommen meines Headers waren, Stile hinzufügen, mit Ausnahme eines Tags mit der Klasse (.no_in_cart). Mit Ihrer Lösung habe ich also versucht: #headernav li: not ( .no_in_cart) a {background: red;}, das nicht funktioniert hat, also habe ich dieses #headernav li a: not (.no_in_cart) {background: red;} ausprobiert, das funktioniert hat.
Sarah
29

Beachten Sie, dass sich die Negationspseudoklasse in der Selectors Level 3-Empfehlung befindet und (zumindest) in neueren Versionen von Firefox, Chrome und Safari funktioniert. Beispielcode unten.

<html>
<head>
<title>Negation pseudo class</title>
<style type="text/css">
    div {
    border: 1px solid green;
    height: 10px;
    }
    div:not(#foo) {
    border: 1px solid red;
    }
</style>
</head>
<body>
    <div id="foo"></div>
    <div id="bar"></div>
    <div id="foobar"></div>
</body>
</html>
Sam Dutton
quelle
5
Wird jetzt in freigegebenen Versionen aller gängigen Browser unterstützt. ( Automatisierter Test verfügbar, wenn Sie überprüfen möchten, ob dies :not()unterstützt wird.)
Dan Cecile
2
Vielleicht auch erwähnenswert, dass Sie sie miteinander div:not(#foo):not(#bar)
verketten
FWIW Ich habe eine einfache Demo für negative Selektoren unter simpl.info/cssnegativeselector veröffentlicht .
Sam Dutton
24

Würden Sie das nicht tun, indem Sie den 'globalen' Hintergrund auf Rot setzen und dann den Klassennamen verwenden, um die anderen zu ändern?

input { background: red; }
.classname input { background: white; }
Harper Shelby
quelle
Genau dafür versuche ich eine
Problemumgehung
Überschreiben Sie jede der Optionen in der .classname inputRegel.
Daniel A. White
Sie versuchen ".classname input {Hintergrundfarbe: weiß! wichtig;}" ??
AgelessEssence
10

Ich würde das tun

input { /* styles outside of .classname */ }
.classname input { /* styles inside of .classname, overriding above */ }
Daniel A. White
quelle
1

Es gibt keine Möglichkeit, das übergeordnete Element übereinstimmender Elemente mit CSS auszuwählen. Sie müssten JavaScript verwenden, um sie auszuwählen.

Aufgrund Ihrer Frage gehe ich davon aus, dass Sie ein Markup haben, das mehr oder weniger so aussieht:

<form class="formclassname">
    <div class="classname">
        <input />  <!-- Your rule matches this -->
        <input />  <!-- Your rule matches this -->
    </div>
    <input />  <!-- You want to select this? -->
    <input />  <!-- You want to select this? -->
</form>

Eine Möglichkeit besteht darin, einem höheren Element eine Klasse hinzuzufügen, z. B. das <form>, und eine Regel zu schreiben, um alle Eingaben des Formulars zu formatieren. IE:

.formclassname input {
  /* Some properties here... */
}

Oder

.formclassname > input {
  /* Some properties here... */
}

Wenn Sie sie aufgrund der Tatsache auswählen möchten, dass sie sich nicht in einem Element mit einer bestimmten Klasse befinden, haben Sie ohne die Verwendung von JavaScript kein Glück.

Zack der Mensch
quelle
0

Ich denke, das Beste, was Sie erreichen können, ist, nur direkte Nachkommen mit einer Erklärung zu beeinflussen

Dieser Code wirkt sich beispielsweise nur auf Eingabefelder direkt unter divs mit der Klasse "maincontent" aus.

div.maincontent > input {
  // do something
}
Dan Roberts
quelle
0

Eingaben sind etwas ärgerlich, da es im Gegensatz zu den meisten anderen HTML-Elementen nicht unbedingt eine Möglichkeit gibt, alle CSS-Eigenschaften auf ihren Standardwert zurückzusetzen.

Wenn das Styling nicht kritisch ist (dh schön zu haben, aber die Funktionalität nicht beeinträchtigt), würde ich jQuery verwenden, um ein Array aller Eingaben abzurufen, ihre Eltern zu überprüfen und das Styling dann nur für diejenigen außerhalb dieses Div durchzuführen. Etwas wie:

$('input').each(function() {
     if($(this).closest('.classname') == false)
     {
           // apply css styles
     }
});

(Übrigens bin ich kein jQuery-Experte, daher kann es einige Fehler geben, aber im Prinzip sollte so etwas funktionieren.)

whereesrhys
quelle