Esiste qualche tipo di selettore CSS "negativo"?Selettori CSS negativi
Ad esempio, quando scrivo la seguente riga nel mio CSS, tutti i campi di immissione all'interno di un tag con classe nome classe avranno uno sfondo rosso.
.classname input {background: red;}
Come faccio a selezionare tutti i campi di input che sono al di fuori di un tag con classe classname?
Con il supporto del browser CSS attuale, non si può.
I nuovi browser ora lo supportano- vedere Sam's answer per ulteriori informazioni.
(Vedi altre risposte per le alternative in CSS.)
Se farlo in JavaScript/jQuery è accettabile, si può fare:
$j(':not(.classname)>input').css({background:'red'});
Non c'è modo di selezionare il genitore di elementi corrispondenti con CSS. Dovresti usare JavaScript per selezionarli.
Dalla tua domanda suppongo avete markup che sembra più o meno così:
<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>
Una possibilità è quella di aggiungere una classe a un elemento più alto, dicono che il <form>, e scrivere una regola per lo stile tutto degli input del modulo. IE:
.formclassname input {
/* Some properties here... */
}
O
.formclassname > input {
/* Some properties here... */
}
Se si desidera selezionare loro sulla base del fatto che essi non sono all'interno di un elemento con una specifica classe, sei fuori di fortuna, senza l'uso di JavaScript.
Non lo farebbe impostando lo sfondo "globale" su rosso, quindi utilizzando il nome della classe per modificare gli altri?
input { background: red; }
.classname input { background: white; }
Questo è esattamente quello che cerco di trovare una soluzione per perché non è solo lo sfondo che è cambiato ... – BlaM
Override ciascuna delle opzioni nel '.classname input' regola. –
si prova ".classname input {background-color: white! Important;}" ?? – AgelessEssence
farei questo
input { /* styles outside of .classname */ }
.classname input { /* styles inside of .classname, overriding above */ }
Penso che il più vicino si può ottenere riguarda solo i discendenti diretti con una dichiarazione
Questo codice, ad esempio, interesserà solo i campi di immissione direttamente sotto div con classe "maincontent"
div.maincontent > input {
// do something
}
Gli input sono un po 'fastidiosi perché, a differenza della maggior parte degli altri elementi html, non c'è necessariamente un modo per reimpostare tutte le proprietà CSS al loro valore predefinito.
Se lo stile non è critico (vale a dire è bello avere ma non influisce sulla funzionalità), utilizzerei jQuery per ottenere una serie di tutti gli input, controllare i loro genitori e quindi eseguire solo lo stile su quelli fuori da quel div Qualcosa di simile:
$('input').each(function() {
if($(this).closest('.classname') == false)
{
// apply css styles
}
});
(A proposito, io non sono esperto di jQuery, quindi ci potrebbero essere alcuni errori in quanto sopra, ma in linea di principio una cosa del genere dovrebbe funzionare)
Mozilla supporta negation pseudo-class:
:not(.classname) input {background: red;}
Consulta anche: http://developer.mozilla.org/en/Mozilla_CSS_support_chart
Nota che la classe di negazione pseudo è nel Selectors Level 3 Recommendation e lavora a rec versioni ent di Firefox, Chrome e Safari (almeno). Esempio di codice qui sotto.
<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>
[Ora supportato] (http://caniuse.com/#feat=css-sel3) nelle versioni rilasciate di tutti i principali browser. ([Test automatico] (http://www.css3.info/selectors-test/) disponibile se si desidera ricontrollare che ': not()' è supportato.) –
Forse vale anche la pena aggiungere che si possono concatenare insieme: 'div: not (#foo): not (#bar)' – Daz
FWIW Ho messo una demo demo selettiva semplice su http://simpl.info/cssnegativeselector. –
Il selettore non dovrebbe essere "*: non (. Nomest) input"? –
Ah, ho letto male la domanda. Sì, dovrebbe - sebbene * sia facoltativo. –
Ah, inoltre, è necessario utilizzare il discendente diretto (a> b) piuttosto che qualsiasi discendente (a b) altrimenti tutti gli ingressi corrisponderanno poiché è probabile che ci sia un contenitore più alto senza la classe (come il corpo). –