CSS3: pseudoclase sin marcar

108

Sé que hay una pseudoclase CSS3 oficial :checked, pero ¿existe una :uncheckedpseudoclase y tienen el mismo soporte de navegador?

La referencia de Sitepoint no menciona uno, sin embargo, esta especificación de whatwg (sea lo que sea) sí.

Sé que el mismo resultado se puede lograr cuando los :checkedy :not()se combinan pseudo-clases, pero todavía estoy curioso:

input[type="checkbox"]:not(:checked) {
    /* styles */
}

Editar:

El w3c recomienda la misma técnica

Se puede seleccionar una casilla de verificación sin marcar utilizando la pseudoclase de negación:

:not(:checked)
Diseñador web
fuente

Respuestas:

104

:unchecked no está definido en las especificaciones de Selectores o CSS UI nivel 3, ni ha aparecido en el nivel 4 de Selectores.

De hecho, la cita de W3C se toma de la especificación Selectors 4 . Dado que Selectors 4 recomienda su uso :not(:checked), es seguro asumir que no existe un :uncheckedpseudo. La compatibilidad del navegador con :not()y :checkedes idéntica, por lo que no debería ser un problema.

Esto puede parecer incoherente con el :enabledy :disabledlos estados, especialmente desde que un elemento se puede ni activar ni desactivado (es decir, la semántica por completo no se aplican), sin embargo no parece haber ninguna explicación para esta discrepancia.

( :indeterminateno cuenta, porque un elemento tampoco puede estar desmarcado, marcado ni indeterminado porque la semántica no se aplica).

BoltClock
fuente
Solo para agregar a esta respuesta que seleccionar: not (: comprobado) funciona perfectamente en Chrome, pero no en IE (probado en 9 y 11).
Bruno Finger
@Bruno Finger:: comprobado y: no (: comprobado) deberían funcionar ambos en IE, excepto que ambos se ven igualmente afectados por un error en el que cambiar el estado comprobado no actualiza los estilos de los elementos a los que se apunta en relación con los marcados / desmarcados elemento.
BoltClock
35

Creo que estás intentando complicar demasiado las cosas. Una solución simple es simplemente diseñar su casilla de verificación por defecto con los estilos sin marcar y luego agregar los estilos de estado marcados.

input[type="checkbox"] {
  // Unchecked Styles
}
input[type="checkbox"]:checked {
  // Checked Styles
}

Me disculpo por mencionar un tema antiguo, pero sentí que podría haber tenido una mejor respuesta.

EDITAR (3/3/2016):

Las especificaciones del W3C lo establecen :not(:checked)como ejemplo para seleccionar el estado sin marcar. Sin embargo, este es explícitamente el estado sin marcar y solo aplicará esos estilos al estado sin marcar. Esto es útil para agregar un estilo que solo se necesita en el estado sin marcar y debería eliminarse del estado marcado si se usa en el input[type="checkbox"]selector. Consulte el ejemplo a continuación para obtener una aclaración.

input[type="checkbox"] {
  /* Base Styles aka unchecked */
  font-weight: 300; // Will be overwritten by :checked
  font-size: 16px; // Base styling
}
input[type="checkbox"]:not(:checked) {
  /* Explicit Unchecked Styles */
  border: 1px solid #FF0000; // Only apply border to unchecked state
}
input[type="checkbox"]:checked {
  /* Checked Styles */
  font-weight: 900; // Use a bold font when checked
}

Sin usar :not(:checked)en el ejemplo anterior, el :checkedselector habría necesitado usar a border: none;para lograr el mismo efecto.

Utilice el input[type="checkbox"]estilo base para reducir la duplicación.

Utilice input[type="checkbox"]:not(:checked)para estilos explícitos sin marcar que no desee aplicar al estado marcado.

Michael Stramel
fuente
Sin embargo, hay otros usos de los selectores css en los que es útil / expresivo: javascript, pruebas automatizadas del navegador
nruth
2
Esto no siempre es posible. Los elementos de formulario en particular son conocidos por no permitirle revertirlos a su apariencia predeterminada a través de reglas en cascada. (Aunque no entiendo por qué alguien querría dar solo a las entradas marcadas o sin marcar una apariencia personalizada mientras deja la otra menta).
BoltClock
Otro caso en el que esto no es posible: más de 2 botones de opción. Por ejemplo, es posible que desee un estilo cuando la opción # 1 está: marcada y otro cuando cualquier otra cosa está: marcada. La solución es:not(:checked)
Navin
Si usted fue el único deseo que desean los específicos de estilo, ¿por qué no usar una :first-child, :last-childo :nth-childde selección en combinación con :checked. :not(:checked)no cubrirá la situación que especificó a menos que no haya entendido bien su comentario.
Michael Stramel
@MichaelStramel poniendo el orden de los htmls en el CSS? no, gracias
inetphantom
3

No hay una pseudoclase: sin marcar; sin embargo, si usa la pseudoclase: comprobada y el selector de hermanos, puede diferenciar entre ambos estados. Creo que todos los navegadores más recientes admiten la pseudoclase: comprobada, puede encontrar más información en este recurso: http://www.whatstyle.net/articles/18/pretty_form_controls_with_css

Obtendrá un mejor soporte del navegador con jquery ... puede usar una función de clic para detectar cuándo ocurre el clic y si está marcado o no, entonces puede agregar una clase o eliminar una clase según sea necesario ...

Jeff Wooden
fuente
-2

La forma en que manejé esto fue cambiando el className de una etiqueta en función de una condición. De esta manera, solo necesita una etiqueta y puede tener diferentes clases para diferentes estados ... ¡Espero que eso ayude!

Daniel Ram
fuente