:is(): One of the things that allow us to write more than CSS selectors in short, and make it easier for us to do a lot of CSS operations, including reducing code lines and increasing the efficiency of the code in CSS.
You may understand through these examples what I want to go through it.
without :is()
ul li,
ol li {
background-color: #09c;
}
with :is()
:is(ul, ol) li {
background-color: #09c;
}
In this example, you see a simple example. The difference may not be clear. look with me if there is a large example, the difference may be clear and important.
without :is()
section h1, section h2, section h3, section h4, section h5, section h6,
article h1, article h2, article h3, article h4, article h5, article h6,
aside h1, aside h2, aside h3, aside h4, aside h5, aside h6,
nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 {
color: #BADA55;
}
with :is()
:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) {
color: #BADA55;
}
here you see that there is a big difference between the above examples.
:is() : provides multi-lines of code and makes code easier and simple to read and how it works in a simple way.
:is() is very similar to the nested operation in the CSS preprocessor like Sass.
with Scss
div,
p,
h1 {
span {
color: #f32;
}
}
without :is() css
div span,
p span,
h1 span {
color: #f32;
}
with :is() css
:is(div, p, h1) span {
color: #f32;
}
:is(): is supported in all browsers except IE (internet explorer).
Finally, you can look at these links and you will understand this topic better.