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!