[FIXED] What CSS selector syntax finds multiple pseudo classes on the same element?

Issue

What CSS selector finds all unchecked and disabled checkboxes? Those links provide answers to how to find unchecked or disabled checkboxes, respectively, and this question shows how to find an element with one pseudo-class and one pseudo-element, but I'm looking to find multiple pseudo classes on the same element.

I think the answer is to chain them without spaces (i.e., input[type="checkbox"]:disabled:not(:checked), and this seems to work, but I don't know how to tell if this is working correctly or doing something else and returning what I want by coincidence.

Solution

'this seems to work' - no it doesn't as it picks up those checkboxes that are checked. Put a :not in and you'll be OK.

input[type="checkbox"]:disabled:not(:checked)

Here's a snippet showing the various combinations. cyan is what your code would select and pink is the one you actually want.

input[type="checkbox"]:disabled:checked+label {
  background: cyan;
}

input[type="checkbox"]:disabled:not(:checked)+label {
  background: pink;
}

<input type="radio" checked><label>Radio checked</label>
<input type="radio"><label>Radio unchecked not disabled</label>
<input type="checkbox"><label>Checkbox not checked not disabled</label>
<input type="checkbox" disabled><label>Checkbox not checked disabled</label>
<input type="checkbox" checked><label>Checkbox checked not disabled</label>
<input type="checkbox" checked disabled><label>Checkbox checked disabled</label>

Answered By - A Haworth

Answer Checked By - Cary Denson (PHPFixing Admin)