Day 13: the :where() and :is() pseudo classes

posted on October 12., 2022

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

---

The :where() and :is() pseudo-classes allow you to write large lists of selectors in a more compact form. You can combine selectors instead of writing repetitive lists.

Combining input types

/* Before */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="password"],
input[type="search"] {
  border: 2px solid;
}

/* After */
input:where(
  [type="text"],
  [type="email"],
  [type="url"],
  [type="tel"],
  [type="password"],
  [type="search"]
) {
  border: 2px solid;
}

Combining pseudo-classes

a:is(:link, :visited) {
  color: green;
}

a:is(:hover, :focus) {
  text-decoration: none;
}

Now you might be thinking, “Uhm,…can’t I just use :where() instead of :is() and vice versa? What’s the difference?”.

A fantastic question that I’ll answer in tomorrows post! :)

See on CodePen.

Further reading