dots Created with Sketch.
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:

amazon

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Jul 22 Is there a CSS parent selector? #Jul 22 Difference between :where and :is in CSS #Jul 22 Does :is() pseudo selector hint at CSS preprocessing in the future? #Jul 22 Control Scrolling with CSS Scroll Snap #Jul 21 Control rendering using CSS content-visibility property #Jul 21 How to use @supports rule in CSS?
You might also like these
How to Make CSS Lists Bullets Smaller?CSSWhat is HTMLUnknownElement?HTMLHow to CREATE TABLE in SQL with and without using Another Table?SQL/MySQLfor @each loop in SCSSSCSSHow to add Laravel to WordPress using Sage theme (and install Tailwind CSS)?PHPSome Useful Operators in The SQL WHERE ClauseSQL/MySQLCheck If a String Contains a Specific Word in PHPPHPWhat is Hoisting in JavaScript?JavaScriptasync function in JavaScriptJavaScriptWordPress: How to query all posts from custom post type and display them in a list?WordPressThe Difference Between Arrays and Objects in JavaScriptJavaScriptComponents and Props in ReactReact