CSS :is() Selector

Last Updated : 23 Aug, 2022

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).

CSS :is() pseudo-class selector takes a selector list as an argument and selects any element that can be selected by one of the selectors in that list.

It is useful to select elements in less code and more efficiently.

Syntax:

:is()

Example 1: This example selects any h1, h2 and h3 inside the container class.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>CSS :is Selector</title>
    <style>
        .container :is(h1, h2, h3) {
            color: red;
        }
    </style>
</head>
 
<body style="text-align: center">
    <div class="container">
        <h1>GeeksforGeeks</h1>
        <h2>GeeksforGeeks</h2>
        <h3>GeeksforGeeks</h3>
    </div>
</body>
 
</html>

Output:

Example 2: This example selects any h1 inside firstDiv or secondDiv class.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>CSS :is Selector</title>
 
    <style>
        :is(.firstDiv, .secondDiv) h1 {
            background: green;
        }
    </style>
</head>
 
<body style="text-align: center; margin: auto 30rem">
    <div class="firstDiv">
        <h1>First Div Heading</h1>
    </div>
     
    <div class="secondDiv">
        <h1>Second Div Heading</h1>
    </div>
</body>
 
</html>