CSS functions like :is(), :not() and :has() are powerful tools that make it much easier to select elements specifically. We've written before about how ::where…

One of my favorite not-so-new aspects of CSS is the :empty pseudo-class. You can use this to target elements that have no children—either child elements or whitespace and text nodes—and style them differently than they would be otherwise. For example, imagine you have some CSS to layout items in a row using flexbox… .grid-flex { display: flex; gap: 1rem; } .grid-flex div { background-color: #ffdc00; border: 1px solid #665800; color: #665800; padding: 1rem 2rem; text-align: center; } And a row of items generated from an API or database or something.

I set out to learn a bit about how CSS nesting works, especially the new & selector, and I ended up on a deep dive into the :is() selector and its siblings.

The :has() pseudo-class has been a much-awaited addition to CSS - discover advanced implementations in this complete guide.

Learn about the :where() pseudo-class function and show how it can be used in production. See some specific use cases.

These seemingly small additions to CSS selector syntax are going to have a big impact.

The CSS Working Group Editor’s Draft for [Selectors Level 4](https://drafts.csswg.org/selectors-4/) includes several pseudo-class selectors that already have proposal candidates in most modern browsers. This guide will cover ones that currently have the best support along with examples to demonstrate how you can start using them today!