web-dev-qa-db-fra.com

CSS "et" et "ou"

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

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

Mais je ne veux pas aussi 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 devrai 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.

csscss-selectorsconditional-operator
92
Misiur

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

<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 avec des virgules comme suit:

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

div.class1,
div.class2
{
  /* foo */
}
119
geofflee

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"])
40
kennytm

Pour sélectionner les propriétés a ET b d'un élément X:

X[a][b]

Pour sélectionner les propriétés a OR b d'un élément X:

X[a],X[b]
13
waao

Le :not La pseudo-classe n'est pas prise en charge par IE. J'avais eu 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"] {
  ...
}

Il y a un peu de duplication, mais c'est un petit prix à payer pour une compatibilité accrue.

3
Max Shawabkeh

Juste au cas où quelqu'un serait bloqué comme moi. Après avoir passé par le poste et après quelques coups et procès, cela a fonctionné pour moi.

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

Je suppose que tu détestes é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 cette

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

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

0
Jaroslav Záruba

Vous pouvez en quelque sorte reproduire le comportement de "OU" 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 */
}
0
Serge Profafilecebook