The Difference Between the :where() and :is() CSS Selectors

The CSS selectors :where() and :is() are two pseudo-classes that allow you to select elements based on their relationship with other elements.


This content originally appeared on 1stWebDesigner and was authored by Editorial Team

The CSS selectors :where() and :is() are two pseudo-classes that allow you to select elements based on their relationship with other elements. Although they sound similar, they are different in terms of functionality and syntax.

Your Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets


The :where() pseudo-class was introduced as part of the CSS Selectors Level 4 specification and allows you to select elements based on the presence of other elements that match a specific condition. In other words, you can select elements based on the relationship between elements in a DOM tree. For example, you can use the :where() selector to select a list item li only if it is the first child of an unordered list ul:

li:where(:first-child of ul) {
  background-color: yellow;
}

On the other hand, the :is() pseudo-class is part of the CSS Selectors Level 3 specification and allows you to select an element if it is one of several different selectors. It is similar to the logical OR operator, in CSS. For example, you can use the :is() selector to select a p element if it is either the first child of its parent or has a class of highlight:

p:is(:first-child, .highlight) {
  background-color: yellow;
}

It’s important to note that the :where() selector has better browser support than the :is() selector, and that the :is() selector should not be used in conjunction with the :not() pseudo-class.


This content originally appeared on 1stWebDesigner and was authored by Editorial Team


Print Share Comment Cite Upload Translate Updates
APA

Editorial Team | Sciencx (2023-02-27T09:17:10+00:00) The Difference Between the :where() and :is() CSS Selectors. Retrieved from https://www.scien.cx/2023/02/27/the-difference-between-the-where-and-is-css-selectors/

MLA
" » The Difference Between the :where() and :is() CSS Selectors." Editorial Team | Sciencx - Monday February 27, 2023, https://www.scien.cx/2023/02/27/the-difference-between-the-where-and-is-css-selectors/
HARVARD
Editorial Team | Sciencx Monday February 27, 2023 » The Difference Between the :where() and :is() CSS Selectors., viewed ,<https://www.scien.cx/2023/02/27/the-difference-between-the-where-and-is-css-selectors/>
VANCOUVER
Editorial Team | Sciencx - » The Difference Between the :where() and :is() CSS Selectors. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/02/27/the-difference-between-the-where-and-is-css-selectors/
CHICAGO
" » The Difference Between the :where() and :is() CSS Selectors." Editorial Team | Sciencx - Accessed . https://www.scien.cx/2023/02/27/the-difference-between-the-where-and-is-css-selectors/
IEEE
" » The Difference Between the :where() and :is() CSS Selectors." Editorial Team | Sciencx [Online]. Available: https://www.scien.cx/2023/02/27/the-difference-between-the-where-and-is-css-selectors/. [Accessed: ]
rf:citation
» The Difference Between the :where() and :is() CSS Selectors | Editorial Team | Sciencx | https://www.scien.cx/2023/02/27/the-difference-between-the-where-and-is-css-selectors/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts