CSS has grown so much since it was first introduced. It now includes awesome things like variables and cool pseudo-classes that make declaring styles consistently a breeze. So much so, that I felt it was important to start taking time to highlight some cool things I find that help my productivity when I use them. As such, I like to share as well.

Today I wanted to take a minute to look at something cool, :where(). This pseudo-class, or util if that’s a better mental model for you, is great because it simplifies your stylings while maintaining no specificity. To better explain the specificity part, styles declared with this pseudo-class will get overwritten when a more specific declaration is present.

Enough with words though, let’s look at some code!

:where(header, section) h1 {
  font-weight: 700;

/* Old School Equivalant */
header h1,
section h1 {
  font-weight: 700;

Looking at the code above, it’s easy to see the benefits of turning that two-line selector into a one-liner. Now back to the specificity part of this. As aforementioned, this pseudo-class is at the bottom of the totem pole in terms of importance. So let’s say that we had the same code above, but the old school way had a different value. In that case, the old-school way would take precedent.

Let’s take a look at a more declarative example.

:where(div.TestClass, p.TestClassText) a {
  color: blue;

article a {
  color: green;

In the above case, the priority for all a tags under an article tag takes priority. Simple, and easy to understand!