CSS - Pseudo-class :where()

The CSS pseudo-class function :where() accepts a list of selectors as input and selects each element that matches any of the selectors in that list.

Syntax

:where(<complex-selector-list>) {
    /* css declarations */
}

CSS :where Example

The following example demonstrates the use of :where() pseudo-class.

<html>
<head>
<style>
   main :where(h1, h2, h3) {
      color: rgb(102, 0, 255);
   }
   :where(h2) {
      text-decoration-line: underline;
   }
   div {
      border: 3px solid black;
   }
</style>
</head>
<body>
 <main>
   <h1>Heading 1</h1>
   <h3>Heading 3</h3>
   <div>
   <h2>Heading 2</h2>
   <p>Paragraph under div</p>
   </div> 
 </main>
</body>
</html>

Difference between :where() and :is()

The difference between :where() and :is() lies in their specificity behaviour as listed below:

:where() :is()
It is a CSS selector that allows you to group selectors without increasing specificity. It is a CSS selector that allows you to group selectors, but unlike :where(), it inherits the specificity of the most specific selector within its parentheses
It acts as a container into which you can write complex selectors without affecting the specificity of those selectors. It is used to increase specificity only when needed, while preserving the specificity of the individual selectors
For example, :where(div, p) { /* styles */ } groups the div and p selectors without increasing specificity. For example, :is(div, p) { /* styles */ } would take on the specificity of either div or p, whichever is more specific.

In summary, :where() maintains a specificity of 0, while :is() adjusts its specificity based on the most specific selector within its parentheses.

Example

  • This example demonstrates how :is() can be used for specific styling.

  • :where() can be used to add additional styles without altering the specificity or overriding styles set by :is().

  • The specific styles for .special-box elements are maintained, and additional styles are added using :where().

<html>
<head>
<style>
   :is(.box, .special-box) {
         background-color: lightgray;
         color: black;
         font-weight: bold;
   }
   :where(.box, .special-box) {
         border: 2px solid black;
         padding: 10px;
         margin: 10px;
   }
   :is(.special-box) {
         background-color: blue;
         color: white;
   }
   :where(.special-box) {
         font-style: italic;
   }
</style>
</head>
<body>
<div class="container">
      <div class="box">Box A</div>
      <div class="special-box">Special Box</div>
      <div class="box">Box B</div>
</div>
</body>
</html>

Forgiving Selector Parsing

The concept of forgiving selector parsing in CSS refers to how :is() and :where() selectors handle invalid selectors within a selector list.

  • In CSS, if a selector within a selector list is invalid, the entire list is considered invalid, and the styles associated with it are not applied.

  • Using :is() and :where(), an incorrect or unsupported selector within the list is ignored, and the remaining valid selectors are still applied. In other words, :is() and :where() provide a forgiving mechanism where individual invalid selectors do not destroy the entire selector list.

Example

In the following example:

  • :is() and :where() selectors are used for styling specific elements.

  • Special styles are applied to boxes with the class .special inside the .content div.

  • Headers inside the .container div get a unique style, ignoring invalid selectors.

  • All boxes inside the .container receive a common styling.

  • Paragraphs within the .footer inside the .container are styled differently.

  • An invalid selector inside :where(.box.invalid-selector) doesn't disrupt the entire rule, demonstrating forgiving selector parsing.

<html>
<head>
<style>
   :where(.content) :is(.box.special) {
         background-color: yellow;
         color: black;
         font-weight: bold;
   }
   :where(.container) :where(.header, .invalid-selector) {
         background-color: lightblue;
         color: white;
   }
   :where(.container) :is(.box) {
         border: 2px solid black;
         margin: 10px;
         padding: 10px;
   }
   :where(.container) :where(.footer) p {
         font-style: italic;
         color: gray;
   }
   :where(.container) :where(.box.invalid-selector) {
         text-decoration: underline;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="header">
         <h1>Main Heading</h1>
      </div>
      <div class="content">
         <div class="box">Box 1</div>
         <div class="box special">Special Box</div>
         <div class="box">Box 3</div>
      </div>
      <div class="footer">
         <p>Footer Content</p>
      </div>
   </div>
</body>
</html>
Advertisements