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 > p, main > p, footer > p {font-size: 18px; font-family: Verdana;}
The :is pseudo-class allows you to significantly shorten this notation:
:is(header, main, footer) > 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.
