:where() :is() — A New CSS

Write a cleaner CSS with :where() and :is() pseudo-classes

Photo by Joshua Aragon

:is()

.main h1,
.main h2,
.main .heading, {
line-height: 1.2;
}
.nav li,
.nav p {
padding: 5px 10px;
}
.main :is(h1, h2, .heading){
line-height: 1.2;
}
.nav :is(li, p) {
padding: 5px 10px;
}

:where()

.main h1,
.main h2,
.main .heading, {
line-height: 1.2;
}
.nav li,
.nav p {
padding: 5px 10px;
}
.main :where(h1, h2, .heading){
line-height: 1.2;
}
.nav :where(li, p) {
padding: 5px 10px;
}

So what’s the difference?

Specificity.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store