CSS3: pseudo-classe non cochée

Je sais qu'il existe une :checkedpseudo-classe CSS3 officielle , mais y a-t-il une :uncheckedpseudo-classe et ont-ils le même support de navigateur?

La référence de Sitepoint n'en mentionne pas un, mais cette spécification whatwg (quoi que ce soit) le fait.

Je sais que peut obtenir le même résultat lorsque les :checkedet :not()pseudo-classes sont combinées, mais je suis toujours curieux:

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

Éditer:

Le w3c recommande la même technique

Une case à cocher non cochée peut être cochée en utilisant la pseudo-classe de négation:

:not(:checked)

:unchecked n'est pas défini dans les spécifications de niveau 3 des sélecteurs ou de l'interface utilisateur CSS, ni dans le niveau 4 des sélecteurs.

En fait, la citation du W3C est tirée de la spécification Selectors 4 . Puisque Selectors 4 recommande l'utilisation :not(:checked), il est prudent de supposer qu'il n'y a pas de :uncheckedpseudo correspondant . Le support du navigateur pour :not()et :checkedest identique, donc cela ne devrait pas être un problème.

Cela peut sembler incohérent avec les états :enabledet :disabled, d'autant plus qu'un élément ne peut être ni activé ni désactivé (c'est-à-dire que la sémantique ne s'applique pas du tout), cependant il ne semble pas y avoir d'explication à cette incohérence.

( :indeterminatene compte pas, car un élément ne peut être ni décoché, ni coché, ni indéterminé, car la sémantique ne s'applique pas.)

Je pense que vous essayez de trop compliquer les choses. Une solution simple consiste simplement à styliser votre case à cocher par défaut avec les styles non cochés, puis à ajouter les styles d'état cochés.

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

Je m'excuse d'avoir évoqué un vieux fil de discussion, mais j'avais l'impression qu'il aurait pu utiliser une meilleure réponse.

MODIFIER (03/03/2016):

Les spécifications W3C indiquent cela :not(:checked)comme exemple de sélection de l'état non coché. Cependant, il s'agit explicitement de l'état non vérifié et n'appliquera ces styles qu'à l'état non vérifié. Ceci est utile pour ajouter un style qui n'est nécessaire que sur l'état non coché et qui devrait être supprimé de l'état coché s'il est utilisé sur le input[type="checkbox"]sélecteur. Voir l'exemple ci-dessous pour clarification.

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
}

Sans utiliser :not(:checked)dans l'exemple ci-dessus, le :checkedsélecteur aurait dû utiliser a border: none;pour obtenir le même effet.

Utilisez le input[type="checkbox"]pour le style de base pour réduire la duplication.

Utilisez input[type="checkbox"]:not(:checked)pour les styles non cochés explicites que vous ne souhaitez pas appliquer à l'état coché.

Il n'y a pas de pseudo-classe: non cochée mais si vous utilisez la pseudo-classe: checked et le sélecteur frère, vous pouvez différencier les deux états. Je crois que tous les derniers navigateurs prennent en charge la pseudo-classe: checked, vous pouvez trouver plus d'informations sur cette ressource: http://www.whatstyle.net/articles/18/pretty_form_controls_with_css

Vous allez obtenir un meilleur support du navigateur avec jquery ... vous pouvez utiliser une fonction de clic pour détecter quand le clic se produit et s'il est coché ou non, alors vous pouvez ajouter une classe ou supprimer une classe si nécessaire ...

La façon dont j'ai géré cela consistait à changer le nom de classe d'une étiquette en fonction d'une condition. De cette façon, vous n'avez besoin que d'une seule étiquette et vous pouvez avoir différentes classes pour différents états ... J'espère que cela vous aidera!