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
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
8 min read

Become a Web Developer in 180 Days

A comprehensive roadmap to becoming a proficient web developer

Oct 29, 2019
Read article
Webdev
4 min read

Understanding Vue's Suspense

How the Suspense component manages async dependencies and improves loading states in Vue apps

Aug 23, 2024
Read article
Webdev
3 min read

HTML Details Element: The Native Accordion You're Not Using

Discover how the HTML details element can replace your JavaScript accordions and why it might be better than your current solution

Dec 10, 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
3 min read

CSS @supports: Write Future-Proof CSS

Detect CSS feature support and provide smart fallbacks with @supports

Dec 6, 2024
Read article
Webdev
7 min read

Tips for Reducing Cyclomatic Complexity

Cyclomatic complexity is like counting how many ways a car can go. More options make it harder to drive because you have to make more decisions, which can lead to confusion.

Sep 10, 2024
Read article
Webdev
4 min read

Open Dyslexic Font: Improve Your Web Accessibility

How to implement the Open-Dyslexic font to enhance readability for users with dyslexia

Oct 12, 2024
Read article
Webdev
12 min read

Frontend Security Checklist

Tips for Keeping All Frontend Applications Secure

Jul 30, 2024
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.