CSS "et" et "ou"

114

J'ai de gros problèmes, car je dois anathématiser le style de certains types d'entrée. J'avais quelque chose comme:

.registration_form_right input:not([type="radio")
{
 //Nah.
}

Mais je ne veux pas trop styliser les cases à cocher.

J'ai essayé:

.registration_form_right input:not([type="radio" && type="checkbox"])
.registration_form_right input:not([type="radio" && "checkbox"])
.registration_form_right input:not([type="radio") && .registration_form_right input:not(type="checkbox"])

Comment utiliser &&? Et je vais devoir l'utiliser ||bientôt, et je pense que l'utilisation sera la même.

Mise à jour:
je ne sais toujours pas comment utiliser ||et &&correctement. Je n'ai rien trouvé dans la documentation W3.

css css-selectors conditional-operator Misiur
la source
17
"anathématiser" Yikes. Vous voulez menacer les gens qui tentent de styliser les cases à cocher avec une rétribution divine? (Vous vouliez probablement dire "exempté" ou similaire, par exemple "Je dois exempter certains types d'entrée d'une règle de style.")
TJ Crowder
3
Eh bien, je
n'ai
4
Je pense que @TJ Crowder l'a probablement compris. Mais c'était drôle ... surtout l'ironie de sa faute d' orthographe « divine » = D
David dit Monica Réintégrer
Excellent ngram , cependant. ; ^)
ruffin

Réponses:

141

&& fonctionne en enchaînant plusieurs sélecteurs comme ceci:

<div class="class1 class2"></div>

div.class1.class2
{
  /* foo */
}

Un autre exemple:

<input type="radio" class="class1" />

input[type="radio"].class1
{
  /* foo */
}

|| fonctionne en séparant plusieurs sélecteurs par des virgules comme ceci:

<div class="class1"></div>
<div class="class2"></div>

div.class1,
div.class2
{
  /* foo */
}
Geofflee
la source
1
Ok, merci pour la lumière. Je déteste styliser les formes, mais c'est ma tâche et le site n'est pas le mien. Je vais appliquer des classes aux entrées.
Misiur
5
Voici un tableau utile de ce qu'Internet Explorer prend en charge: msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#selectors
geofflee
12
Qui utilise IE maintenant :)
Tarun
2
notsemble fonctionner à partir de IE9 (grâce au graphique fourni par @geofflee).
SharpC
1
Sommes-nous vraiment toujours préoccupés par la prise en charge des anciennes versions d'IE en 2018? Pas même Microsoft.
Anomaly
48

ET ( &&):

.registration_form_right input:not([type="radio"]):not([type="checkbox"])

OU ( ||):

.registration_form_right input:not([type="radio"]), 
   .registration_form_right input:not([type="checkbox"])
KennyTM
la source
Non, échoue aussi. Cela s'appliquera 1 à 2 et 2 à 1
Misiur
@KennyTM: Regardez. Utiliser la virgule fera quelque chose comme ceci: .registration_form_right input: not ([type = "radio"]) s'appliquera à tout, y compris la case à cocher, et .registration_form_right input: not ([type = "checkbox"]) s'appliquera à tout, y compris radio
Misiur
@Misiur: Bien sûr. Le 2ème est pour le cas "OR" (aka ||). Mis à jour pour clarifier.
kennytm
1
@KennyTM: Ce que Misiur essaie de dire, c'est… Votre "||" L'exemple est syntaxiquement correct, mais si vous simplifiez l'expression, il devient simplement ".registration_form_right input" car l'union des deux sélecteurs inclut toutes les entrées.
geofflee
@geo, @Mis: regardez, la question posée "J'aurai besoin d'utiliser || bientôt", c'est donc un moyen de construire un ||des exemples. Bien sûr, cela devient .registration_form_right inputaprès simplification, mais l'essentiel est que vous utilisez le ,comme|| . Vous pouvez utiliser input:not([type="radio"]), input:not([name="foo"])pour un exemple non trivial.
kennytm
16

Pour sélectionner les propriétés aET bd'un Xélément:

X[a][b]

Pour sélectionner les propriétés aOU bd'un Xélément:

X[a],X[b]
waao
la source
4

La :notpseudo-classe n'est pas prise en charge par IE. J'avais pour quelque chose comme ça à la place:

.registration_form_right input[type="text"],
.registration_form_right input[type="password"],
.registration_form_right input[type="submit"],
.registration_form_right input[type="button"] {
  ...
}

Quelques duplications là-bas, mais c'est un petit prix à payer pour une meilleure compatibilité.

Max Shawabkeh
la source
2

Vous pouvez en quelque sorte reproduire le comportement de "OR" en utilisant & et: not.

SomeElement.SomeClass [data-statement="things are getting more complex"]  :not(:not(A):not(B))     {
    /* things aren't so complex for A or B */
}
Serge Profafilecebook
la source
2
Désolé,: not (: not) n'est pas une syntaxe CSS valide. Cela fonctionne avec jQuery cependant.
Serge Profafilecebook
1

Je suppose que vous détestez écrire plus de sélecteurs et les diviser par une virgule?

.registration_form_right input:not([type="radio"]),  
.registration_form_right input:not([type="checkbox"])  
{  
}

et BTW ceci 

not([type="radio" && type="checkbox"])

me ressemble plus à "entrée qui n'a pas ces deux types" :)

Jaroslav Záruba
la source
2
Cela ne fonctionne pas, parce que le premier sélecteur choisirait tous non radio, (mais serait choisir lacheckbox ), et le second ferait l'inverse. L'union des deux contiendrait à la fois checkbox et radio .
Eric
Ce premier exemple ne les && ensemble, il se déclenchera pour les entrées qui ne sont pas des radios pour le premier sélecteur, ET les entrées qui ne sont pas des cases à cocher, ce qui signifie toutes les entrées :-)
Dan F
Vous vous trompez. Ensuite, le premier s'appliquera au deuxième et le second au premier.
Misiur
1

Juste au cas où quelqu'un serait coincé comme moi. Après avoir parcouru le poste et quelques succès et essais, cela a fonctionné pour moi.

input:not([type="checkbox"])input:not([type="radio"])
Aurish
la source
1

Un mot d'avertissement. Le fait d'enchaîner plusieurs notsélecteurs augmente la spécificité du sélecteur résultant, ce qui rend le remplacement plus difficile: vous devrez essentiellement trouver le sélecteur avec tous les nots et le copier-coller dans votre nouveau sélecteur.

Un not(X or Y)sélecteur serait génial pour éviter de gonfler la spécificité, mais je suppose que nous devrons nous en tenir à la combinaison des contraires, comme dans cette réponse .

Andrius R.
la source