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

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
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
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
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
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
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
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
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.
source