Day 50 - The Mightiest Selectors - :has() and :not() in Action

?? An Awesome CSS Link a Day – Day 50 ??

The Mightiest Selectors - :has() and :not() in Action

The CSS :has() pseudo-class is a true game-changer! ?? It allows you to style elements based on their children or descendants, something that was previously impossible with pure CSS. With :has(), you can create powerful conditional styles, improve accessibility, and even replace some JavaScript use cases. Combining it with the well known :not() selector it's possible to do some black magic with our CSS.

Introduction

Have you ever wanted to style an element only if it contains a specific child? Or maybe change the appearance of a parent based on its internal content? Well, with :has(), you can now do it all directly in CSS!

For example, you can apply a unique style to a card only if it contains an image, or modify a container’s layout based on the presence of a specific button. In short, :has() brings conditional logic into CSS.

?? Theory :has() and :not() Beyond the Basics

The :has() selector is one of the most powerful tools in modern CSS, but it’s often misunderstood or compared to :not(). Here are some key insights:

• Parent Selection: :has() is called the parent selector because it allows styling a parent based on its children.
• Combining with :not(): You can use :not(:has()) to select elements that DO NOT contain a specific descendant, enabling advanced CSS patterns.
• Support & Performance: While :has() is supported in most modern browsers, use it cautiously on large datasets as it can impact rendering performance.

?? Today’s Links

To celebrate the power of :has() and :not(), here are two must-read resources:

?? The :not() Selector in Use – by Silvestar Bistrovi?

?? Decoding CSS Selectors :has(:not()) vs :not(:has()) – by Polypane

These articles will help you understand how :has() and :not() work together and how to leverage them for more dynamic, powerful styles.

?? Giveaways

• Advanced CSS patterns using :has() and :not() for dynamic layouts without JS.
• Practical examples for responsive tables, interactive cards, and adaptive forms.
• A mini-guide on avoiding common pitfalls when using :has(), ensuring compatibility and performance.

? Why This Rocks

• Finally, a native “parent selector” in CSS (my personal opinion is that we should call it "content aware" selector)!
• Great for accessibility: improves UX without requiring JavaScript.
• Can eliminate extra utility classes and simplify markup.
• Reduces DOM manipulation needs in JavaScript, making CSS more powerful.

??? Join the Conversation

• Have you already used :has() in your projects? What are your favorite use cases?
• How do you think :has() will change the way we write CSS?
• Do you see more advantages or drawbacks in using :has() over JavaScript solutions?
• What other CSS selector improvements would you like to see in the future?

Let’s discuss and explore new ways to leverage :has(), :not() and related combos!