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

posted on

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 */
border: 2px solid;

/* After */
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