CSS "y" y "o"

113

Tengo un gran problema, porque necesito anatematizar el estilo de algunos tipos de entrada. Tenía algo como:

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

Pero no quiero diseñar casillas de verificación también.

He intentado:

.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"])

¿Cómo se usa &&? Y tendré que usarlo ||pronto, y creo que ese uso será el mismo.

Actualización:
todavía no sé cómo usar ||y &&correctamente. No pude encontrar nada en los documentos W3.

css css-selectors conditional-operator Misiur
fuente
17
"anatematizar" ¡ Ay! ¿Quieres amenazar a las personas que intentan modificar las casillas de verificación con una retribución divina? (Probablemente quiso decir "exento" o similar, por ejemplo, "Necesito eximir algunos tipos de entrada de una regla de estilo")
TJ Crowder
3
Bueno, no pude encontrar una buena traducción al phrasal verb de mi idioma;)
Misiur
4
Creo que @TJ Crowder probablemente lo entendió. Pero fue gracioso ... particularmente la ironía de su error ortográfico 'divino' = D
David dice reinstalar a Monica
Sin embargo, genial ngram . ; ^)
ruffin

Respuestas:

141

&& funciona uniendo múltiples selectores de la misma manera:

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

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

Otro ejemplo:

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

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

|| funciona separando múltiples selectores con comas así:

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

div.class1,
div.class2
{
  /* foo */
}
geofflee
fuente
1
Ok, gracias por la luz. Odio diseñar formularios, pero es mi tarea y el sitio no es mío. Aplicaré clases a las entradas.
Misiur
5
Aquí hay una tabla útil de lo que admite Internet Explorer: msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#selectors
geofflee
12
Quién usa IE ahora :)
Tarun
2
notparece funcionar desde IE9 en adelante (gracias al gráfico proporcionado por @geofflee).
SharpC
1
¿Estamos realmente preocupados por admitir versiones anteriores de IE en 2018? Ni siquiera Microsoft lo hace.
Anomalía
48

Y ( &&):

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

O ( ||):

.registration_form_right input:not([type="radio"]), 
   .registration_form_right input:not([type="checkbox"])
Kennytm
fuente
No, falla también. Se aplicará 1 a 2 y 2 a 1
Misiur
@KennyTM: Mira. El uso de una coma hará algo como esto: .registration_form_right input: not ([type = "radio"]) se aplicará a todo, incluida la casilla de verificación, y .registration_form_right input: not ([type = "checkbox"]) se aplicará a todo, incluido radio
Misiur
@Misiur: Por supuesto. El segundo es para el caso "OR" (también conocido como ||). Actualizado para aclarar.
kennytm
1
@KennyTM: Lo que Misiur está tratando de decir es ... Tu "||" example es sintácticamente correcto, pero si simplifica la expresión, se convierte simplemente en ".registration_form_right input" porque la unión de los dos selectores incluye todas las entradas.
geofflee
@geo, @Mis: mira, la pregunta fue "Necesitaré usar || pronto", así que esta es una forma de construir un ||ejemplo. Por supuesto, se vuelve .registration_form_right inputdespués de la simplificación, pero la esencia es que usa el ,as|| . Podrías usarlo input:not([type="radio"]), input:not([name="foo"])para un ejemplo no trivial.
kennytm
16

Para seleccionar propiedades aY bde un Xelemento:

X[a][b]

Para seleccionar propiedades aO bde un Xelemento:

X[a],X[b]
waao
fuente
4

La :notpseudoclase no es compatible con IE. En su lugar, obtuve algo como esto:

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

Algo de duplicación allí, pero es un pequeño precio a pagar por una mayor compatibilidad.

Max Shawabkeh
fuente
2

De alguna manera puede reproducir el comportamiento de "OR" usando & y: 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
fuente
2
Lo sentimos,: not (: not) no es una sintaxis CSS válida. Sin embargo, funciona con jQuery.
Serge Profafilecebook
1

Supongo que odias escribir más selectores y dividirlos por comas.

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

y por cierto esto 

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

me parece más a "entrada que no tiene estos dos tipos" :)

Jaroslav Záruba
fuente
2
Eso no funcionaría, ya que el primer selector seleccionaría todas libres radio, (pero sería seleccionar el checkbox), y la segunda sería hacer a la inversa. La unión de los dos contendría a ambos checkbox y radio .
Eric
Ese primer ejemplo no los && juntos, se activará para entradas que no son radios para el primer selector, Y entradas que no son casillas de verificación, lo que significa todas las entradas :-)
Dan F
Te equivocas. Luego, el primero se aplicará al segundo y el segundo al primero.
Misiur
1

Por si acaso si alguien está atrapado como yo. Después de revisar la publicación y algunos golpes y pruebas, esto funcionó para mí.

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

Una palabra de precaución. Encadenando variosnot selectores aumenta la especificidad del selector resultante, lo que hace que sea más difícil de anular: básicamente, deberá encontrar el selector con todas las notas y copiarlo y pegarlo en su nuevo selector.

Un not(X or Y)selector sería genial para evitar inflar la especificidad, pero supongo que tendremos que limitarnos a combinar los opuestos, como en esta respuesta .

Andrius R.
fuente