:has() opens up new possibilities with CSS

Falling back in love with CSS after many years. Now just have to figure out how how to use these safely inside react components with a team that loves Tailwind.

ola

This is probably the biggest addition to CSS this decade.

This stuff is unreal.

hi! i am trying to use "has" as showed in gallery example where not hovered elements are in lover opacity.

love your content , i used to hate css... now its ok 😛

Thank you!

Only seems to work in Firefox if you add "+" sign ie. p:has(.lead) {font-size: 2rem;} doesn't work... p:has(+ .lead) {font-size: 2rem;} does work.

좋아요 ㅎㅎㅎ 잘 가르쳐주셔서 감사하네용

This is super, thank you

:has is great and I look forward to more browser support, but you can do that img gallery effect without it, like this (except I'd nest things with scss):
.image-gallery:hover img{
scale: 0.8;
opacity: 0.7;
}
.image-gallery:hover img:hover{
scale: 1;
opacity: 1;
}

Doesn’t work for me in Firefox yet!

For what it's worth, Firefox is going to ship :has() in version 121, which will be released on December, 19th. So then all major browsers will finally support it!

I can’t believe Firefox hasn’t embraced it yet!

colon has openbrackets

Hello i am trying to implement this :has selector for li::marker but it didn't work with firefox browser only with chrome and edge , is it because of the support ?

This video helps me a lot! Kevin, thank you very much! 👍

10 months later and still not supported in Firefox without a feature flag? So it's not supported because no one is going to enable that except people like us.

We today, create a new CSS selector, his name :f***ing mozilla

the image hovering animations at the end of the video really demonstrated the power of this new parent selector feature. 😲I could've used this 10 years ago. I really enjoy your videos. Fantastic job demonstrating the usefuleness of this! 🙂👍

Will it work with firefox ?

How can I use :has in Firefox please tell

And then there is firefox ...

.article_title:not(:has(+.article_subtitle)) can be also written as
.article_title:has(+:not(.article_subtitle))

Really like it but I won’t use for now, gonna wait until we get more browser support 😥

has() does not work for me in safari and firefox... chrome and edge it is working... can you confirm

I'm trying to implement as a grandparent selector. A video on that would be very handy.

Div:has(>a){
Bg:red}

Brilliant!

not having to abuse label for check-boxes is nice

That gallery effect is gorgeous, and I'm so glad to not need JS or super complex CSS for it.

Now I no longer have to beg the people making the HTML I am sometimes saddled with to give all child elements parent classes just so I can style off of them. Woohoo! Now any formfield that holds a form element of a certain type can just be targeted based on that specific form element type! I know that sounds very specific, but this removes a significant stress point for front end people working in large systems!

U r the best

i:has(.cheeseburger)

Love your work, Kevin!

Not supported by Firefox

I wonder how many years and hours have you studied to know this much, it's awesome. So secure. All this is self-taught or did you go to any university?

Can anyone say How to enable :has() pseudo-class in Firefox ?

Mind blowing ❤

Global support is only 83%. Still a long way off before this is ready for production.

Why was my comment deleted? When I pointed out that Firefox doesn't support it?

Many times I wished CSS had a parent selector instead of having to do it with JavaScript via the <Element>.parentElement or <Element>.closest(...)
Kevin made me realise that my prayer has been answered.
Your videos are golden.
Much thanks!

No comment on how expensive the command is?

Great looking forward to being able to use this in production 5-10 years from now

Hi Kevin, is there a way to select the parent if it has a given children length?

Thanks!