Use :is() to group selectors when the same rule should apply if any selector in a supplied list matches. It keeps CSS concise, especially when styling several form controls. section 10.3.4
Style selected controls together
The selector :is(input[type="radio"], input[type="checkbox"]):checked targets selected radio buttons and check boxes, then changes their border to var(--accent). section 10.3.8
Keep these differences in mind:
- :is() uses the specificity of the most specific selector inside its list. section 10.3.4
- An ID selector inside :is() can make the resulting rule difficult to override. section 10.3.4
- :where() groups selectors similarly but always has zero specificity, making it easier to override. section 10.3.4 section 10.3.9
input:focus, textarea:focus, select:focus, button:focus { ... }
Compare a repeated focus-selector list with the grouped form to see why selector grouping keeps related form-control styles concise. section 10.3.4
