Skip to content
Related Articles

Related Articles

Improve Article

CSS :is() Selector

  • Last Updated : 01 Apr, 2021

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>

Output:

Browser Support:

  • Chrome
  • Firefox
  • Opera
  • Edge

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :