CSS3: pseudo-classe non selezionata

So che esiste una :checkedpseudo-classe CSS3 ufficiale , ma esiste una :uncheckedpseudo-classe e hanno lo stesso supporto per il browser?

Il riferimento di Sitepoint non ne menziona uno, tuttavia questa specifica whatwg (qualunque essa sia) fa.

So che lo stesso risultato può essere raggiunto quando le :checkede :not()pseudo-classi sono combinate, ma io sono ancora curioso:

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

Modificare:

Il w3c consiglia la stessa tecnica

Una casella di controllo deselezionata può essere selezionata utilizzando la pseudo-classe di negazione:

:not(:checked)

:unchecked non è definito nei selettori o nelle specifiche del livello 3 dell'interfaccia utente CSS, né è apparso nel livello 4 dei selettori.

In effetti, la citazione dal W3C è presa dalla specifica Selectors 4 . Poiché Selectors 4 consiglia di utilizzare :not(:checked), è lecito ritenere che non vi sia uno :uncheckedpseudo corrispondente . Il supporto del browser per :not()ed :checkedè identico, quindi non dovrebbe essere un problema.

Questo può sembrare incoerente con gli stati :enablede :disabled, soprattutto perché un elemento non può essere né abilitato né disabilitato (cioè la semantica non si applica completamente), tuttavia non sembra esserci alcuna spiegazione per questa incoerenza.

( :indeterminatenon conta, perché allo stesso modo un elemento non può essere né deselezionato, né controllato né indeterminato perché la semantica non si applica.)

Penso che tu stia cercando di complicare troppo le cose. Una soluzione semplice è semplicemente modellare la casella di controllo per impostazione predefinita con gli stili non selezionati e quindi aggiungere gli stili di stato selezionati.

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

Mi scuso per aver sollevato un vecchio thread, ma ho sentito che avrebbe potuto usare una risposta migliore.

EDIT (3/3/2016):

Le specifiche W3C lo indicano :not(:checked)come esempio per la selezione dello stato deselezionato. Tuttavia, questo è esplicitamente lo stato deselezionato e applicherà quegli stili solo allo stato deselezionato. Ciò è utile per aggiungere uno stile che è necessario solo nello stato deselezionato e dovrebbe essere rimosso dallo stato selezionato se utilizzato sul input[type="checkbox"]selettore. Vedere l'esempio di seguito per chiarimenti.

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
}

Senza usare :not(:checked)nell'esempio sopra, il :checkedselettore avrebbe dovuto usare a border: none;per ottenere lo stesso effetto.

Usa il input[type="checkbox"]per lo styling di base per ridurre la duplicazione.

Utilizzare gli input[type="checkbox"]:not(:checked)stili espliciti non selezionati che non si desidera applicare allo stato selezionato.

Non esiste una pseudo classe: unchecked tuttavia, se si utilizza la pseudo classe: verificata e il selettore di pari livello, è possibile distinguere tra entrambi gli stati. Credo che tutti i browser più recenti supportino la pseudo classe: verificata, puoi trovare maggiori informazioni da questa risorsa: http://www.whatstyle.net/articles/18/pretty_form_controls_with_css

Avrai un migliore supporto del browser con jquery ... puoi utilizzare una funzione di clic per rilevare quando si verifica il clic e se è selezionato o meno, puoi aggiungere una classe o rimuovere una classe secondo necessità ...

Il modo in cui l'ho gestito è stato cambiare il className di un'etichetta in base a una condizione. In questo modo hai solo bisogno di un'etichetta e puoi avere classi diverse per stati diversi ... Spero che aiuti!