What CSS selector syntax finds multiple pseudo classes on the same element?-CodePudding

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

CodePudding user response：

You can combine psuedo-classes by putting them next to each other without whitespace. Note that the * isn't strictly needed here, but maybe helps show intent:

*:not(:checked):disabled {
  outline: 3px solid red;
}

<input type="checkbox" /> <br>
<input type="checkbox" disabled/> <br>
<input type="checkbox" checked/> <br>
<input type="checkbox" checked disabled/>

CodePudding user response：

As :checked and :disabled are element attributes you can alternatively use their attribute selector form instead of the pseudo selectors, but that would make your CSS a little less transparent. Just answering to show how that would work (using @romellem's HTML):

input[type="checkbox"]:not([checked])[disabled] {
  outline: 3px solid green;
}

<input type="checkbox" /> <br>
<input type="checkbox" disabled/> <br>
<input type="checkbox" checked/> <br>
<input type="checkbox" checked disabled/>