Why :is is helpful

Posted on March 6th 2021 in CSS by Pim Debaere.

Why :is is helpful

The :is() pseudo-class in CSS may seem useless at first, because you generally can get the same result without using it. Make no mistake, however, because thanks to this pseudo-class you can sometimes shorten very long selectors and thus make your CSS file less complex and more readable.

:is()

Let's start with a (very) brief explanation of this pseudo-class. Like other pseudo-classes, this is a simple selector that makes it possible to make a selection based on information that is difficult to express with the typical use of selectors. In this particular case, we select elements that exactly match the selector list. Below is an example where both selectors have the same result.

1
2
3
4
5
6
7
section {
  font-size: 21px; 
}

:is(section) {
  font-size: 21px; 
}

Fig. 1 – CSS selectors with and without :is().

Okay, but now the CSS just got longer!? Correct, but of course this example was for illustrative purposes only and not difficult to interpret at all. Now take the following example, where the style applies to all h1 elements that are nested in section, article, aside or nav:

1
2
3
4
5
6
section section h1, section article h1, section aside h1, section nav h1,
article section h1, article article h1, article aside h1, article nav h1,
aside section h1, aside article h1, aside aside h1, aside nav h1,
nav section h1, nav article h1, nav aside h1, nav nav h1 {
  font-size: 21px;
}

Fig. 2 – More complex CSS selector without :is().

Using :is()[/ c] we can set this up more easily, because just like a typical selector list we can also use nested elements here.

1
2
3
4
5
:is(section, article, aside, nav)
:is(section, article, aside, nav)
h1 {
  font-size: 21px;
}

Fig. 3 – More complex CSS selector with :is().

As you can see, this is a lot easier to interpret. It's about all the h1 elements that are under a section/article//aside/nav which in turn are also under a section/article//aside/nav.

On MDM a nice example is shown where a style is applied on all lists that are at least three levels deep.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* original */
ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
menu ol menu, menu ul menu, menu menu menu, menu dir menu,
menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
  list-style-type: square;
}

/* becomes */
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul,
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) menu,
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) dir {
  list-style-type: square;
}

Fig. 4 – Original code by MDM.