Mastering :has() to Expand Your CSS Skills

The :has() pseudo-class is a game-changer, and in this video I look at some of the different things that it makes possible, from theming to counting children and more!
🔗 Links
✅ Code from this video: codepen.io/kevinpowell/pen/Jj...
✅ Introduction to :has(): • :has() opens up new po...
✅ More in-depth on forms with has: • How is this possible w...
⌚ Timestamps
00:00 - Introduction
01:03 - Easier theming
03:34 - Prevent scrolling when modal is open
05:02 - Form hints
07:38 - Counting child elements
11:42 - If / Else… sort of
#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 KZbin 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!

[@zachjensz]

CSS Working Group: How many pseudo selectors do you want? Modern CSS: Yes

[@DarkblooM_IO]

I love how CSS is evolving and the path it's taking. It's even better to work with the more time passes by.

[@tworsfeline2302]

How to easily do dark mode & light mode (the website detects the color-scheme of the person's computer) /* @media(prefers-color-scheme: dark){ Replace this sentence with code. } */

[@LivingRegiment]

Yesterday, I implemented a CSS color variable that is set by JavaScript for each card that loads on the page. My team thought it was cool and didn't know that was possible. I got to give credit to Kevin's channel for most of what I know about CSS nowadays. I'm already spreading the word about the :has() selector, which we plan to use in future projects once browsers make this the norm.

[@LePhenixGD]

Holy! Amazing video! The fact that you can use the :has pseudo-selector to create a toggle switch for themes WITHOUT using JavaScript is mind-boggling!

[@erics2133]

I love it when something like this takes features that I know and combine them in ways I normally wouldn't think of. the :nth-child:last-child combination was one of those things that now that I'm aware of it, a lot of things are suddenly possible or at least more feasible/less work.

[@rikabel8301]

Great stuff, brilliantly presented! I've been binge watching your videos prior to our next project kicking off, and definitely have some practical applications of many of these techniques :)

[@oniricPrj]

finally! This is great. Thanks! Man I remember back in the 90's...CSS has come a long way really!

[@ScriptRaccoon]

I love all these use cases for :has! In my opinion, this selector makes it more obvious that CSS actually *is* a programming language. I also discovered all these interactive CSS-only games lately, and some of them can be simplified or even enhanced now with :has.

[@Heafsickle]

Thank you for these videos Kevin! You have inspired me to code, especially css.

[@kevinchase127]

Value packed vid as always. I swear it was only a month ago I subbed to your channel and you were at mid 500k subs and now over 620k. Goes to show much value you offer.

[@brentwgraham]

This is fantastic! I'm loving your channel.

[@JacobDuenke]

Really awesome video Kevin! Best CSS video I've seen in a while!

[@codehal]

Nice Sir...❤

[@berkeylmaz4488]

I just started learning web development a few months ago, and your videos helping me greatly! Thank you very much sir!

[@avneet12284]

This was insanely good, Kevin. I am just dumbfounded.

[@jugibur2117]

Incredible stuff, one of the most powerful selectors of the last years, thanks for sharing!

[@simionandrei5409]

Everytime when I get stuck with CSS, definitely Kevin comes to the rescue! I do really appreciate every single video of yours! Thank you!

[@MoryBuxner]

The reason to use the "full width for last grid item" rule would be this, I think: .two-column-grid:not(:has(.item:nth-child(2n):is(:last-child))) .item:last-child If you've got an odd number of elements, take the full width with the bottom one. Flexbox is correct for some situations but not others. This gives the flexibility to use grid where previously flexbox was the only option.

[@StevenDavisPhoto]

Thanks for this video. Pretty cool. Showing my team. Never heard anyone pronounce "javascript" the way you do, but I like it ;)

[@tobiasfedder1390]

:has() and 🤯 As always: great video. Thank you Kevin.

[@doum5792]

I would love to hear your opinion on the direction web devs are taking with utility-oriented frameworks like tailwind where we end up writing little to no CSS in our projects. And also address what limitations that brings if any. Thanks!

[@kamilcopur6513]

Great content Kevin. Thank you...

[@user-fw2iv3vt6k]

instead of add padding to body when you add overflow, you can reserve size of scrollbar by scrollbar-gutter: stable; because browser has different width of scrollbar

[@Pudelwerfer]

Thank you Dimitri, didn't know that rule till now.

[@ahmadmoner]

my mind have been blown, thank you

[@user-fw2iv3vt6k]

you can also disable scrolling under dialog by overscroll-behavior: contain;

[@aseangardenchannel4244]

Thank you Sir

[@tashishsoni9011]

Great video ✌️

[@JlHAD]

for the carousel you can just use overflow-x: auto and it will do exactly that when there is no overflowing

[@Miki-er7pd]

ITS REALLY WORKED LOL THANK YOU DUDE

[@khalidsaifullahfuad]

Another greate tutorial from CSS Guru

[@japsgame5727]

thanks so much man

[@thebyzocker]

this is amazing

[@T25de]

Kevin is the senior dev you want but don’t deserve 😊

[@k1mpman]

Css makes me extraordinarily excited but I rarely get to use it because I spend so much time getting the logics of my projects working rather than the design. Feels like lately css has gotten so much love I can't wait to use all these new stuff

[@GilGoldshlager]

Looks like :has() is too good to be true 👏🙌

[@thewayis_meh987]

Just to help people in future you can use > between ( and :nth-child and that will select direct children as grand-children are still counted towards the count otherwise. Also currently using @supports selector(:has(a, b)) until FF releases from behind flag. Just tested that can use that with a placeholder variable to tell if browser supports features like has to pass for JS to latch on to

[@andreaskarz]

Wow, amazing

[@user-fw2iv3vt6k]

good tips thank you

[@cloudsystem3740]

mate when I see your videos thinking if i have to focus enough with JavaScript while CSS is so awesome!

[@ChibiBlasphem]

JS has so much more usages than just doing styles things. What CSS do now is letting CSS manage more and more of the style of the page and let JS do its thing of managing behaviour :)

[@jacoblockwood4034]

I haven't watched the video yet but something I thought of was having dark mode with :root:has(input#theme-toggle:checked)

[@brucebannon949]

In the .theme select, on hover, it would be nice to pop up a small page as an example.

[@AJman14]

An easy way to remember the order of :not and :has is "element does :not :have"

[@funlandhq]

Hi Kevin, Thanks for sharing cool and amazing stuff. Kevin kindly make a video by using flexbox. First column for image and second column for two paragraph on desktop. For tablet the image will remain in first column and the first paragraph will remain in second column. But the second paragraph move to the next row.

[@vigilantezack]

It would be nice to know what sort of properties these pseudo selectors are looking for. For example for the :modal one, this only works if the JS function is run to open a modal? Or can it apply for other situations? Does it require the use of a element or can we use it just based on classes like hidden check box trick or JS adding a class but not using a modal function? Or take the forms for the :valid one. What determines if it's valid in order for the selector to work? What if you're using JS or Vue or are doing your own custom validations, how do you make the field "become valid" so the selector knows how to work? I suppose I could look these up, but I'm just saying it would be helpful if you also added any caveats like under what conditions these selectors will actually work. Thanks!

[@spicynoodle7419]

Turing-complete CSS would be hell

[@GavHern]

unrecognized use of this is that not everyone has javascript enabled in their browser and if your site is pretty basic, it is nice to be able to be compatible with those users. also, the scrollbar doesn't have width on most mobile browsers as well as chromeos and mac i believe, so usually the best way to account for it with padding would be to have javascript check the difference between an element with scrolling on and off and then set a custom property to that many pixels. or just use a scrollbar gutter...

[@sujanbasnet7868]

Very cool

[@teemos2732]

Thanks Kevin - loved this. Which IDE do you use in most of your videos? Seems to update the page as soon as you edit the code. Or are you manually refreshing?

[@KevinPowell]

I use VS Code, but I'm often using Vite, which updates on save. In older videos I used the Live Server extension for VS code quite a lot too

[@teemos2732]

@@KevinPowell Thanks!

[@metalstarver642]

You can highlight table columns on hover with CSS only now using :nth-child and :has. However only for fixed amount of columns.

[@erlenbg]

Loved this video! Thanks, Kevin! When I use :root:has(.theme-toggle:checked) in FireFox, it works, but only after I click the browser background. Almost like it's only evaluating the :has AFTER the checkbox loses focus. Has anyone else experienced this?

[@arditrondigitalsolutions2552]

Thanks a lot Kevin. Love your videos. Can you do a tutorial or a video on email templates? There are a lot of issues when we send email with html templates and most of them only work with old standards. Most of the modern css features don’t work. If you can do a small research and provide your expert opinion on how to approach this problem, it will be very helpful. Thank you! Take care. ❤

[@fmaximus]

For spanning the last element in the 5n case, you would want to have it not only applied for 5, but for all odd multiples of 5.

[@adennis200]

I will use that knowledge and try to identify our companys code to find potential refactoring use cases to replace them with :has. Guess that will bring me some props as a junior

[@kevinrutledge9602]

I like the first five check but instead of expanding the last to full width, expand the first.

[@DavidOtto82]

Interesting! Didnt think about using "has" that way yet. But how does it behave with first print? Shouldnt it block the meaningful first print in opposition to deferred js?

[@wlockuz4467]

CSS syntax starting to look more and more like a functional programming language syntax.

[@shayanzamani9907]

6:30 Could we also use a :empty for the inputs and have the same functionality?

[@michalnowak2181]

thx

[@truvc]

You could also set the field to required so it doesn’t appear valid when empty.

[@jtsimoes]

This ^

[@aram5642]

:has has a great potential. For creating hard-to-find bugs as well. In a componentized world though (and esp. when using shadow dom) this might not be that bad.

[@digigoliath]

Awesome, especially with less JS.

[@reaperbhai5028]

Ia there any course for this type of modern css? Just to learn and how to implement it properly?

[@yoannyoyo1246]

I don't understand why you used the padding-inline-end property, as I thought it was for cases when writing mode was changed. Or is it because you always style with writing mode in mind by default?

[@MoryBuxner]

Putting padding to correct for a missing scrollbar is problematic, because different browsers and operating systems use different scrollbar sizes, or even no scrollbars at all. I am not aware of a CSS-only solution that corrects for this, but with JavaScript you can subtract the document width from the client width to get the actual browser-specific scrollbar width: const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth + 'px'; If you then set that variable as a custom property, you can use it in the CSS instead of a specific number that for most users will not be accurate.

[@zer001]

Danke!

[@KevinPowell]

Thank you so much (and sorry for missing this until now!)

[@zer001]

@@KevinPowell No Problem. i love your Videos so much. And as a beginner i have learned so much from you.

[@tunguyenanh4981]

try has with some check child visible quite handy in my case

[@dave6012]

I would love a deep dive on the n selector. It’s always been a bit of a black box for me. Can’t think of anyone else I’d want explaining it to me!

[@Sampad-Sarker]

is it acts as "if condition" in css?

[@nomad100hd]

On Mac OS if you compensate for the scrollbar you get a shift and if you don't there is no shift. Always found it odd Windows still has the big ugly scroll bars by default.

[@digeshbajracharya3225]

CSS variables with container queries seems to be not working.

[@mhcbon4606]

its pretty cool to see html+css still being a thing. JS is good, but it is better w/t.

[@D7460N]

:has() counts children elements that are display: none;. How to hide children elements (columns in this case) so that :has() does not count them?

[@iamTazim9]

Css is awesome ♥️😍

[@adetunjitaiwo1113]

Heyy Kelvin love what you do 😌.. I just started my journey in web dev and i hv covered all the basics but my CSS skills is still lacking I know all the properties but the combination and using them for project throws me off 😮‍💨.. I need guidance 🙏🤞

[@n_mckean]

When working with features that aren't universal across browsers, it would be very useful if you could refer to tips on fallbacks. It's great being on the cutting edge, but degradation is key.

[@ChibiBlasphem]

For these types of features which let you do something that was impossible with just CSS, there's no css fallback, doing it in js like you did before. And :has is almost here everywhere (within the end of the year on every browser)

[@Morrile1]

All very interesting yet Easier theming has me thinking if it's possible to set colours for colour blind visitors, so all visitors can set their preferred choice; however, could be extremely complex to manage perhaps? It would mean 10 options in total, including a default colour scheme.

[@KevinPowell]

A single high-contrast color scheme would probably be enough, instead of trying to solve for all possible situations :)

[@Morrile1]

@@KevinPowell it could be and perhaps the way forward now. I don't see many website actually offering the various colour options as before. The BBC news did have 4 options for those that had visual problems with Red, Green, Yellow and Blue and since been removed on their site. So we can reduce it to three, default colour scheme, light and dark modes. Makes like a bit easier...

[@Xamy-]

@@Morrile1 would be four in total: default (though this might just be light in some places), light, dark, high contrast. Unless you know you have a lot of colour blind users that is

[@Morrile1]

@@Xamy- You have improved on Kevin's suggestion and I like it. I used an Apple app called "Sim Daltonism" for those people with various visual impairments, and they have eight variations, although one of the eight would serve for Dark mode. From the feedback I have been over-thinking all this and :has() could cover all bases without getting over complicated. Many thanks to you all for constructive feedback, very much appreaciated 😁

[@deatho0ne587]

That if else thing was nice with has(), but it does seem to have some nice functionality. This has nothing to do with :has(). Been awhile since I have written padding-right after doing an overflow: hidden;, but different browsers back then had different padding needed for scroll bar. Chrome and Firefox I believe were 16px, while Opera and Safari (which I could not test locally) had something else.

[@archrodney]

Why would you use "padding-inline-end" instead of "padding-right"?

[@Wolfeur]

Wouldn't `:nth-child(…):last-child` suffice, without the `:is()`?

[@masterkhoa]

:has() seems to have horrible browser support tho? I don't think we will be using it anywhere soon

[@ari_archer]

0:03 .clearfix::after { content: ""; clear: both; display: table; }

[@Tikayy]

Does :has work for firefox yet? :|

[@fr33stoneser2]

Sir how to Free html and CSS Web hosting on Android is that possible hope you see me

[@maciej12345678]

its dont work in FireFoxx hmm ;/

[@QwDragon]

8:22 Why :nth-child(2):is(:last-child) and not :nth-child(2):last-child ? 10:53 Seems like it should be :nth-child(10n - 5):last-child - it should work with 5, 15, 25 and so on.

[@dasten123]

:has is awesome and all, but as long as Firefox doesn't support it, it's useless

[@john_wick_v2gamer361]

4th

[@mistervallus185]

This is cool but I feel like this should be left to javascript. CSS should be for visual content only not logicalal things.