CSS3 unchecked pseudo-class

Question

I know there is an official CSS3  checked pseudo-class  but is there an  unchecked pseudo-class  and do they have the same browser support  Sitepoint s reference doesn t mention one  however this whatwg spec  whatever that is  does  I know the same result can be achieved when the  checked and  not   pseudo-classes are combined  but i m still curious  input type  quot checkbox quot   not  checked           styles       Edit  The w3c recommends the same technique  An unchecked checkbox can be selected by using the negation pseudo-class   not  checked

User · Answer

The way I handled this was switching the className of a label based on a condition  This way you only need one label and you can have different classes for different states    Hope that helps

User · Answer

unchecked is not defined in the Selectors or CSS UI level 3 specs  nor has it appeared in level 4 of Selectors   In fact  the quote from W3C is taken from the Selectors 4 spec  Since Selectors 4 recommends using  not  checked   it s safe to assume that there is no corresponding  unchecked pseudo  Browser support for  not   and  checked is identical  so that shouldn t be a problem   This may seem inconsistent with the  enabled and  disabled states  especially since an element can be neither enabled nor disabled  i e  the semantics completely do not apply   however there does not appear to be any explanation for this inconsistency     indeterminate does not count  because an element can similarly be neither unchecked  checked nor indeterminate because the semantics don t apply

User · Answer

There is no  unchecked pseudo class however if you use the  checked pseudo class and the sibling selector you can differentiate between both states  I believe all of the latest browsers support the  checked pseudo class  you can find more info from this resource  http   www whatstyle net articles 18 pretty form controls with css  Your going to get better browser support with jquery    you can use a click function to detect when the click happens and if its checked or not  then you can add a class or remove a class as necessary

User · Answer

I think you are trying to over complicate things  A simple solution is to just style your checkbox by default with the unchecked styles and then add the checked state styles   input type  checkbox          Unchecked Styles   input type  checkbox   checked        Checked Styles     I apologize for bringing up an old thread but felt like it could have used a better answer   EDIT  3 3 2016    W3C Specs state that  not  checked  as their example for selecting the unchecked state  However  this is explicitly the unchecked state and will only apply those styles to the unchecked state  This is useful for adding styling that is only needed on the unchecked state and would need removed from the checked state if used on the input type  checkbox   selector  See example below for 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     Without using  not  checked  in the example above the  checked selector would have needed to use a border  none  to achieve the same affect   Use the input type  checkbox   for base styling to reduce duplication   Use the input type  checkbox   not  checked  for explicit unchecked styles that you do not want to apply to the checked state

[css] CSS3 :unchecked pseudo-class

Examples related to css

Examples related to css-selectors

Examples related to pseudo-class