:is() groups alternative selectors inside one function, matching an element when it matches any argument. It replaces repetitive selector lists with a shorter, clearer rule. section 8.3
Styling related form controls
A contact form can apply the same padding, border, and radius to inputs, textareas, selects, and buttons with .contact-form :is(input, textarea, select, button). section 8.3
.contact-form :is(input, textarea, select, button) {
padding: 5px 10px;
border: 1px solid var(--brand-color);
border-radius: 5px;
}
Compare the grouped selector with the equivalent repetitive selector list. section 8.3
Use :is() with these rules in mind:
- Calculate specificity from the most specific argument, regardless of which argument matches; :is(input, #login-password) therefore carries ID-level specificity. section 8.3
- Keep pseudo-elements out of the argument list, because selectors such as :is(div::before, div::after) are invalid; pseudo-classes remain valid. section 8.3
- Use forgiving lists for progressive enhancement: unsupported arguments such as :user-invalid do not invalidate supported alternatives inside :is(). section 8.3.1
- Account for nesting: replacing a parent selector with :is() can raise specificity and broaden which descendants match. section 8.4.2
input:is(.invalid, :user-invalid) {
border: 1px solid red;
}
See how an unsupported validation pseudo-class can coexist with a supported fallback class. section 8.3.1
