CSS :isSelectors

Example

We hope to include<p>Set the color of the tag:

:is(p) { color: red; }

CSS's:isA pseudo-class is a generic selector that allows you to combine multiple selectors together so that they can be reused in CSS rules.

:isThe pseudo-class can accept any number of selectors as arguments and returns the union of elements matched by these selectors.

1. Combining element type selectors

:is(h1, h2, h3) {
    color: red;
}

This code will set the text color to red for all h1, h2, and h3 elements.

2. Combining class selectors

:is(.highlight, .warning) {
    font-weight: bold;
}

This code will set the font to bold for all elements that have the highlight or warning class.

3. Combining different types of selectors

:is(a[href^="https"], button[disabled]) {
    cursor: pointer;
}

This code will set the cursor to a pointer for all links starting with https and for buttons in the disabled state.

:isPseudo-classes can improve the readability and maintainability of CSS code, especially when you need to apply the same styles to multiple types of elements.
:isPseudo-classes do not create new elements or change the document structure; they are merely selectors used to match elements.

The numbers in the table indicate the first browser version number that supports the property.

Selectors
:invalid	10.0	10.0	4.0	5.0	10.0

:is(selector1, selector2, ..., selectorN) {
    /* 样式规则 */
}

selector1, selector2, ..., selectorNThis is a series of selectors, which can be element types, class selectors, attribute selectors, pseudo-classes, etc.

other extensions