How :has() Pseudo-Class Eliminates the Need for JavaScript Hacks in CSS

Remember those times when you needed to style a parent element based on its children, and you ended up writing a bunch of JavaScript just to add a simple class? Well, those days are finally behind us! The CSS :has() pseudo-class is here to save the day, changing the game for front-end developers everywhere.

What's All the Fuss About :has()?

Think of :has() as your CSS crystal ball – it lets you look inside elements to check what they contain. Want to style a div differently when it has an image inside? It's as simple as writing div:has(> img). No JavaScript is required!

/* This targets any div that contains an image */
div:has(img) {
  padding: 1rem;
  background: #f5f5f5;
}

/* This one's more specific - only direct children */
div:has(> img) {
  border: 2px solid #ddd;
}

Most modern browsers now support :has(), though Internet Explorer users (if you still need to support them) will need a fallback. But don't let that stop you – progressive enhancement is your friend here!

The Old Ways vs. The New Hotness

Let's talk about some common scenarios that used to drive us crazy. Remember these?

The Form Field Validation Dance

The Old Way:

const formGroup = document.querySelector('.form-group');
const input = formGroup.querySelector('input');

input.addEventListener('invalid', () => {
  formGroup.classList.add('has-error');
});

The New Way:

.form-group:has(input:invalid) {
  border-color: red;
  background: #fff8f8;
}

No more event listeners or class toggling – just pure, declarative CSS. Isn't that beautiful?

The Dropdown Menu Makeover

We've all been there – trying to style a dropdown container when its menu is open. Previously, you'd need JavaScript to toggle classes up and down the DOM tree.

Old JavaScript Approach:

const dropdown = document.querySelector('.dropdown');
const menu = dropdown.querySelector('.menu');

menu.addEventListener('click', () => {
  dropdown.classList.toggle('is-open');
});

New CSS Approach:

.dropdown:has(.menu:focus-within) {
  background: #f0f0f0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

Real-World Magic Tricks with :has()

Let's look at some practical examples where :has() really shines:

1. Smart Image Galleries

Want your gallery to adjust its layout based on the type of content it contains? Easy peasy!

.gallery:has(img) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.gallery:has(video) {
  display: flex;
  flex-direction: column;
}

You can integrate the link to the Medium article into your new article by using it as a reference, citation, or inspiration source. Here’s how you can include it effectively:

Interactive forms, dropdown menus, and sibling state management are just a few examples of where CSS now takes the lead. As noted in this insightful Medium piece, modern techniques like :has() allow CSS to directly manage these tasks without relying on JavaScript.

2. Form Field Dependencies

Need to highlight a whole section when a checkbox is checked? No problem!

.section:has(input[type="checkbox"]:checked) {
  background: #e8f4ff;
  padding: 1rem;
  border-radius: 4px;
}

3. Empty State Handling

Want to show a message when a container is empty? :has() has got your back:

.container:not(:has(*)) {
  display: grid;
  place-items: center;
  min-height: 200px;
  background: #f9f9f9;
}

.container:not(:has(*))::before {
  content: "No items to display";
  color: #666;
}

The Performance Win

Here's the thing about using :has() instead of JavaScript: it's not just about writing less code. Your pages will actually perform better because:

1. The browser's style engine handles all the work natively
2. No JavaScript execution overhead
3. No layout thrashing from constant class additions/removals
4. Fewer event listeners clogging up your page

Best Practices and Gotchas

While :has() is awesome, there are a few things to keep in mind:

1. Keep it Simple
   Don't go overboard with complex selectors. Just because you can write div:has(> span:has(> img)):has(+ p) doesn't mean you should!

2. Progressive Enhancement
   Always have a sensible fallback for browsers that don't support :has():
   

/* Base styles for all browsers */
.parent {
  background: #fff;
}

/* Enhanced styles for browsers that support :has() */
@supports selector(:has(*)) {
  .parent:has(.special) {
    background: #f0f0f0;
  }
}

1. Performance Considerations While :has() is generally performant, very complex selectors can still impact rendering. Keep an eye on your DevTools performance panel if you're using it extensively.

Wrapping Up

The :has() pseudo-class is more than just a new CSS feature – it's a paradigm shift in how we handle parent-child relationships in our stylesheets. It helps us write more maintainable code, improve performance, and most importantly, it lets CSS do what CSS does best: handle styling declaratively.

So next time you reach for JavaScript to toggle a class on a parent element, remember: there might be a simpler, more elegant solution with :has(). Give it a try – your code (and your users) will thank you!

Remember, while browser support is good and getting better, always check caniuse.com for the latest compatibility information. And don't be afraid to experiment – that's how we all learn and grow as developers!

Comments

[Sohail SJ | chakraframer.com]

Great article mate, Cheers