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="checkbox"]:not(:checked) {
    /* styles */
}

Edit:

The w3c recommends the same technique

An unchecked checkbox can be selected by using the negation pseudo-class:

:not(:checked)

Caiman

Answer 1

: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.)

Biostatics

Just to add to this answer that selecting :not(:checked) works perfectly on Chrome, but it doesn't on IE (tested on 9 and 11). – Figone

@Bruno Finger: :checked and :not(:checked) should both work on IE, except both of them are equally affected by a bug where changing the checked status does not update the styles of elements being targeted in relation to the checked/unchecked element. – Biostatics

Answer 2

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 effect.

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.

Rupee

There are other uses of css selectors where it's useful / expressive though: javascript, automated browser testing – Distracted

This isn't always possible. Form elements in particular are notorious for not allowing you to revert them to their default look and feel via cascading rules. (Though why anyone would want to give only checked or only unchecked inputs a custom look and feel while leaving the other mint is beyond me.) – Biostatics

Another case where this isn't possible: More than 2 radio buttons. For example, you may want one style when option#1 is :checked and another when anything else is :checked. The solution is :not(:checked) – Jewelljewelle

If you were wanting only wanting specific ones styled, why not use a :first-child, :last-child, or :nth-child selector in combination with :checked. :not(:checked) will not cover the situation you specified unless I am misunderstanding your comment. – Rupee

@MichaelStramel putting the order of the htmls into the css? nope thanks – Darondarooge

@Darondarooge Okay, then apply classes and use those selectors? There are multiple ways to do everything. Each has its own use-case. – Rupee

Answer 3

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...

Meares

Answer 4

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!

Juni