Member-only story
Simplify CSS styling with is(), where(), and has() pseudo-classes
In recent years, CSS (Cascading Style Sheets) has been rapidly evolving, introducing new features and pseudo-classes that help make developing a little easier. Among these new innovations, three notable additions stand out: is(), where(), and has() pseudo-classes. Despite only being released to web browsers in 2022, they have already made a big impact on CSS development. Whether you're a seasoned developer looking to enhance your CSS skills or someone new to CSS, I hope you cand some nuggets of knowledge here.
1. The is() Pseudo-Class
One of the primary benefits of is() is its ability to simplify complex selectors. In addition to making your code cleaner, it also enhances maintainability.
/* Traditional CSS */
.example1 h3,
.example1 h4,
.example1 a {
color: blue;
}
/* Using is() pseudo-class */
.example1:is(h3, h4, a) {
color: blue;
}Imagine you have a large codebase with multiple selectors targeting the same elements. With is(), you can group them together, reducing code and making it easier to change styles across multiple elements.
Styling Pseudo-Classes
is() is particularly useful when working with pseudo-classes like :hover and :focus. Here's an example:
