web-dev-qa-db-fra.com

Y a-t-il un sélecteur CSS pas égal?

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 d'entrée, par exemple.

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

et puis sautez simplement cette balise de CSS.

Comment je peux faire ça?

La seule façon dont je peux voir serait d'ajouter une classe à la balise input et de réécrire le CSS comme suit:

input.mod {
 ...
 ...
}
htmlcsscss3css-selectors
112
Alex Ivasyuv

En CSS3, vous pouvez utiliser le filtre :not(), mais tous les navigateurs ne supportent pas encore complètement CSS3, alors assurez-vous de savoir ce que vous faites qui est maintenant supporté par tous les principaux navigateurs (et ce depuis un certain temps; ceci est une vieille réponse ...).

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; }

Remarque: cette solution de contournement ne devrait plus être nécessaire. Je le laisse ici pour le contexte.

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: green; }
input.avoidme { background-color: white; }
154
Tomas Aschan

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;
}
24
AvatarKava

CSS3 a :not(), mais 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.

8
Andy E

Vous pouvez également aborder ceci en ciblant un attribut comme celui-ci:

input:not([type=checkbox]){ width:100%; }

Dans ce cas, toutes les entrées qui ne sont pas du type "case à cocher" auront une largeur de 100%.

5
Dylan Auty

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
4
Naveed

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"/>
0
Qazzian