3 Powerful CSS Functions You Need to Know 🚀

CSS is constantly evolving, and a few new functions have made styling more efficient and powerful than ever. Let's dive into three essential functions—:where(), :is(), and :has()—that you should start using in your projects today.

1. where(): The Specificity-Zero Selector

Dealing with CSS specificity can be a pain. Overriding styles often requires adding more classes or using !important, which can make your code messy. The :where() function is a game-changer because it allows you to group selectors without adding any specificity to the rule.

Consider this common scenario: you want to apply the same style to multiple headings within an main element. The traditional way would be to write out each selector, like this:

mainh1, mainh2, mainh3 {

color: #lalala;

}

This works, but it adds specificity. With :where(), you can achieve the same result with zero specificity.

main :where(h1, h2, h3) {
color: #lalala;
}

This is incredibly useful when you want to apply a general style that can be easily overridden by other, more specific rules later on. Think of it as a way to create low-priority default styles.

2. :is(): The Specificity-Preserving Selector

Like :where(), the :is() Function is also for grouping selectors, but with a key difference: it preserves the specificity of the most specific selector in the list. This makes it perfect for when you want to apply styles to multiple elements but need the specificity to remain high.

Let's look at the same example. If you use :is(), the specificity will be the same as if you had written out each selector individually.

main :is(h1, h2, h3) {
color: #lalala;
}

In this case, the specificity of the rule is determined by the main selector, so it's a great way to write cleaner, more compact code without losing the specificity you need to override other styles. It's especially handy when you have a long list of pseudo-classes or elements you want to target.

3. :has(): The Parent Selector

For years, developers have longed for a way to select a parent element based on its children. The :has() function finally makes this possible! It's also known as the "parent selector".

Imagine you have a list of items and you want to style an div element only if it contains a checked checkbox. Previously, this would require JavaScript. Now, you can do it directly in CSS.

.parent:has(input:checked) {
background: lightgreen;
}

This rule will apply to a lightgreen background to any element with the class .parent that contains an <input> element with the :checked state. This opens up a world of possibilities for creating dynamic, interactive styles that previously required scripting.

By incorporating these three functions into your workflow, you can write more concise, readable, and powerful CSS.


Happy coding! 💻