Pseudo-classes :is() and :where()

Pseudo-class :is()

The :is() pseudo-class is used to shorten long selectors. The :is() pseudo -class function takes a list of selectors to select html elements.

For example, we want to apply a style to paragraphs that are in the first nesting level in the elements header, main, footer:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Easywptutorials</title>
</head>

<body>
    <header>
        <p>Text in Header</p>
        <div>
            <p>Text in Header Div</p>
        </div>
    </header>
    <main>
        <p>Text in Main</p>
        <div>
            <p>Text in Main Div</p>
        </div>
    </main>
    <footer>
        <p>Text in footer</p>
        <div>
            <p>Text in Footer Div</p>
        </div>
    </footer>
</body>

</html>

In this case, the paragraphs are set to 18px Verdana:

Without the :is pseudo-class, we would have to write:

header &gt; p, main &gt; p, footer &gt; p {font-size: 18px; font-family: Verdana;}

The :is pseudo-class allows you to significantly shorten this notation:

:is(header, main, footer) &gt; p {font-size: 18px; font-family: Verdana;}

That is, in this case, the expression :is(header, main, footer)selects all the header, main, and footer elements and concatenates them with the following selectors.

The pseudo-class :is can be nested, for example, take the example above, only now select only those paragraphs that are in div elements:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Easywptutorials</title>
</head>

<body>
    <header>
        <p>Text in Header</p>
        <div>
            <p>Text in Header Div</p>
        </div>
    </header>
    <main>
        <p>Text in Main</p>
        <div>
            <p>Text in Main Div</p>
        </div>
    </main>
    <footer>
        <p>Text in Footer</p>
        <div>
            <p>Text in Footer Div</p>
        </div>
    </footer>
</body>

</html>

Pseudo-class :where

The :where() pseudo-class works like :is(), it also takes a set of selectors and selects all matching selectors. For example, the first example, but :is()now we use :where instead :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Easywptutorials</title>
</head>

<body>
    <header>
        <p>Text in Header</p>
        <div>
            <p>Text in Header Div</p>
        </div>
    </header>
    <main>
        <p>Text in Main</p>
        <div>
            <p>Text in Main Div</p>
        </div>
    </main>
    <footer>
        <p>Text in Footer</p>
        <div>
            <p>Text in Footer Div</p>
        </div>
    </footer>
</body>

</html>

And we will get the same result as for :is():

The difference between :is() and :where()

What is the difference between :is() and :where() ? The :is() pseudo-class applies a cascade of styles (selector specificity), which is determined by the selector with the highest ranking. And for :where() pseudo-class styles , the rank of selectors is always 0.

Let’s look at a similar example. Application :is():

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Easywptutorials</title>
</head>

<body>
    <div>
        <h2>Header</h2>
        <div id="content">Main content</div>
    </div>
</body>

</html>

Here, the rank of the selectors in the expression :is(h2, #content)will be calculated by the largest selector – in this case, the identifier #content. Thus, the rank of selectors in the pseudo-class :is()will be 100 points (tag selectors are valued at 1 point).

Next comes the selector div > h2which overrides the background color. But since its rank is less than rank div > :is(h2, #content), this style will not be applied.

The third selector div > #contenthas the same rank as div > :is(h2, #content), so its styling will work.

As a result, we will get that overriding the background color for the element will not work.

Now let’s change to :where():

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Easywptutorials</title>
</head>

<body>
    <div>
        <h2>Header</h2>
        <div id="content">Main content</div>
    </div>
</body>

</html>

The selector’s rank :where(h2, #content)will be 0, so the style set by the selector div > :where(h2, #content)will be overridden by subsequent styles.