[css] CSS3 :unchecked pseudo-class

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 */


The w3c recommends the same technique

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


This question is related to css css-selectors pseudo-class

The answer is

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

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.

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

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!

Questions with css tag:

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width Font Awesome 5 font-family issue Failed to load resource: the server responded with a status of 404 (Not Found) css CSS class for pointer cursor How and where to use ::ng-deep? Styling mat-select in Angular Material What is the difference between CSS and SCSS? iPhone X / 8 / 8 Plus CSS media queries Change arrow colors in Bootstraps carousel Bootstrap 4 Dropdown Menu not working? Add class to an element in Angular 4 CSS Grid Layout not working in IE11 even with prefixes Search input with an icon Bootstrap 4 Bootstrap 4 - Inline List? Centering in CSS Grid Bootstrap 4, how to make a col have a height of 100%? Equal height rows in CSS Grid Layout Bootstrap 4: Multilevel Dropdown Inside Navigation Align the form to the center in Bootstrap 4 Customize Bootstrap checkboxes How to style a clicked button in CSS How can I get the height of an element using css only display: flex not working on Internet Explorer force css grid container to fill full screen of device How does the "position: sticky;" property work? bootstrap 4 row height Prevent content from expanding grid items Bootstrap 4 File Input CSS hide scroll bar, but have element scrollable CSS grid wrapping Bootstrap 4 Change Hamburger Toggler Color How can I make Bootstrap 4 columns all the same height? How to hide collapsible Bootstrap 4 navbar on click Bootstrap 4 Center Vertical and Horizontal Alignment Cannot read property 'style' of undefined -- Uncaught Type Error How to window.scrollTo() with a smooth effect Vertical Align Center in Bootstrap 4 How to implement a Navbar Dropdown Hover in Bootstrap v4? CSS change button style after click What is correct media query for IPad Pro? How do I specify row heights in CSS Grid layout?

Questions with css-selectors tag:

Angular 2: How to style host element of the component? How to click a href link using Selenium How do I apply a style to all children of an element How to write a CSS hack for IE 11? :last-child not working as expected? Need to find element in selenium by css jQuery select child element by class with unknown path How do I select an element that has a certain class? What is the difference between cssSelector & Xpath and which is better with respect to performance for cross browser testing? What is the mouse down selector in CSS? How to exclude particular class name in CSS selector? CSS selector last row from main table Sass Nesting for :hover does not work Style the first <td> column of a table differently using nth-child in tables tr td Why does JS code "var a = document.querySelector('a[data-a=1]');" cause error? Using CSS :before and :after pseudo-elements with inline CSS? Combine :after with :hover Specify multiple attribute selectors in CSS not:first-child selector CSS selector (id contains part of text) Can I have multiple :before pseudo-elements for the same element? jQuery vs document.querySelectorAll How to get CSS to select ID that begins with a string (not in Javascript)? CSS selectors ul li a {...} vs ul > li > a {...} What does the "~" (tilde/squiggle/twiddle) CSS selector mean? How to use querySelectorAll only for elements that have a specific attribute set? :after and :before pseudo-element selectors in Sass Apply style to cells of first row What is this CSS selector? [class*="span"] How to style readonly attribute with CSS? input[type='text'] CSS selector does not apply to default-type text inputs? CSS last-child(-1) Css pseudo classes input:not(disabled)not:[type="submit"]:focus Can I write a CSS selector selecting elements NOT having a certain class or attribute? CSS3 :unchecked pseudo-class first-child and last-child with IE8 Can CSS detect the number of children an element has? :not(:empty) CSS selector is not working? CSS :selected pseudo class similar to :checked, but for <select> elements CSS: styled a checkbox to look like a button, is there a hover? Can I target all <H> tags with a single selector? CSS Selector "(A or B) and C"? Sass and combined child selector CSS last-child selector: select last-element of specific class, not last child inside of parent? How to select first and last TD in a row? Style child element when hover on parent How to select first parent DIV using jQuery? CSS3 selector :first-of-type with class name? How do I select the "last child" with a specific class name in CSS?

Questions with pseudo-class tag:

How to position a CSS triangle using ::after? Indent starting from the second line of a paragraph with CSS Css pseudo classes input:not(disabled)not:[type="submit"]:focus CSS3 :unchecked pseudo-class CSS :selected pseudo class similar to :checked, but for <select> elements How to write :hover condition for a:before and a:after? CSS Pseudo-classes with inline styles How to select the first, second, or third element with a given class name? What is the difference between :focus and :active? Setting CSS pseudo-class rules from JavaScript