Abhay_Blogs

This blog covers less known CSS pseudo-selector :is().What is a pseudo-selector? Why do we need this? Advantage of using :is().

This blog covers less known CSS pseudo-selector :is().What is a pseudo-selector? Why do we need this? Advantage of using :is().

abhay Patil's photo
abhay Patil
·

2 min read

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! Gif description

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.

CSSHTML5DeveloperJavaScriptProgramming Blogs