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

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
How to create a simple text and image slider using CSS and JavaScript?CSSHow to use data-* Attributes in HTML?HTMLHow to use $INSERT command in Envision Basic?Envision BasicHow to apply style to the first-child using jQuery?jQuery@forward modules with a prefix in SCSS (Sass)SCSSDebugging in WordPress Part 3: SCRIPT_DEBUG and SAVEQUERIESWordPressinclude, include_once, require, require_once in PHPPHPAngular: Templates, directives, data binding, Services and dependency injectionAngularThe flex-grow, flex-shrink and flex-basis Properties in CSSCSSWhat’s a Strict mode in JavaScript?JavaScriptWhat is the difference between Loosely Typed Language and Strongly Typed Language?MiscellaneousHow to define visibility for a property in PHP?PHP