Long selector lists can occasionally result from developing CSS in order to target numerous items with the same style rules. A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).
Both :is() and :where() are pseudo-class functions that will help shorten and avoid repetition in creating the selectors. They both take an array of arguments of selectors (ids, classes, tags, etc..) and selects any element that can be selected in that list.
Read this blog post or watch the video below to learn more about the :is() and :where().
Problem Statement
When we write code involving css, there are situations where we ended up writing long selector lits to target multiple elements with the same style requirements. For example, if we want to color adjust any <p> tags inside a heading element, we can write code like below
h1 p, h2 p, h3 p {
color: green;
}With the above code, there are couple of disadvantages like –
-
- This code will become difficult to read when you have more and more CSS like this.
- With more and more CSS like this, it will become difficult to debug as well.
- Finally if you make single mistake while writing the CSS, then rest of the code will be ignored.
Solution With :is()
The above code can be written is simply way by using :is() pseudo-class function as shown below
:is(h1,h2,h3) p {
color: red;
}The above approach is much cleaner and easier to read. At the same time, if we make mistake in one of the tags, it will not ignore the rest of the tags.
Complex Example With :is()
To start with, let’s take the below HTML page.
<HTML>
<body BGCOLOR="FFFFFF">
<header>
<h1 class="HelloClass">Technical <span>Potpourri</span></h1>
<h2 class="ByeClass"><span>Sudipta</span> Deb</h2>
</header>
<main>
<h1 class="HelloClass">Most Popular Browsers</h1>
<p class="ByeClass">Chrome, Firefox, and Edge are the most used browsers today.</p>
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. </p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. </p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. </p>
</article>
</main>
<footer>
<p>Author: Sudipta Deb</p>
<p><a href="mailto:sudipta.deb@gmail.com">sudipta.deb@gmail.com</a></p>
</footer>
</body>
</HTML>Example 1
If we want to change the color to green for h1 & h2 under header, h1 under main, h2 under article, we will write code like –
Without :is()
header h1,
header h2,
main h1,
article h2 {
color: green;
}With :is()
:is(header, main, article) :is(h1, h2) {
color: green;
}Example 2
If we want to change the color to red for span present inside header, we will write code like –
Without :is()
header h1 span,
header h2 span {
color: red;
}With :is()
header :is(h1, h2) span {
color: red;
}Example 3
If we want to change the color to green for h1 with class HelloClass, h2 with ByeClass, p with ByeClass, we will write code like –
Without :is()
h1.HelloClass,
h2.ByeClass,
p.ByeClass {
color: green;
}
With :is()
:is(h1, h2, p):is(.HelloClass, .ByeClass) {
color: green;
}The Next Pseudo-Class :where()
:where() pseudo class selector does exactly the same as :is() with one big difference i.e. the specificity. :where() has zero specificity, but :is() takes the specificity of its most specific selector in the argument list.
:where(header, main) h1 {
color: green;
}The above code will make the color green to h1 present under header and main.
Complex Example With Specificity
Specificity in CSS there are four levels of the specificity hierarchy in CSS. each of these levels or categories have a different score we can calculate the specificity of a selector by adding up all the scores together.
Whichever selector has the greatest number will have there styles applied to that element that’s why sometimes when you write CSS your styles will not be applied and will show as crossed out in the dev tools. Below is the specificity score –
- IDs — Specificity score of
100 - Inline styles — Specificity score of
1000 - elements & pseudo-classes — Specificity score of
1 - Classes, pseudo-classes & attributes — Specificity score of
10
Now let’s explore the below code with :is() and :where()
header :is(h1, h2) { //Score: 2
color: green;
}
:where(h1, h2, p):where(.HelloClass, .ByeClass) { //Score: 0
color: red;
}Since :where() has zero specificity score, h1 and h2 under header will have the color green. Basically the :where() statement will be ignored, but if we replace :where() with :is() like below –
header :is(h1, h2) { //Score: 2
color: green;
}
:where(h1, h2, p):is(.HelloClass, .ByeClass) { //Score: 20
color: red;
}This time it will take the specificity of two classes so the total specificity score will become 20, which is higher than the score of 2. So finally browser will make the color change to red.
Watch the video below to see the example.
Hello there! I simply would like to give you a huge thumbs up for your excellent information youve got here on this post. I will be returning to your site for more soon.