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

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