Yogesh Chauhan's Blog

Difference between :where and :is in CSS

in CSS on July 22, 2021

Here’s another post covering basics of :is pseudo selector:

Does :is() pseudo selector hint at CSS preprocessing in future?

where()

:where() is a pseudo-class function that accepts a selector list argument and appys the style to whichever selector matches.


:where(div, main, section) p {
  font-size: 1rem;
}

Which is same is using :is as we saw in the :is() pseudo selector post.

DIFFERENCE

:where() has 0 specificity, always.

:is() has the specificity of the selector in its arguments.

Example

Here is one simple example in which the :where pseudo-class style is overridden by another style rule, which is added afterwards and that’s why it overrides the specificity of :where (0).

BUt if I change the order of the style rules, it will work:


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
What is the difference between float and double?MiscellaneousHow to Create a Backup From Any Database in SQL?SQL/MySQLHow to add today’s date in HTML input date value using JavaScript?JavaScriptAggregate Functions Examples in Postgres for BeginnersPostgresHow to add Google Static Map using ACF map field?WordPressSolution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software”MiscellaneousHow to list all PHP variables to debug the script?PHPHow to check if the page is the home page in WordPress?WordPressAn Introduction to wp-config file in WordPressWordPressHow to add Laravel to WordPress using Sage theme (and install Tailwind CSS)?PHPHow to avoid element shift on border change while hovering in CSS?CSSWordPress: How to access first and random row values from a repeater field in ACF?WordPress