The way to clean CSS — the usage of :is(), :where() and :has()

Let us write CSS for an elegant interface, and it will always evolve itself to be more elegant.

Today we spend 5 minutes learning three elegant CSS pseudo-classes: :is(), :where() and :has().

:is()- Replaces combo selector

:is() allows you to include multiple selectors in a rule. It accepts a set of selectors as parameters and applies styles to matching elements.

/* Traditional method */
ul > li > a,
ol > li > a,
nav > ul > li > a,
nav > ol > li > a {
   color: blue;
}

/* Use :is() */
:is(ul, ol, nav > ul, nav > ol) > li > a {
   color: blue;
}

:is() it can simplify the writing of multi-level nesting and multiple selector combinations, making it easier for you to maintain styles.

:is() the priority still follows the priority rules of CSS selectors, that is, ID-> class -> element the order of .

:is(.class1) a {
  color: blue;
}

:is(#id1) a {
  color: red;
}

If two rules in this code hit the same element, the second one will be applied first.

:is() parameters can also pass a matching rule

:is([class^="is-styling"]) a {
  color: yellow;
}

This way of writing will match all selectors class starting with .is-styling

:where()- Has the lowest priority

:where() similar to :is() , you can pass in selectors or matching rules to simplify your CSS code.

:where([class^="where-styling"]) a {
  color: yellow;
}

But unlike : is() :where() , it has the lowest priority. The advantage of this is that the style rules it defines will not affect other style rules and avoid style conflicts.

/* <footer class="where-styling">……</footer> */

footer a {
  color: green;
}
:where([class^="where-styling"]) a {
  color: red
}

When there are other rules and :where() are hit at the same time, :where() they must be invalid. So the actual effect of the above example is that the link displays green.

:has()- Match based on other elements

:has() elements can be matched based on the presence of direct descendants

/* Select the div that directly contains the p element */
div:has(> p) {
   border: 1px solid black;
}

You can also match elements based on the next sibling element

/* Select the div followed by the p element */
div:has(+ p) {
   border: 1px solid black;
}

You can also use it with other pseudo-classes, such as :has() with :is()

:has() there are many usage scenarios, as long as it is a highly interactive page, it may be used. I will share an article separately in the future~

Summarize

Most new versions of browsers already support :is() these three pseudo-classes, :where() and :has(). If your project runs in an earlier version of the browser, you need to consider the fallback strategy.

PlainEnglish.io 🚀

Thank you for being a part of the In Plain English community! Before you go:

• Be sure to clap and follow the writer️
• Learn how you can also write for In Plain English️
• Follow us: X | LinkedIn | YouTube | Discord | Newsletter
• Visit our other platforms: Stackademic | CoFeed | Venture