CSS3: pseudoclase sin marcar

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)

: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).

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.

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

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!