Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Which features will the :has() selector help?

See original GitHub issue

Feel free to leave a comment (or more) if you think of any features that can be rewritten or enhanced using the has selector.

Live examples:

But also, maybe:

hiding tabs that have a zero (the number is often in an attribute as well, so it can be targeted)
hiding events from the newsfeed
showing our “update branch” button if the native button doesn’t exist, dynamically, without events! We append the link and just use body:has(native button) .our-button {hide} 🤯

I swear this selector is a game changer for extensions. The only thing it can’t do is alert us of such events (maybe 😏 via empty animationend on these elements + JS listener)

Issue Analytics

State:
Created a year ago
Reactions:1
Comments:9 (8 by maintainers)

Top GitHub Comments

1reaction

fregantecommented, Dec 22, 2022

Unfortunately not. GitHub has also been making changes to their DOM making it increasingly difficult to target elements reliably, which means I have no choice but use has()

1reaction

pradyunsgcommented, Dec 21, 2022

Hmm… Firefox doesn’t seem to have moved any closer on this in the last 6 months; based on the activity on the tracking issue and hide-own-stars’ fix is not compatible with Firefox’s experiemental implementation.

Is there a suggested workaround for Firefox users, since currently, we’re getting a degraded experience (even after enabling the experimental flag)?

Top Results From Across the Web

The advanced guide to the CSS :has() selector - LogRocket Blog

The :has() selector is one such feature. It works on the parent rather than children, and uses a comma-separated list of selectors as...

has() - CSS: Cascading Style Sheets - MDN Web Docs

The :has() relational selector can be used to check if one of the multiple features is true or if all the features are...

:has() CSS relational pseudo-class | Can I use ... - CanIUse

:has() CSS relational pseudo-class Select elements containing specific content. For example, a:has(img) selects all <a> elements that contain an <img> child.

Using :has() as a CSS Parent Selector and much more - WebKit

The basics of how to use :has() as a parent selector ... It can be incredibly useful anytime you want to use a...

has()? New CSS selectors that make your life easier - Polypane

By using :has() in different parts of your selector you can not just select elements based on their descendants, but also select elements...