Quick Reminder That :is() and :where() Are Basically the Same With One Key Difference

Recently, many articles have discussed the practicality of the CSS :is() relational pseudo-selectrator, which can improve the readability of composite selectors. For example:

 :is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) {
  color: #BADA55;
}

Equivalent to:

 section h1, section h2, section h3, section h4, section h5, section h6, 
article h1, article h2, article h3, article h4, article h5, article h6, 
aside h1, aside h2, aside h3, aside h4, aside h5, aside h6, 
nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 {
  color: #BADA55;
}

However, the specificity of the :is() selector depends on the most specific selector among its parameters. There is little problem with simple element and class selectors, but if the ID selector is included, the specificity becomes high:

 /* Specificity: 0 0 1 */
:is(h1, h2, h3, h4, h5, h6) {
  color: #BADA55;
}

/* Specificity: 1 0 0 */
:is(h1, h2, h3, h4, h5, h6, #id) {
  color: #BADA55;
}

This is sometimes useful, for example, you can deliberately add a fictional ID to force the style, similar to the !important keyword.

But what if you don't want this? Some articles suggest nesting selectors, but this is not as convenient as :is() .

At this time, :where() selector comes in handy! It's exactly the same as :is() , but has no specificity issues. Its specificity is always zero. Think of it as a specific reset:

 /* Specificity: 0 0 0 */
:where(h1, h2, h3, h4, h5, h6) {
  color: #BADA55;
}

/* Specificity: 0 0 0 */
:where(h1, h2, h3, h4, h5, h6, #id) {
  color: #BADA55;
}

Therefore, if the specificity of :is() is affected by some selector, then :where() will be a better choice.

The above is the detailed content of Quick Reminder That :is() and :where() Are Basically the Same With One Key Difference. For more information, please follow other related articles on the PHP Chinese website!