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 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

#Dec 4 What is Etrieve Flow? #Dec 2 The unique operator($) in Envision Basic #Nov 25 Steps to Install Microsoft SQL Server on a MacOS #Nov 11 What is DevOps? #Nov 10 The * arithmetic operator in Envision Basic #Nov 10 What are Big Data Clusters in SQL Server?
You might also like these
What are Class Constants in PHP?PHPWhat is a component helper function in React?ReactDISTINCT ON: The confusing, unique and useful feature in PostgresPostgresShould we ever delete data from a database?MiscellaneousHow to create a link tag button using CSS?CSSIs PHP still good for back-end programming?PHPHow to redirect or load a new document using JavaScript?JavaScriptUseful (and probably ignored) HTML tags: Part 1HTMLHow to add a ribbon inside a container using CSS?CSSContent types in DrupalDrupalHow to disable right click and drag and drop of images using jQuery?jQueryVariables scope and shadowing in SCSS (Sass)SCSS