Y at-il un sélecteur CSS pas égal?

Question

Y a-t-il quelque chose comme! = (Pas égal) en CSS? Par exemple, j'ai le code suivant:

 input {
 ... 
 ...
}
 

mais pour certaines entrées je dois annuler cela. J'aimerais faire cela en ajoutant la classe "reset" à la balise input, par exemple

 <input class="reset" ... />
 

et puis sautez simplement cette balise de CSS.

Comment je peux faire ça?

Le seul moyen que je vois serait d'ajouter une classe à la balise input et de réécrire le CSS comme suit:

 input.mod {
 ...
 ...
}
 

Answer 1

En CSS3, vous pouvez utiliser le filtre :not() , mais tous les navigateurs ne prennent pas encore totalement en charge CSS3, alors assurez-vous de savoir ce que vous faites.

Exemple:

 <input type="text" value="will be matched" />
<input type="text" value="will not be matched" class="avoidme" />
<input type="text" value="will be matched" />
 

et le CSS

 input:not(.avoidme) { background-color: green; }
 

Si vous ne souhaitez pas utiliser CSS3, vous pouvez définir le style sur tous les éléments, puis le réinitialiser avec une classe.

 input { background-color: greeen; }
input.avoidme { background-color: white; }
 

Answer 2

Vous pouvez également le faire en "annulant" les modifications de la classe de réinitialisation uniquement en CSS.

 INPUT { 
    padding: 0px;
}
INPUT.reset {
    padding: 4px;
}
 

Answer 3

CSS3 a :not() , mais il n'est pas encore implémenté dans tous les navigateurs. Il est toutefois implémenté dans l'aperçu de la plate-forme IE9.

 input:not(.reset) { }
 

http://www.w3.org/TR/css3-selectors/#negation

En attendant, vous devrez vous en tenir aux méthodes traditionnelles.

Answer 4

Intéressant vient d'essayer cela pour sélectionner un élément DOM à l'aide de JQuery et cela fonctionne! :)

 $("input[class!='bad_class']");
 

Cette page a 168 divs qui n'ont pas la classe 'comment-copy'

 $("div[class!='comment-copy']").length => 168
$("div[class!='.comment-copy']").length => 168
 

Answer 5

au lieu de class = "reset", vous pouvez inverser la logique en ayant class = "valid". Vous pouvez l'ajouter par défaut et supprimer la classe pour réinitialiser le style.

Donc, de votre exemple et Tomas '

 input.valid {
 ... 
 ...
}
 

et

 <input type="text" value="will be matched" class="valid"/>
<input type="text" value="will not be matched" />
<input type="text" value="will be matched" class="valid"/>