This blog covers less known CSS pseudo-selector :is().What is a pseudo-selector? Why do we need this? Advantage of using :is().
Hey, do you work with CSS a lot and tired of changing the styles of the elements inside of other elements, In this blog, I will explain the easiest way of Selecting multiple elements. Before we begin let us understand what is pseudo-selector.
What is a pseudo-selector?
Pseudo class selectors are CSS selectors with a colon preceding them. You are probably very familiar with a few of them. Like hover:
Here, In this HTML code, we want to give some styling to h1 and p tag
<body>
<header>
<h1>This blog is about :is() pseudo selector</h1>
<p>This tells us easy way of styling multiple elements</P>
</header>
</body>
We used to do this by using a compound selector and comma separator to select multiple elements.
header h1,
header p {
color:red;
}
Sometimes, it gets annoying and code becomes complex using comma separators, here is when the magical pseudo-selector: is() comes in handy, Let's see the magic now!
header :is(h1,p){
color:red;
}
So much can be done using just a single selector, and not just the elements we can select classes also, Amazing right!
div :is(.class1 , .class2, .class3){
}
Advantage of using :is().
-Unlike compound selector, if we make a mistake of selecting elements the style will not apply to any of the elements, whereas using :is() style will get applied to other elements except the one with the mistake.
That's all for this blog, I hope you understood well and will use this in your next project, please do follow for such amazing blogs.