:where() is a CSS pseudo-class that accepts a selector list and matches an element when any selector in that list matches. It contributes zero specificity, making its rules easy to override. section 10.3.4 section 10.3.9
Use it to combine repeated selectors while styling form controls. For example, one rule can target inputs, textareas, selects, and buttons in their focus state instead of repeating the selector. section 10.0 section 10.3.4
input:focus, textarea:focus, select:focus, button:focus { ... }
The expanded selector list shows the repetitive form of a shared focus rule. section 10.3.4
:where(input, textarea, select, button):focus { ... }
The :where() version groups the same controls into one concise selector. section 10.3.4
Styling radio buttons and checkboxes
Use :where(input[type="radio"], input[type="checkbox"])::before to select the ::before pseudo-element on both control types. The shared rule creates an empty, centered inner box with display: block, content: '', and 1em dimensions; later styling can turn it into a disk or check mark. section 10.3.5
Unlike :is(), :where() does not inherit the specificity of its most specific argument. Even a selector containing an attribute selector remains at specificity 000, so stronger existing or later rules can override it. section 10.3.4 section 10.3.9
