:has() opens up new possibilities with CSS

Рет қаралды 283,770

Күн бұрын

The :has() pseudo-class is here, and while it’s often called the parent selector, it can actually do a lot more than that!
🔗 Links
✅ Example One: codepen.io/kevinpowell/pen/jO...
✅ Example Two: codepen.io/kevinpowell/pen/dy...
✅ Example Three: codepen.io/kevinpowell/pen/ZE...
✅ Example Four: codepen.io/kevinpowell/pen/Po...
✅ Browser support: caniuse.com/?search=%3Ahas()
✅ scale, rotate, and translate properties: • A new way to do CSS tr...
✅ Jhey’s fantastic article with more examples: developer.chrome.com/blog/has...
✅ Multiple h1 not supported: html5doctor.com/computer-says...
✅ My video on selectors and combinators: • Step up your CSS game ...
⌚ Timestamps
00:00 - Introduction
00:42 - The basics
04:28 - Browser support
04:58 - Some more practical examples
06:36 - Selecting a element if it has a specific sibling
08:15 - Using it as a preceding sibling selector
11:33 - Selecting all the other siblings
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZfaq channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Пікірлер: 478

@kjul. Жыл бұрын

The last example was absolutely mind-blowing. I used to implement something like this with JavaScript or external CSS libraries, now all it takes is a few lines of pure CSS. Wow!

@ryujiishii3147 Жыл бұрын

the image-gallery:hover img:not(:hover) selector also works

@FROZeN_FoCUS Жыл бұрын

@@ryujiishii3147 this is only true if the container is filled with the images. If there were actual gaps within the images, then I think your selector would apply the scale even if no image is actually being hovered, whereas this one doesn't. At the same time, your selector is much easier to read, so in this use case it would be better just for that.

@BigYellowKoala Жыл бұрын

@@FROZeN_FoCUS you could avoid this by adding pointer-events: none to the list and pointer-events: all to the images. That way the gaps aren’t recognized by the cursor, the but the siblings still react as you hover on a single img.

@D7460N Жыл бұрын

Wow! The potential... Layouts themselves can be "aware" of and react to what's inside it. app-panel {display: none;} app-panel:has(span.dynamic-content) {display: grid;} Or maybe... app-panel {display: grid;} app-panel:has(span.dynamic-content:empty) {display: none;}

@windmaomao Жыл бұрын

I think the reason why it's possible now is that, a) additional if statement to select based on another set of selectors; b) allow you to operate right away on the found element, ex. parent . I have a guts feeling, from now on, we will be able to do anything with CSS.

@zachjensz Жыл бұрын

Looks like CSS is better than the real world, parents can start listening to their children

@gregtasi Жыл бұрын

Ohhh

@Rust_Rust_Rust Жыл бұрын

@UCXmwDBryIZrXGeo8_ygETkA As a child 🅵🆄🅲🅺 🆈🅾🆄

@kalechips22 Жыл бұрын

I- ok

@KangJangkrik Жыл бұрын

Oh no I choked hot coffee again

@saiyandeveloper4319 Жыл бұрын

Can't stop my laughing 😂

@soviut303 Жыл бұрын

For anyone wondering why a parent selector like ".child -> .parent" wasn't considered possible. It has to do with the fact that CSS cascades down the hierarchy, never up. Going up the hierarchy would mean you could create infinite loops where a child selects its parent which subsequently selects all its children infinitely; a CSS bomb. Even with safeguards, the selector performance could be easily crippled. The :has selector doesn't break this downward cascade. Instead it just targets an element further up the chain to apply styles, rather than the end of the chain. This makes it predictable, easier to optimize and isn't vulnerable.

@calyodelphi124 Жыл бұрын

That actually makes sense

@jonathoneng4552 Жыл бұрын

I’m living in Japan right now and I’ve been motivated to make better Japanese websites because of how bad websites tend to be here. I started learning web development roughly a month ago, so I’m really happy to have found this channel to actually learn css.

@PandaLaVeraa Жыл бұрын

Same, here in Korea, the websites are stuck in 2005 and IE.

@viniciuschinen1689 Жыл бұрын

Me too live in Japan as well。

@aidanzipzap Жыл бұрын

Now, that's a reason to make websites that I've never seen.

@dankierson Жыл бұрын

Jonathon, why are sites so plain in Japan? The Tokyo Stock Market site is awful. At least the English language version of it 😁. Maybe languages written horizontally is hard for orientals. But surely good layout is "acultural" ?

@jonathoneng4552 Жыл бұрын

@@dankierson from what I can tell, the Japanese devs tend throw as much information as possible to lessen navigation on the user’s end. The issue is that they tend to not care about the user experience. What boggles my mind is how tech savvy one might think Japan is, but in reality most people here just care about the end result as opposed to how to get there. As for the written direction I can attest that for the most part horizontally vs vertically has no impact on things. At least in terms of HTML. Most texts, in general, are actually written in either Left to Right or Top to Bottom, depending on the medium. But what might be a factor is that the Japanese input method allows for different types of displayed Roman characters. For example: English vs.ｅｎｇｌｉｓｈ vs. ＥＮＧＬＩＳＨ. The latter two are usually used for specific documents and are often used for names. The problem I see is that instead of writing things in the regular characters we’re used to, they opt for the characters with those spacings, and mess up the design of their websites. Sorry for the long reply btw

@Juliozz3 Жыл бұрын

It's amazing how modern CSS enables us to do awesome things with so few lines of code. :has is really a game changer!

@michaelgleason4791 Жыл бұрын

I've never been a css guys. It was just a thing I had to use for certain effects in my react apps, and nothing more. I found your channel yesterday and my mind is blown.

@stevieholland3579 Жыл бұрын

Right? He give me a live for CSS I never thought I'd have. I would love to be as good at it as Kevin is. Must be fun at that point

@timdmackey Жыл бұрын

The :has selector is sooo powerful-as you’ve shown, calling it the “parent selector” really doesn’t do it justice! What it really is, is an “ extended family selector”, or simply a “family selector”. So glad to see it finally released!

@Morrile1 Жыл бұрын

This is fantastic as we can now control the various item within a webpage with much better control, and the downside is waiting for full browser support, yet we can play today.

@MixbOOsted Жыл бұрын

How u r here 1d ago 😶

@lookupverazhou8599 Жыл бұрын

@@MixbOOsted Lol.

@Morrile1 Жыл бұрын

@@MixbOOsted Assuming from your comments you mean "How can I post before the video is released?" It's one of the advantages of supporting Kevin on Patreon 🙂

@thkorkem Жыл бұрын

The last one is amazing, man! Thanks a lot for sharing these details with us.

@henrikrosendalvonessen9344 Жыл бұрын

A pretty cool thing you can do as well, is to target elements based on the amount of content within it using nth selectors, like "div:has(a:nth-of-type(5))" and so on.

@KevinPowell Жыл бұрын

Yeah, I've been playing with that, and with ranges of content, it's really cool!

@ruleaus7664 Жыл бұрын

I'm new to CSS, so this is currently too advanced for me. But is it true that more and more specific selectors have to be used as a website gets larger and more complex?

@itsPenguinBoy Жыл бұрын

@@ruleaus7664 nope! You can build something relatively large with basic selectors! However when you do that for long enough you find yourself thinking "is there a way to do X" in CSS or you find yourself wishing you had one more complicated rule instead of 10 simple ones... Then it becomes exciting to use more complicated CSS because of how powerful and efficient it is.

@MichaelBrown-vq4fd Жыл бұрын

@@ruleaus7664 just my thought, but not necessarily. When you become more familiar with CSS and write more code you will start to identify both the challenges and appropriate moments where tightly coupled highly descriptive selectors are advantageous, and when they simply overly complicate your code making future changes / growth difficult. This was one of the hardest things for me to learn personally.

@jugibur2117 Жыл бұрын

Wow, a dream come true! Thank you for your extraordinary examples, I would not have suspected these possibilities at first glance.

@tonimaunde Жыл бұрын

This is going to be clutch for form styling. Thank you, Kevin.

@danieljohnson5595 Жыл бұрын

Oh man I've been waiting for this! Best CSS channel on YT, thanks Kevin!

@felixadam1126 Жыл бұрын

Excellent video - Thats NextLevel CSS! Thanks a lot for sharing Kevin.

@SamCrowetheCreativeCrowe Жыл бұрын

Keep at it. I am getting better with each video I watch from Kevin Powell! Long live Kevin!

@BobbyCharlz Жыл бұрын

Thank you so much for this awesome and inspiring work. It’s got me fired up about CSS again!!!

@britti73 Жыл бұрын

Awesome! Can’t wait to use this in production!

@huseyinlora Жыл бұрын

Thanks to your videos, my motivation and recognition of being web developer has changed a lot. You inspire me. Thanks from Turkey.

@achtube85 Жыл бұрын

This looks like magic. I am blown away by how intuitive this feels.

@sergei_sg Жыл бұрын

Wow! It's an effective and incredible way to change styles. I didn't know about it! Thank you!

@NeilMoore 11 ай бұрын

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! 🙂👍

@CyberTechBits Жыл бұрын

That last demo with the images was totally awesome!

@stevieholland3579 Жыл бұрын

Man, you have helped me find the cool side of css. It's like you have the full specs memorized or something. I wish I had the command of css you do. I think the minor frustrations I have are just lack of understanding and you are quickly changing that. Thanks for what you do man.

@KevinPowell Жыл бұрын

It does help that before making a video, specially on a topic I'm not super familiar with (like this one), that I can spend a day or two playing around and making/breaking things and reading through the spec. Makes me look like I know a lot more than I really do 😅

@stevieholland3579 Жыл бұрын

@@KevinPowell 🤣 yeah, that does help. Don't sell yourself short though, you crush it dude.

@melomane01 Жыл бұрын

Very interesting video, thank you. I designed and built a website using CSS in 2004. I haven’t done any web design since. I’m now tackling a small personal web design project and I’m working on updating my CSS and HTML5 skills. It’s amazing to see CSS evolution in 18 years!

@treebeard2416 Жыл бұрын

Actually read a blog on webkit website by Jen Simmons about the :has pseudo-class and now having your video helps in both visualizing and retaining its implementation. Thank you so much Kevin!

@chemedev Жыл бұрын

Last example is impressive, what a creative mind you have!

@wdsenjoyer9960 Жыл бұрын

Last example was mind-blowing!

@ReddishReddish Жыл бұрын

Holy moly that last example was totally mind blowing! 🤯

@TheMetalMag Жыл бұрын

So many great things with css! Thank you

@maheshcharyindrakanti8544 Жыл бұрын

This worked incredibly well! I can finally play it thanks

@952a259 9 ай бұрын

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

@AbhinavKulshreshtha Жыл бұрын

The image gallery effect, I remember using 10-15 lines of jQuery, and a lot more in vanilla js, to implement that. Can't wait to use :has selector as soon as it is implemented in firefox.

@mvip4927 Жыл бұрын

Still working as of today! Thank you!

@rproctor83 Жыл бұрын

Very interesting, this will make a lot of things much easier and alleviate the need for JS in a lot of ways. Can't wait!

@haruruben Жыл бұрын

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

@avi7278 Жыл бұрын

I think this is the first ever video about CSS that I've watched with interest 😆

@stevenirby5576 Жыл бұрын

I've written CSS since the 2000s and I have ALWAYS wanted this!!! So pumped for this.

@chimadivine7715 Жыл бұрын

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

@sovereignlivingsoul Жыл бұрын

excellent timing on this video Kevin, thank you, i am designing a new website where using has() will come in very handy with selecting components with similar styling.

@fathercashew Жыл бұрын

Well you earned yourself a subscriber. This was great info and really well presented. Thank you.

@m12652 Жыл бұрын

Excellent as usual thank you…. And ps…. An example that describes something in a perfectly understandable way is never useless :)

@lfernandorg Жыл бұрын

So interesting, I didn't think of that, thanks for sharing!

@victorvanrijn Жыл бұрын

Great content and good examples Kevin, thanks!

@shahfaisal3923 Жыл бұрын

Really more than awesome. Thanks Kevin for this amazing tutorial. Love from Afghanistan.

@clethcriss6258 Жыл бұрын

When you were adding background/colors to the divs, I was thinking about rebeccapurple... then you used it.

@codehal Жыл бұрын

Great Videos, Thanks❤

@binaykumarsahu6657 Жыл бұрын

I have been waiting for this 😍😍😍 Amazing...

@trappedcat3615 Жыл бұрын

CSS is now officially a programming language

@tom7050 Жыл бұрын

it is , since --var .

@trappedcat3615 Жыл бұрын

@@tom7050 can't control procedures with var

@dbweb.creative Жыл бұрын

Can now do things like this with select tag: #container:has(select > option[value="option1"]:checked) #target { /* do something */ } Basically styling some other element based on selected option.

@vasyaqwe2087 Жыл бұрын

Thanks for this video Kevin, this is amazing!

@robynbieber6312 Жыл бұрын

I am so excited for this!!!

@agentbey Жыл бұрын

This is next level. Very impressive exploration.

@cbhlde Жыл бұрын

That's great! Thanks for the info! :)

@loupthevenin8176 Жыл бұрын

Man, that last example did in 5 minutes what I struggled to do in a week using javascript (which I had no experience with at the time) 😅 Such an amazing improvement for CSS-only interactive projects !

@givenlyngkhoi107 Жыл бұрын

Hey! Thanks so much for this video!

@wendanny6732 Жыл бұрын

Thank you Kevin this is really helpful and interesting to play around

@qoo25244547 Жыл бұрын

Thanks for sharing. It's really amazing!

@GeekIWG Жыл бұрын

YES! I've wanted this feature in CSS for sooo long!

@GeekIWG Жыл бұрын

The reply above is a scammer. Please don't contact him. Report it as spam.

@fredhair Жыл бұрын

I think that not has makes more sense than has not. In most modern programming languages the logical or binary negation is placed directly before the expression so it makes sense to me that this does it in the same way. Awesome video though, I can't wait to start using this and to see what people are going to do with it!!

@fiveeyes2802 Жыл бұрын

Bravo! This was awesome!

@jenstornell Жыл бұрын

I actually used this video as inspiration in one of my projects. I'll try to explain what I did. I used :has to select all the elements with a class name of the same name as the element that I'm hovering. I don't think it could be done without it because sibling selectors can't walk up the tree. It's a bit similar to your gallery but in reverse. I used it to highlight texts of the same type in order to change them at the same time (with js). The more you can do without JS the better and in this case CSS takes a bit of the JS part which is nice. :has is awesome.

@neoqueto Жыл бұрын

:has with :hover or :active or whatever gives you SUPERPOWERS.

@RandolfRichardson Жыл бұрын

Thanks! This is a very useful feature.

@ErzengelDesLichtes Жыл бұрын

I wish I had this a decade ago when I was making webpages for a living. I know there’s a few places it would have been useful. I had to work around it by having the ASP put classes on the parents based on the children. This of course meant I had to preprocess the children. Letting the CSS handle it (where the HTML has already been built!) would be so nice.

@wfl-junior Жыл бұрын

I was wondering why that image border example, but then what came next was mind blowing.

@lorenzo3131 Жыл бұрын

30 seconds into the video, I paused it and head straight to the caniuse website. Still not fully supported, but this will definitely change how we do CSS!

@davidgwyer5169 Жыл бұрын

Really nice examples of using :has. Thank you for the walkthrough. I played around with example three and you can also do away with the :not selector (maybe a little cleaner?): .article__title { color: hsl(250 75% 80%); margin: 0; margin-block-end: 5rem; } .article__subtitle { margin: 0; font-size: 1.75rem; font-weight: 600; margin-block-end: 5rem; } .article__title:has(+ .article__subtitle) { color: lime; margin-block-end: 0rem; }

@webstarigt8940 Жыл бұрын

Love everything. Keep it buddy!

@dave6012 Жыл бұрын

That image gallery was nice 👌

@StrikerFeed Жыл бұрын

I'm so excited! I already see at least one cool use case of :has - much more convenient custom checkboxes or radios. For now you can implement them by placing label after input, defining ids, and in css use "input:checked + label" selector. With :has you can implement that by placing input inside a label so it doesn't need to have an id! In conclusion, applying styles to the element's parent by triggering element itself - game changer, and finally it's here.

@shaderone07 Жыл бұрын

Super cool..especially the last one 😀

@alancordwell9759 Жыл бұрын

Hi Kevin, new subscriber here. What an awesome channel, as a professional web app developer this is an absolute must! Great information very well presented, thanks.

@TheRalic Жыл бұрын

First time watching your vides and instant subscribe 😊 great video!

@KevinPowell Жыл бұрын

Welcome aboard!

@joshreynolds4164 Жыл бұрын

God this was a brilliant video. Mind blown at that last example

@thomasj4370 Жыл бұрын

Thanks! This has( ) helped me.

@smohammadhn Жыл бұрын

Last one was out of this world 👌

@MrMelquize Жыл бұрын

Amazing work, thank you

@willofirony Жыл бұрын

Isn't this a great channel? [if you're stuck on that one: the answer is yes indeed.] You do have the gift of making CSS seem exciting. Thank you Kevin.

@LokiDaFerret Жыл бұрын

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

@blueeulb Жыл бұрын

Needed the parent selector with adjacent sibling in recent project, now we're talking!

@slalomsteve Жыл бұрын

Great video. And thank for not editing it like crazy with jump cuts. I'd much rather have a natural presentation with the occasional human error.

@nigh_anxiety Жыл бұрын

Great video, thanks. I'm not seeing the video about combinators linked in the description as mentioned at 8:05. I found your previous videos on combinators from 2018; is there a more recent one?

@spencerkeene Жыл бұрын

The :not:has combination doesn’t really bother me. I read it as “does not have” and :has:not I read as “has something that is not”. That makes it clear to me what it actually selects.

@KevinPowell Жыл бұрын

I always do it backward the first time, lol. I'm sure I'll get used to it though.

@leisti Жыл бұрын

:not(:has(:has-not))

@benvindadossantos2092 5 ай бұрын

This is super, thank you

@jez9999 Жыл бұрын

I noticed this just a few weeks before Chrome enabled it in mainline. Been wanting something like it for years. Probably the best CSS pseudo-class ever.

@nateb1804 Жыл бұрын

I'm glad I found your channel. You're doing a great job showcasing CSS features!

@windmaomao Жыл бұрын

I was going to say I need `:hasParent`. But then i realized this is exactly what I want, except this is going from the other direction. So from now on, as long as I know there's a type of child within, I could apply different style to the PARENT. This is what we don't have before. THANK YOU.

@underwatersmurf6432 Жыл бұрын

This is mind blowing! Lots of useful things you also can do like has(input:invalid) to highlight invalid fields, or has(input:checked) to style selected checkboxes.

@dankierson Жыл бұрын

Some years agoI did the last trick without :has but I think I had to put the hovered image on a higher z-index to the others lest the grid be messed up. :has(..) is cool and maybe one of several possible compiled functions you could get from CSS.

@Daidera91 Жыл бұрын

Kevin you make really amazing content!

@legitjimmyjaylight8409 Жыл бұрын

Never thought you could horizontally and vertically center a div using a solution that always works.

@alanbloom20 Жыл бұрын

Never occurred to me about :has(+ adjacent) - that is really cool and really useful

@GhosT-oz6bb Жыл бұрын

this fixed my problem where i want to change the style of other .image-grid-photos only when I hovered one .image-grid-photos

@DanielEliot89 Жыл бұрын

What a time to be alive🎉 Finally!

@xbsidesx Жыл бұрын

What a fun video. Thanks for sharing it. As a little side note you have a mistake in edit around 8:51 until 9:05 or something, that you repeat the content. It happened before in the video, but I'm sure you seen it. I certainly don't mind them but I thought you might.

@jacekmaka403 Жыл бұрын

Thank you so much! !!

@GilGoldshlager Жыл бұрын

WOW! wonderful! 🙌👏

@testman9541 Жыл бұрын

This is very nice. Thanks for this video. I would like to have a .xpath() so much, so that when we are stuck we have a way out other than ask the people to alter their code and polute the data with more class that might not be required in the future anymore...