CSS3: pseudo-class no comprobada

Sé que hay una pseudoclase oficial de CSS3 :checked, pero ¿existe una pseudoclase :unchecked, y tienen el mismo soporte de navegador?CSS3: pseudo-class no comprobada

Sitepoint's reference no menciona uno, sin embargo, este whatwg spec (cualquiera que sea) lo hace.

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

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

Editar:

El W3C recomienda el mismo técnica

Se puede seleccionar una casilla de verificación sin marcar mediante el uso de la pseudoclase de negación:
:not(:checked) 

Fuente

2012-01-13 Web_Designer

No hay: sin control pseudo clase sin embargo, si se utiliza el: marcado pseudo clase y el selector de hermanos se puede diferenciar entre los dos estados. Creo que todos los navegadores más recientes admiten la pseudo clase comprobada, puede encontrar más información de este recurso: http://www.whatstyle.net/articles/18/pretty_form_controls_with_css

Su mejor soporte para el navegador con jquery ... puede usar una función de clic para detectar cuándo haga clic en sucede y si está marcada o no, puede agregar una clase o eliminar una clase según sea necesario ...

Fuente

2012-01-13 04:54:35

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

De hecho, la cita de W3C es taken from the Selectors 4 spec. Como Selectores 4 recomienda utilizar :not(:checked), es seguro asumir que no existe el pseudo correspondiente :unchecked. El soporte del navegador para :not() y :checked es idéntico, por lo que no debería ser un problema.

Esto puede parecer incompatible con las :enabled y :disabled estados, especialmente desde que un elemento puede ser ni permitido ni desactivado (es decir, la semántica por completo no se aplican), sin embargo, no parece haber ninguna explicación para esta discrepancia.

(:indeterminate no cuenta, ya que un elemento puede ser igualmente no se controla, controlados ni indeterminada debido a la semántica no se aplican.)

Fuente

2012-03-19 16:28:51 BoltClock

Solo para agregar a esta respuesta que seleccionar: no (: marcado) funciona perfectamente en Chrome, pero no en IE (probado en 9 y 11). –

@Bruno Finger:: checked y: not (: checked) deberían funcionar en IE, excepto que ambos se ven igualmente afectados por un error donde al cambiar el estado verificado no se actualizan los estilos de los elementos en relación con el check/elemento sin marcar. – BoltClock

Creo que usted está tratando de complicar más las cosas. Una solución simple es simplemente diseñar su casilla de verificación de forma predeterminada con los estilos sin marcar y luego agregar los estilos de estado marcados.

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

Pido disculpas por mencionar un hilo antiguo pero sentí que podría haber usado una mejor respuesta.

EDIT (03/03/2016):

estado W3C especificaciones que :not(:checked) como su ejemplo para seleccionar el estado sin marcar.Sin embargo, esto es explícitamente el estado no verificado y solo aplicará esos estilos al estado no verificado. Esto es útil para agregar estilo que solo se necesita en el estado no verificado y que sería necesario eliminar del estado verificado si se usa en el selector input[type="checkbox"]. Vea el ejemplo a continuación para 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 utilizar :not(:checked) en el ejemplo anterior el selector :checked habría tenido que utilizar un border: none; para lograr el mismo efecto.

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

Utilice el input[type="checkbox"]:not(:checked) para los estilos explícitos no comprobados que no desea aplicar al estado comprobado.

Fuente

2015-05-21 16:34:38

Existen otros usos de los selectores de css en los que es útil/expresivo: JavaScript, prueba automática del navegador – nruth

Esto no siempre es posible. Los elementos de formulario, en particular, son notorios por no permitirle revertirlos a su apariencia predeterminada a través de reglas en cascada. (Aunque la razón por la cual cualquiera quisiera dar solo entradas comprobadas o solo sin marcar tiene una apariencia y sensación personalizadas mientras deja la otra moneda de la menta, me supera) – BoltClock

Otro caso donde esto no es posible: más de 2 botones de opción. Por ejemplo, es posible que desee un estilo cuando la opción n. ° 1: esté marcada y otra cuando todo lo demás esté: marcado. La solución es ': not (: checked)' – Navin

-1

<style> 

input, span { 
    background: red; 
} 

:indeterminate, :indeterminate + span { 
    background: limegreen; 
} 
</style> 

</head> 

<body> 

<input type="checkbox"> <span>Everything in this paragraph should have a green background.</span> 


<script type="text/javascript"> 
    document.getElementsByTagName("input")[0].indeterminate = true; 
</script>

Fuente

2016-07-02 13:34:22 zloctb

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

Fuente

2017-06-12 22:10:07

CSS3: pseudo-class no comprobada

Respuesta

Cuestiones relacionadas