Home > Tips & Tricks > CSS :is() and :where() Pseudo-classes Functions

CSS :is() and :where() Pseudo-classes Functions

In this trick, we will learn about CSS :is() and :where() pseudo-classes functions and how it works. We also look into how it’s a smart way to handle multiple elements in design.

CSS :is() Pseudo-class Function

The :is() pseudo-class is like a magic wand for selecting elements that match any of the provided selectors. It’s a time-saver when you want to apply the same styles to multiple elements without repeating yourself.

:is() Function Example

Let’s have an example of :is() function to understand it in a better way. Let’s say you have a bunch of anchors (<a>) selectors who are the child of many. But you only want to target the a elements that are children of ul li, ol li, and p and give them all the same font style. Instead of writing separate rules for each, you can use :is() function. See the following example.

Normal selectors

ul li a, ol li a, p a {
	color: blue

Using :is() function

:is(ul, li, p) a {
	color: blue

The above code will work the same as you normally do in CSS. You can implement it as you want accordingly selectors.

CSS :where() Pseudo-class Function

The :where() function is another gem in the CSS toolkit. It allows you to apply styles to elements based on a condition, irrespective of their position in the document tree. It’s incredibly handy when you need to style elements dynamically without worrying about their hierarchy.

:where() Function Example

Let’s say you want to style headings h1, h2, and h3 within articles differently. Instead of targeting them individually, you can use :where() to apply styles to all headings within that article. See the following example.

Normal selectors

article h1, article h2, article h3 {
	color: blue

Using :where() function

article :where(h1, h2, h3) {
	color: blue

With :where(), you can keep your CSS concise and maintainable, even as your HTML structure evolves.

Putting :is() and :where() Together

You can also use these pseudo-classes functions together to target more specific elements. Let’s combine :is() and :where() to see the magic happen. Imagine you have a navigation menu where you want to highlight the current page link and style all links uniformly. Here’s how you can do it.

nav ul :is(li:where(.active), li:hover) a {
  color: #ffcc00; /* Yellow color for active and hovered links */
  text-decoration: underline;

This code selects the active link and also applies styles to hovered links, ensuring a consistent user experience.

More Tricks


What is the difference between :is() and :where() pseudo-classes in CSS?

:is() selects elements matching any of the provided selectors, while :where() applies styles based on conditions, regardless of the document hierarchy.

How can I use :is() and :where() in my CSS code?

Simply incorporate :is() to target multiple elements with shared styles and utilize :where() to apply styles dynamically based on conditions, enhancing code efficiency.

Photo of author

About Aman Mehra

Hey there! I'm Aman Mehra, a full-stack developer with over six years of hands-on experience in the industry. I've dedicated myself to mastering the ins and outs of PHP, WordPress, ReactJS, NodeJS, and AWS, so you can trust me to handle your web development needs with expertise and finesse. In 2021, I decided to share my knowledge and insights with the world by starting this blog. It's been an incredible journey so far, and I've had the opportunity to learn and grow alongside my readers. Whether you're a seasoned developer or just dipping your toes into the world of web development, I'm here to provide valuable content and solutions to help you succeed. So, stick around, explore the blog, and feel free to reach out if you have any questions or suggestions. Together, let's navigate the exciting world of web development!

Leave a Comment