CSS :is(selector)

The CSS :is() pseudo-class simplifies the process of writing group selectors by allowing you to group multiple selectors inside parentheses. It applies styles to any element matching one of the selectors within the :is() group, making your CSS code more concise and easier to read.

The syntax for the :is() pseudo-class is:

</>
Copy
selector:is(selector1, selector2, ...) {
    property: value;
}

Where:

ParameterDescription
selectorThe element to which the styles will apply.
selector1, selector2, ...The group of selectors inside the :is() pseudo-class. Styles will apply to any element matching one of these selectors.
propertyThe CSS property to style the matched elements.

Examples

1. Styling Multiple Heading Levels

In this example, all headings from h1 to h3 are styled with a blue color and larger font size.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        :is(h1, h2, h3) {
            color: blue;
            font-size: 1.5em;
        }
    </style>
</head>
<body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
</body>
</html>

2. Styling Multiple Input Types

Here, all input elements of type text, email, and password are styled with a lightblue background and rounded borders.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        input:is([type="text"], [type="email"], [type="password"]) {
            background-color: lightblue;
            border-radius: 5px;
            padding: 5px;
        }
    </style>
</head>
<body>
    <form>
        <input type="text" placeholder="Name"><br><br>
        <input type="email" placeholder="Email"><br><br>
        <input type="password" placeholder="Password">
    </form>
</body>
</html>

3. Styling List Items Inside Different Lists

In this example, li elements inside ul and ol are styled with a red color.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        :is(ul, ol) li {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
    <ol>
        <li>First</li>
        <li>Second</li>
    </ol>
</body>
</html>

4. Styling Links with Specific Classes

Here, links with the classes .external or .internal are styled with a green color and underline.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        a:is(.external, .internal) {
            color: green;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <a href="https://external.com" class="external">External Link</a><br>
    <a href="#internal-section" class="internal">Internal Link</a>
</body>
</html>

5. Styling Specific Paragraphs

In this example, paragraphs with the classes .highlight or .note are styled with a yellow background.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        p:is(.highlight, .note) {
            background-color: yellow;
            padding: 5px;
        }
    </style>
</head>
<body>
    <p class="highlight">This is a highlighted paragraph.</p>
    <p class="note">This is a note.</p>
</body>
</html>