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 ?
Antworten:
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'});
Mozilla unterstützt die Negations-Pseudoklasse :
:not(.classname) input {background: red;}
Siehe auch: http://developer.mozilla.org/en/Mozilla_CSS_support_chart
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>
:not()unterstützt wird.)
div:not(#foo):not(#bar)
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; }
.classname inputRegel.
Ich würde das tun
input { /* styles outside of .classname */ }
.classname input { /* styles inside of .classname, overriding above */ }
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.
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
}
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.)