CSS3: pseudo-classe non contrôlée

Je sais qu’il y a un CSS3 officiel :checked pseudo-classe :checked , mais y a-t-il une pseudo-classe :unchecked , et ont-ils le même support de navigateur?

La référence de Sitepoint n’en mentionne pas, cependant cette spécification whatwg (peu importe ce que c’est) le fait.

Je sais que le même résultat peut être obtenu lorsque les pseudo-classes :checked et :not() sont combinées, mais je suis encore curieux:

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

Modifier:

Le w3c recommande la même technique

Une case à cocher non cochée peut être sélectionnée à l’aide de la pseudo-classe negation:

 :not(:checked) 

:unchecked n’est pas défini dans les spécifications de sélecteur ou CSS UI niveau 3, ni dans le niveau 4 des sélecteurs.

En fait, la citation de W3C est extraite de la spécification Selectors 4 . Comme Selectors 4 recommande d’utiliser :not(:checked) , on peut supposer qu’il n’y a pas de correspondance :unchecked pseudo :unchecked . Le support du navigateur pour :not() et :checked est identique, cela ne devrait donc pas poser de problème.

Cela peut sembler incohérent avec les états :enabled et :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 complètement), mais il ne semble pas y avoir d’explication à cette incohérence.

( :indeterminate ne compte pas, car un élément peut de la même manière ne pas être contrôlé, vérifié ou indéterminé car la sémantique ne s’applique pas.)

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

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

Je m’excuse d’avoir soulevé un vieux sujet, mais je pensais qu’il aurait pu utiliser une meilleure réponse.

EDIT (3/3/2016):

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

 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 sélecteur :checked aurait dû utiliser une border: none; pour obtenir le même effet.

Utilisez l’ input[type="checkbox"] pour le style de base afin de réduire les doublons.

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

Il n’y a pas de pseudo-classe décochée: si vous utilisez la pseudo-classe 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 vérifiée, vous pouvez trouver plus d’informations à partir de cette ressource: http://www.whatstyle.net/articles/18/pretty_form_controls_with_css

Vous allez obtenir une meilleure prise en charge du navigateur avec jquery … vous pouvez utiliser une fonction de clic pour détecter quand le clic se produit et si c’est vérifié ou non, vous pouvez append une classe ou supprimer une classe si nécessaire …

La façon dont je traitais cela changeait le className d’une étiquette en fonction d’une condition. De cette façon, vous n’avez besoin que d’un seul label et vous pouvez avoir différentes classes pour différents états.

     Everything in this paragraph should have a green background.