Up to date
Published
3 min read

Trevor I. Lasn

Staff Software Engineer, Engineering Manager

CSS :has() - The Parent Selector We've Always Wanted

Transform your CSS with :has(), the game-changing selector that finally lets us style elements based on their children.

The :has() selector addresses a long-standing limitation in CSS - the inability to style elements based on their contents.

While CSS has always allowed styling children based on their parents, the reverse wasn’t possible until now. This change brings new possibilities for dynamic, content-aware styling.

The :has() selector functions as a conditional check for element contents. It enables style application based on whether an element contains specific children or siblings:

This straightforward syntax eliminates the need for JavaScript or complex CSS workarounds that were previously necessary.

The :has() selector becomes more powerful when combined with other selectors for checking states, positions, and combinations:

The :has() selector enables adaptive layouts that respond to content structure:

This approach eliminates manual class management or JavaScript intervention for layout adjustments.

The :has() selector fundamentally changes CSS architecture by enabling content-aware styling without JavaScript. Its ability to style parent elements based on their children opens up robust, maintainable approaches to common layout challenges.

Modern browsers support :has() well, making it production-ready for contemporary web development. For older browsers, implement fallback styles:

My tip: Start small - replace JavaScript-based style toggles with :has() selectors. Move gradually to content-aware layouts.


Found this article helpful? You might enjoy my free newsletter. I share dev tips and insights to help you grow your coding skills and advance your tech career.

Interested in supporting this blog in exchange for a shoutout? Get in touch.


Liked this post?

Check out these related articles that might be useful for you. They cover similar topics and provide additional insights.

Webdev
3 min read

scrollbar-width & scrollbar-gutter: CSS Properties for Layout Control

Prevent content shifts and refine scrollable UIs with scrollbar-width and scrollbar-gutter

Dec 19, 2024
Read article
Webdev
3 min read

align-content: The Simplest Way to Center Content with CSS

Finally, we can center things in block layouts without flexbox gymnastics

Dec 13, 2024
Read article
Webdev
12 min read

Frontend Security Checklist

Tips for Keeping All Frontend Applications Secure

Jul 30, 2024
Read article
Webdev
5 min read

SecretLint — A Linter for Preventing Committing Credentials

A guide to catching and preventing credential leaks in your code using Secretlint

Oct 22, 2024
Read article
Webdev
13 min read

10 Essential Terminal Commands Every Developer Should Know

List of useful Unix terminal commands to boost your productivity. Here are some of my favorites.

Aug 21, 2024
Read article
Webdev
8 min read

Stop Using localStorage for Sensitive Data: Here's Why and What to Use Instead

Understanding the security risks of localStorage and what to use instead for tokens, secrets, and sensitive user data

Oct 28, 2024
Read article
Webdev
4 min read

Self-Taught Developer's Guide to Thriving in Tech

How to turn your non-traditional background into your biggest asset

Sep 28, 2024
Read article
Webdev
4 min read

How To Implement Content Security Policy (CSP) Headers For Astro

Content Security Policy (CSP) acts like a shield against XSS attacks. These attacks are sneaky - they trick your browser into running malicious code by hiding it in content that seems trustworthy. CSP's job is to spot these tricks and shut them down, while also alerting you to any attempts it detects.

Oct 16, 2024
Read article
Webdev
3 min read

Native Popover Element with HTML

Create overlays and dropdowns easily with the native HTML popover API

Jan 24, 2025
Read article

This article was originally published on https://www.trevorlasn.com/blog/has-css-functional-pseudo-class. It was written by a human and polished using grammar tools for clarity.