CSS3: untested pseudo-class

Question

CSS3: untested pseudo-class

I know that there is an official CSS3 :checked class alias, but is there a :unchecked class :unchecked and does it support the same browser?

The link to the site does not mention, however it is whatwg spec (whatever it is).

I know that the same result can be achieved when the pseudo-classes :checked and :not() combined, but I'm still interested:

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

Edit:

w3c recommends the same technique

An impossible flag can be selected using the pseudo-negation class:
 :not(:checked) 

+62

css css-selectors css3 pseudo-class

Web_Designer Jan 13 2018-12-12T00:

source share

5 answers

BoltClock · Answer 1 · 2012-03-19 16:28

:unchecked not defined in level 3 or 3 specifications, nor is it displayed on level 4 selectors.

In fact, the quote from W3C is taken from the Selectors 4 spec . Since Selectors 4 recommends using :not(:checked) , we can safely assume that there is no corresponding alias :unchecked . Browser support for :not() and :checked identical, so this should not be a problem.

This may seem to be incompatible with the states :enabled and :disabled , especially since the element can neither be enabled nor disabled (i.e., the semantics are not fully applied), however, there seems to be no explanation for this inconsistency.

( :indeterminate not taken into account, since an element in the same way can neither be marked, checked, nor indefinite, since semantics are not applied.)

Michael Stramel · Answer 2 · 2015-05-21 16:34

I think you are trying to complicate the situation. A simple solution is to simply check your default checkbox with unverified styles, and then add verified state styles.

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

I apologize for bringing up the old thread, but felt that it could use a better answer.

EDIT (3/3/2016):

The W3C specs indicate that :not(:checked) as an example for selecting an uncontrolled state. However, this is clearly an uncontrolled state and will only apply these styles to an uncontrolled state. This is useful for adding styles that are only needed in the unchecked state, and it needs to be removed from the checked state if it is used in the input[type="checkbox"] selector. See the example below for an explanation.

 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 to use border: none; to achieve the same effect.

Use input[type="checkbox"] for the base style to reduce duplication.

Use input[type="checkbox"]:not(:checked) for explicit unverified styles that you do not want to apply to the checked state.

Jeff Wooden · Answer 3 · 2012-01-13 04:54

No: unchecked pseudo class, however, if you use: checked pseudo class and sibling selector, you can distinguish between both states. I believe that all recent browsers support: a proven pseudo-class, you can find additional information from this resource: http://www.whatstyle.net/articles/18/pretty_form_controls_with_css

Try to get better browser support using jquery ... you can use the click function to determine when a click occurs, and if it is installed or not, then you can add a class or delete a class as necessary ...

zloctb · Answer 4 · 2016-07-02 13:34

 <style> input, span { background: red; } :indeterminate, :indeterminate + span { background: limegreen; } </style> </head> <body> <input type="checkbox"> <span>Everything in this paragraph should have a green background.</span> <script type="text/javascript"> document.getElementsByTagName("input")[0].indeterminate = true; </script>

Daniel Ram · Answer 5 · 2017-06-12 22:10

The way I dealt with this is to switch the class Name of the label based on the condition. This way you only need one shortcut, and you can have different classes for different states ... Hope this helps!

CSS3: untested pseudo-class

More articles: