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 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.
@@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.
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;}
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.
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.
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.
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" ?
@@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
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!
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.
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.
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?
@@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.
@@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.
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 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 🙂
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.
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.
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 😅
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.
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!!
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!
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.
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!
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.
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.
Having "hasNot" would break consistency for :not. Because you have things like ":not(:empty)", but you don't have a ":notEmpty". It makes sense from a coding point of view to keep it consistent. Also, your example for the "we can check if it has a direct sibling"... but there's already a selector pattern for that. It's also surprising how long it's taken for this change to finally be here. Parents able to be styled based on children... finally.
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.
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!
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! 🙂👍
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.
"It couldn't be done" Yes, it was in 2022 that browser developers finally discovered tree traversal from the bottom up. (At least, that's what is likely going on under the hood) (Snideness aside, I'm super excited to use this!)
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.
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.
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.
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 !
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.
Wow! The potential... Layouts themselves can be "aware" of and react to what's inside them. 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;} The moment app-panel span.dynamic-content receives err... dynamic content, the app-panel shows up.
I was interested in more information about your "multiple H1" comment so I looked into the linked article from 2016 and the current version of the specification (which the article linked). It seems like the area the article was linking to was rewritten, because the anchor doesn't exist anymore. The article said it would have a warning against it, but it's quite the opposite. The examples on the specification also show H1's used in sections (for a comments section below an article) and also says the following about headings: "If a document has one or more headings, at least a single heading within the outline should have a heading level of 1."
I'll double check my links. The outline should work that way according to the spec, but no browser ever implemented the outline algorithm so it doesn't work.
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; }
Came here for "Cinematic Studio Strings" secret techniques, got a broken brain because I have no idea what this is but I watched it anyway like a true citizen of the Internet.
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.
The really nutty thing about the :has pseudo selector is that it works on the html element so you can, for example, style an element to see if any script in the head section has the defer attribute as follows: html:has(head script[defer]) .test { put-declarations-here }. Want to style a component if you've got a stylesheet linked?: html:has(link[rel='stylesheet']) .test2 {...}. Crazy!
I have a general hatred of "wrapper" divs, and using javascript for certain things that seem like they are presentation and not behavior. This feature helps avoid that in a lot of situations that you couldn't before.
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?
Wow this brings selectors to a whole new level. But I'm still only scratching the surface of what existing selectors can do. So many selectors, so little time...
Very cool! Unfortunately many of these examples could've been done without :has. Even the last one (but it would require additional div if gap is used).
how would you do that? The closest i can think is with the ~ selector, but that would select all siblings before the img:hover, and not all the siblings. With :has, you can essentially select the parent so that then you can reference all of it's children
@@AfonsoPPereira I think by having the images zoomed out when the container is hovered and then resetting the zoom-out on the hovered image. .gallery:hover img {smaller} .gallery:hover img:hover {restore}
@@Mankepanke you're right! The benfit to the other example is only using one statement instead of two 😛 But the main benefit of :has is really applying style to the parent and not on the child(ren), which before was otherwise impossible
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!
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.
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!
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.
Regarding :not(:has()), you don't want it to "have something that is not" (has-not) you want it "not to have something" (not-has) Edit: I forgot to thank you for a great video!
Kevin, Kevin, Kevin, my dear favorite CSS guru. PLEASE change your video intro to just one or the other, friend OR friends. (I’m in no way an English or grammar specialist.) To me, if I am watching your video, I know that another “friend” is also watching your video, even if it is just you. So that makes two friend(s), or more. 🧐 In my semi-analytical brain, you should just start with “friends”. But hey, what do I know? I’m still trying to practice CSS and remember when to use grid-flex, inline this or inline that, etc. LOVE YOUR VIDEOS THOUGH. Keep up the good work. 😃
Nice. Hopefully all is good, and we will get it in all browsers soon. I use Firefox 102 ESR, and Vivaldi based on Chromium 104, they do not support it yet. Next year things should be good tho.
I have been looking forward to :has(), because I use stylus, and lots of websites just don't declare their elements enough with ID's or classes, or make them unique enough for me to target that parent element, as that is the only thing that makes me able to style that child at all. I can't remember a case, where I really needed :has(), but I do remember an example case, in which I needed to target a div inside an element that adds div elements to it every so often, and has nothing that I can target, one of the children do have an ID, but the element that I want to style is the sister. With :has(), I could just write div:has(#title-47) div#description {} Before that, I think :not() did the same with direct child targeting lead by a sister.
Immaculate presentation and quite useful knowledge! This approach can certainly replace some tricky, stateful JavaScript code, with compact, declarative CSS, though it's still a bit tricky :) Probably ppl should start documenting how groups of CSS rules achieve certain behaviors (in comments or storybooks).
look-ahead selector. It solves so many problems in css. I don't need it often. But when I do, it saves me quite a bit of nasty javascript. I looked at it a few years ago. But there were problems with support at the time. That seems over now. (My target users don't use FireFox.) So...happy slicing!
I waited it since 2013, at some point I was very mad that it was neglected when it was so useful, because I had to use JS for this corner cases. Now it's finally there. While it still in transition process, for some projects it would already be useful.
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?
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!
the image-gallery:hover img:not(:hover) selector also works
@@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.
@@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.
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;}
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.
Looks like CSS is better than the real world, parents can start listening to their children
Ohhh
@UCXmwDBryIZrXGeo8_ygETkA As a child 🅵🆄🅲🅺 🆈🅾🆄
I- ok
Oh no I choked hot coffee again
Can't stop my laughing 😂
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.
That actually makes sense
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.
Same, here in Korea, the websites are stuck in 2005 and IE.
Me too live in Japan as well。
Now, that's a reason to make websites that I've never seen.
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" ?
@@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
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!
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.
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
It's amazing how modern CSS enables us to do awesome things with so few lines of code. :has is really a game changer!
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.
Yeah, I've been playing with that, and with ranges of content, it's really cool!
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?
@@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.
@@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.
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.
How u r here
1d ago 😶
@@MixbOOsted Lol.
@@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 🙂
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.
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.
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 😅
@@KevinPowell 🤣 yeah, that does help. Don't sell yourself short though, you crush it dude.
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.
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!!
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!
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.
:has with :hover or :active or whatever gives you SUPERPOWERS.
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!
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.
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.
Having "hasNot" would break consistency for :not. Because you have things like ":not(:empty)", but you don't have a ":notEmpty". It makes sense from a coding point of view to keep it consistent.
Also, your example for the "we can check if it has a direct sibling"... but there's already a selector pattern for that.
It's also surprising how long it's taken for this change to finally be here. Parents able to be styled based on children... finally.
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.
Honestly, your videos are taking me from "I need to find how to solve this problem" to "f... I want to try this myself. Let me see where I can use it"
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!
This looks like magic. I am blown away by how intuitive this feels.
That gallery effect is gorgeous, and I'm so glad to not need JS or super complex CSS for it.
CSS is now officially a programming language
it is , since --var .
@@tom7050 can't control procedures with var
Excellent video - Thats NextLevel CSS! Thanks a lot for sharing Kevin.
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! 🙂👍
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.
Me who knows nothing about CSS: It's amazing, this changes everything
I think this is the first ever video about CSS that I've watched with interest 😆
"It couldn't be done"
Yes, it was in 2022 that browser developers finally discovered tree traversal from the bottom up. (At least, that's what is likely going on under the hood)
(Snideness aside, I'm super excited to use this!)
I've written CSS since the 2000s and I have ALWAYS wanted this!!! So pumped for this.
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.
I always do it backward the first time, lol. I'm sure I'll get used to it though.
:not(:has(:has-not))
Great looking forward to being able to use this in production 5-10 years from now
Keep at it. I am getting better with each video I watch from Kevin Powell! Long live Kevin!
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.
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.
Thanks to your videos, my motivation and recognition of being web developer has changed a lot. You inspire me. Thanks from Turkey.
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 !
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.
Wow! The potential...
Layouts themselves can be "aware" of and react to what's inside them.
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;}
The moment app-panel span.dynamic-content receives err... dynamic content, the app-panel shows up.
I was interested in more information about your "multiple H1" comment so I looked into the linked article from 2016 and the current version of the specification (which the article linked). It seems like the area the article was linking to was rewritten, because the anchor doesn't exist anymore. The article said it would have a warning against it, but it's quite the opposite.
The examples on the specification also show H1's used in sections (for a comments section below an article) and also says the following about headings: "If a document has one or more headings, at least a single heading within the outline should have a heading level of 1."
I'll double check my links. The outline should work that way according to the spec, but no browser ever implemented the outline algorithm so it doesn't work.
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;
}
Never thought you could horizontally and vertically center a div using a solution that always works.
So many great things with css! Thank you
Came here for "Cinematic Studio Strings" secret techniques, got a broken brain because I have no idea what this is but I watched it anyway like a true citizen of the Internet.
When I've started producing I personally have downloaded most of the plugins from there, never had problems with virus, malwares and
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.
I was wondering why that image border example, but then what came next was mind blowing.
The last one is amazing, man! Thanks a lot for sharing these details with us.
The really nutty thing about the :has pseudo selector is that it works on the html element so you can, for example, style an element to see if any script in the head section has the defer attribute as follows: html:has(head script[defer]) .test { put-declarations-here }. Want to style a component if you've got a stylesheet linked?: html:has(link[rel='stylesheet']) .test2 {...}. Crazy!
Oh man I've been waiting for this! Best CSS channel on YT, thanks Kevin!
I'm trying to implement as a grandparent selector. A video on that would be very handy.
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.
Excellent as usual thank you…. And ps…. An example that describes something in a perfectly understandable way is never useless :)
I have a general hatred of "wrapper" divs, and using javascript for certain things that seem like they are presentation and not behavior. This feature helps avoid that in a lot of situations that you couldn't before.
Holy moly that last example was totally mind blowing! 🤯
Never occurred to me about :has(+ adjacent) - that is really cool and really useful
This is going to be clutch for form styling. Thank you, Kevin.
Seems almost like a conditional (if statement) . What we need now is and/or gates 😄
Let's be real, the real focus of this video is about Kevin using rare CSS connoisseur's colors.
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?
Wow this brings selectors to a whole new level. But I'm still only scratching the surface of what existing selectors can do. So many selectors, so little time...
The first thing I guessed when you made that introduction was "parent selector?" lol
Very cool!
Unfortunately many of these examples could've been done without :has. Even the last one (but it would require additional div if gap is used).
how would you do that? The closest i can think is with the ~ selector, but that would select all siblings before the img:hover, and not all the siblings. With :has, you can essentially select the parent so that then you can reference all of it's children
@@AfonsoPPereira I think by having the images zoomed out when the container is hovered and then resetting the zoom-out on the hovered image.
.gallery:hover img {smaller}
.gallery:hover img:hover {restore}
@@Mankepanke you're right! The benfit to the other example is only using one statement instead of two 😛
But the main benefit of :has is really applying style to the parent and not on the child(ren), which before was otherwise impossible
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!
Last example is impressive, what a creative mind you have!
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.
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!
Good job. It would have been handy if you'd mentioned the lack of browser compatibility in the first minute.
This is probably the biggest addition to CSS this decade.
I am just blown away by how many colors you know.
😂 - gets boring using red, blue, yellow and green all the time, lol
Wow, a dream come true! Thank you for your extraordinary examples, I would not have suspected these possibilities at first glance.
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.
That last demo with the images was totally awesome!
I always knew it existed, but thought it would never be compatible on anything else than safari, thats awesome
Regarding :not(:has()), you don't want it to "have something that is not" (has-not) you want it "not to have something" (not-has)
Edit: I forgot to thank you for a great video!
This video blew my mind 🤯
At this point CSS is almost like a second scripting language.
Kevin, Kevin, Kevin, my dear favorite CSS guru.
PLEASE change your video intro to just one or the other, friend OR friends. (I’m in no way an English or grammar specialist.)
To me, if I am watching your video, I know that another “friend” is also watching your video, even if it is just you. So that makes two friend(s), or more. 🧐
In my semi-analytical brain, you should just start with “friends”.
But hey, what do I know? I’m still trying to practice CSS and remember when to use grid-flex, inline this or inline that, etc.
LOVE YOUR VIDEOS THOUGH. Keep up the good work. 😃
Last one was out of this world 👌
13:12 and onwards is just a pure wizardry, like 5 lines of CSS for THAT
Needed the parent selector with adjacent sibling in recent project, now we're talking!
not sure how it added to CSS, coz the similar operation we were able to do with existing CSS properties...
btw Explanation was really cool 🙂
this one is actually very impresive.
When you were adding background/colors to the divs, I was thinking about rebeccapurple... then you used it.
Nice. Hopefully all is good, and we will get it in all browsers soon. I use Firefox 102 ESR, and Vivaldi based on Chromium 104, they do not support it yet. Next year things should be good tho.
That image gallery was nice 👌
AAAAAAAAAAAAAAA I HAVE BEEN WANTING THIS SELECTOR FOR YEARS
this fixed my problem where i want to change the style of other .image-grid-photos only when I hovered one .image-grid-photos
Last example was mind-blowing!
I have been looking forward to :has(), because I use stylus, and lots of websites just don't declare their elements enough with ID's or classes, or make them unique enough for me to target that parent element, as that is the only thing that makes me able to style that child at all.
I can't remember a case, where I really needed :has(), but I do remember an example case, in which I needed to target a div inside an element that adds div elements to it every so often, and has nothing that I can target, one of the children do have an ID, but the element that I want to style is the sister.
With :has(), I could just write div:has(#title-47) div#description {}
Before that, I think :not() did the same with direct child targeting lead by a sister.
12:58 "This is really weird, why would you wanna do that?"
That's why you should use box-shadow instead, no annoying element movement.
What a time to be alive🎉 Finally!
Immaculate presentation and quite useful knowledge!
This approach can certainly replace some tricky, stateful JavaScript code, with compact, declarative CSS, though it's still a bit tricky :)
Probably ppl should start documenting how groups of CSS rules achieve certain behaviors (in comments or storybooks).
Thank you so much (and sorry for missing this until now!)
Wow, adjacent sibling selector in reverse - mind blown
look-ahead selector. It solves so many problems in css. I don't need it often. But when I do, it saves me quite a bit of nasty javascript.
I looked at it a few years ago. But there were problems with support at the time. That seems over now. (My target users don't use FireFox.) So...happy slicing!
excellent video, looking forward to less class annotation in html! a more semantic world
I waited it since 2013, at some point I was very mad that it was neglected when it was so useful, because I had to use JS for this corner cases. Now it's finally there. While it still in transition process, for some projects it would already be useful.
TNice tutorials tutorial was worth it, I understood everytNice tutorialng now
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?
11:32 An easier and more simple way to do this, might be:
:is(h1, h2, h3, h4, h5, h6):has(+ p) { margin-block-end:5rem }