 Hi there, my friend and friends. Nesting has come to native CSS and it's pretty awesome. And a really quick example of what it is where you might have your navigation styles for something where you have your navigation, but then you're using these descendant selectors. So you're having to repeat yourself with primary navigation. Well, with nesting, we can get rid of that and do something like this instead where the UL and the A selectors are nested inside of the primary navigation and it works perfectly fine. So if I came here and let's just change this gap to a five REM and you can see that it has updated up above. Now for those of you who are used to nesting because you've been using it with a preprocessor like SAS or less, this might seem really familiar to you, but there's actually some pretty big differences and gotchas in how nesting works with native CSS. First though, we're gonna talk about the very basics of how it works, why we need this ampersand here, when we don't need an ampersand because you only need to have them sometimes, but it's different from the preprocessors and how that works. So we'll talk about some of the gotchas with it that you might not expect. We'll talk about my single favorite feature of nesting and of course, we're gonna address browser support as well. And just before we dive into this, just in case you're new here, my name is Kevin and here at my channel, I help you fall madly, deeply in love with CSS. And if I can't get you to fall in love with it, I'm hoping to at least help you be a little bit less frustrated by it. So if you do plan to use nesting in the near future, understanding the ins and outs of how it works and the little gotchas, that will definitely help you not be as frustrated with it. So let's dive in and see what we can do with this. So what is nesting? Well, we already sort of saw that when I threw that together where we can have this ampersand here that is replacing the idea of the primary navigation. So if we want descendant selectors, we don't have to repeat ourselves. We can nest those descendant selectors inside of the parent selector. Now this leads to this first thing of like, why do I have this ampersand here? And it's very important that this is here. Just to show you, if I remove these from here and hit save, my navigation is breaking. And if you're used to a preprocessor, that wouldn't be the case. So we'll talk about that in a second, but I do wanna talk about what might be a little bit of an elephant in the room for some people of you shouldn't use descendant selectors at all. And a hundred percent, we wanna be careful with specificity. And we hear this a lot where they're saying, like, you know, don't, you just make everything a class selector. That way you just have the same specificity for everything. You don't run into any issues and all of that. And I definitely think it's good advice early on when you're getting into CSS, so you're not worrying about these other things. But once you sort of get past those early stages and you can understand the implications of the code that you're writing, not taking advantage of descendant selectors as far as I'm concerned, is like riding a bike for the rest of your life with the training wheels on. At one point, you probably wanna take those training wheels off and take advantage of what a bike can actually do because that bike, you know, you're wasting your time if you're just with the training wheels on all the time. But of course you're not gonna go all crazy. Most people aren't gonna ride a unicycle and take another wheel off and all of that, right? So we do wanna be a little bit careful because we could do something similar. I broke something along the way here, but you can see things are working if I did this. And this is where nesting definitely becomes an issue where we have like my UL and then I'm nesting another level deep to get the LI, then I'm nesting another level deep to get to my links here. That is in my opinion where the wheels fall off of your bicycle completely. We're raising specificity for no good reason. We're making things a lot less readable and selectors like this are just kind of pointless. So one level deep nesting in my opinion is fine. Sometimes you might even go two levels deep for an extra hover or something like that. If we go back to the original example I had, you need a hover on there. We can do an and hover and I can add a color of red, hit save on that. And now my links get that. So like this extra level of nesting sometimes can be a little bit handy as well. In my opinion, and it's definitely an opinion, you can disagree with me if you don't like the idea of descendant selectors but I think nesting and using, even if you're not nesting and you're just using descendant selectors, if you're using them one deep, it's fine. It's when you start going deeper and deeper that's where the problems can start popping up. And that brings us to this ampersand. I'm actually using the ampersand in two different ways here but I want to address what this actually is. And it's a new selector that they've added to CSS and it's called the nesting selector. And we've seen other, we have other symbols that act as selectors as well. So just as an example, you probably even seen use cases where you might have like a nav, UL or something like that. So this is the direct descendant. It's a combinator, but we can, you can start things off just with that. So now we have the ampersand as well which can act as the nesting selector. So it's sort of like taking this primary navigation. It's acting as a placeholder here for it. So we end up with the primary navigation UL. But the other symbol that is a selector unlike the direct, you know, the combinator I just mentioned is the star which is our universal selector which just selects everything. So we've had symbols before they've added a new one but it is different just very quickly if you used to preprocessors, it is different because if we come and take a look in our dev tools here, we'll notice that it's actually kind of interesting because in SAS dev tools, when we used, if you do it, it actually gets that like our ampersand here would actually get compiled into being primary navigation. It's a string, it gets turned into that. If I open my dev tools here in Chrome and I come take a look here, I actually see the ampersand in here. Look at that. And it's telling me that it's a placeholder for primary navigation. And I can see that in my dev tools which is really, really cool and handy. But so it's acting as primary navigation UL right there. So the nice thing with this is on like preprocessors is we can actually like, I can look for that exact selector in my code and I can find it because that's exactly what's here. Now, one thing I have noticed is sometimes and I don't see it on this one. Sometimes you find like a little broken property down below that has the ampersand in it but everything works fine. I think it's just the dev tools sort of trying to figure things out a little bit. And so this is a little bit like preprocessors with custom properties versus variables. Like a custom property in CSS is a live value that you can edit and it will change things on your site that are all using that variable. And this is a live object that's referencing this primary navigation. So it's gonna act a little bit, there's a few gotchas with it, which we're gonna get to. And that actually raises the point of like, why did I even need this in the first place if I nested like this and it's not working? And that comes to one of the rules of how nesting is going to be working within native CSS, which is the nested rules have to start with a symbol. And you might be wondering what symbols we need. So I'm just gonna show them right here to you. So it's these symbols right here and then we can zoom in a little bit on those. These are the symbols that we have to use. And you'll notice that it might look like this arbitrary list, but here's like, you know, we have our app media, we have hover states, we have the class selector, we have these combinators right here. We have an ID selector at the beginning of an attribute selector and our universal selector. So these are all existing CSS symbols that we had before. And now we have the new ampersand, which has also been added. And to take a look at how this works with symbols, what we're actually gonna do is if we look in my navigation here, I have this last LI, which is my login one at the top, has the class of login on there. So what I could do is this is all inside of my primary navigation class. So let's find that again, we'll move back up here. And so we have my primary navigation. And as long as we're nested in there, this is where the colorization of brackets also really helps. There's, I think it's native to VS Code now actually, there used to be an extension for that. But so what I could do is I could say, and just like I did here, the ampersand, and then I could do my login. And I could say that the background on this one is going to be white. We had a little bit of padding on there. It's not gonna look nice right now. And then we'll just give it a color of black, just so we have something that's there that looks different. But what I could actually do in this case is I can take that ampersand off and it's still going to work. And just to show you, if I change this, it is working up there. And the reason this is working is it's starting with a symbol. And this is kind of weird because it feels like this rule of nesting where if it's an element selector, you need to have an ampersand. If it's not an element selector, then I don't need an ampersand. And if you think of it that way, it is, it does feel a little awkward. And I don't think it's the right way to think about it. I think the right way to think about it is just you always need to have a symbol. So if it's just an A like this, it's not going to work because there's no symbol at the beginning. So the whole purpose of this guy is to add that symbol to make the nesting work. And that's not the whole purpose. We can actually do some interesting things with this. But we can see there is my login and it's working. And the other thing is if you don't want to think about that and you just want to say, I always need the ampersand, you can always put one. From what I understand in the spec, the browser behind the scenes is sort of placing these in there anyway. And so if you're going to include it just because you just want to be consistent and you never want to forget, that's completely fine. But I'm probably, if you see me using nesting in future videos, I probably won't be bothering with it. Just remember, if it's an element selector, you need it hammer that home because we use classes for so much stuff. I could see it being one of those things that you forget every now and then. And especially if you're coming from SAS or something like that where you weren't needing it, then obviously it's a little bit different as well. And speaking of SAS, one thing that was really popular to do in SAS is to use it for like a BEM naming convention where we might have something. Let's just do it. Here we have my primary navigation and let's do primary navigation. And I'm going to double underscore this with a primary navigation list like that. And this is like a common one. Then here would be like a primary navigation list item, a primary navigation link. And what you would do, and this is really common, if you look up nesting tutorials you'll probably find stuff on this because they're using preprocessors where you'd have your primary navigation and then here instead of having the UL because you wanted to do it that single class selector you don't want to use a descendant selector you want your primary navigation double underscore list and it's not going to work. So here we could try it where I do that and I make this list and it breaks everything. And in CSS nesting this type of bit we can't concatenate strings together because it's not a string. This is a live object like I said. So if we go and take a look in my dev tools here we're going to see that this primary navigation that rule is not even showing up for it because it's not even targeting this, which is a bit of a shame but it's just because what it's doing is it's treating this as one selector and it's treating this part here as a second selector. And so it would be sort of the same thing just because like let's just say we had if you have a button accent you could write it like that and write your rule and if you wrote accent dot button like these are the equivalent they're exactly the same thing. So writing this here would be the equivalent of writing list dot primary navigation in CSS world and sorry for all the squiggle marks, right? Let's just do that and maybe put something here just there we go. So yeah, doing this would be the equivalent of writing something like this and obviously this doesn't work because double underscore list isn't an actual thing and it's the same thing if you wanted just to do this that would be the equivalent of doing this and this could technically be a valid selector. So CSS doesn't know that you don't have a custom element called list that you might have a class of primary navigation on it. So this idea of concatenating strings that you might see from preprocessors, we can't do it. It's not something that's possible but that doesn't mean that the ampersand is useless. First of all, we can use it for the UL list like this like we were doing before but you can actually use it in combination with other stuff just not how you might have you been using it before. And the way we would do that is to create compound selector. So if we come down here to where I had my buttons here I have my button then I have a primary and a button accent here. And so if we come and take a look I get that not everybody likes this style of naming things but if I did it like this with a button primary and a button accent then what I could do is I could take away all of this. We still want the dot and then I could take away this and have an extra close there. Let me just format this to make it a little bit more readable. Tab that over, move that down. There we go. So one thing you'll also notice is the syntax highlighting from VS code is hidden mess here. There is a bug report for it in people are pushing now the browser supports getting better there people are asking for it to be improved upon so we'll see what happens there. And right now this is broken even though these are starting with class symbols so these class selectors should be valid. This is looking for a primary that is nested inside of my button. So that would be almost like if I had a span here span of primary and the more was in there and hit save that more is getting those colors because this primary is nested inside of that button. So in this case that's gonna work. Now we don't want that. We wanna get something that is my button primary right here and to be able to get the button primary that's where the ampersand comes in because it's the placeholder for them. So I can put that there. And now it's not concatenating these it's making a compound selector. It's sort of one selector all together. So let's go look in our dev tools so we can see this a little bit more what's actually happening here. And so if I take a look here we have my dot button dot primary. And so it's the double sort of selector that's on there. So this again could be dangerous for specificity reasons. You wanna make sure you're doing it on purpose maybe you don't like this idea but this is how the ampersand is gonna work with native CSS nesting. So I did wanna explain that. And the same thing we can go look at this one. And then here I have my button accent right there that's getting these colors on it. The other thing that this is very useful for even if you don't like this approach here where we're doing that is when you wanna make your hover classes like we saw before because it is super nice just coming in and doing a hover and focus and not having to repeat the class name again. I absolutely love that so much. So here the background could become dark blue and this VS code does that to me sometimes it likes background color. So then we get the hover color and focus color coming like that. This is one of my favorite features of just like quick hover focus states like that using the ampersand. It can be super useful. So yeah, that's one of the nice ones not my favorite, but it is a good one. And you might just be wondering because we are nested like an extra level deep. You know, how is this actually going? So once again DevTools are always our friend where if I come on that we'll turn on the hover state right here hide that back away and we can see the and and when I hover on top of the and you see the button and primary you can see it's a little funky because we have the double and coming there and here it's a little bit weird too but it gives us the idea of it's an and focus and it's so it's our primary button basically. So maybe a little DevTool work could be done on that just to make it a little bit more clear but at least we're seeing the exact selector that's being used which is always super nice right there even and then we sort of have to hunt for this I'm guessing this will improve over time because that's a little bit misleading because that's not exactly the selector that we were looking at but at least it does give us a little bit of an idea and of course we would see the original down here anyway we have the button primary here and then we have the and focus and that hover for it so pretty easy to find what's happening in there. Another fun use case for this type of thing really fast would be on like navigations let's just say you wanted like a divider this way or more common not going to make a mobile nav right now but if they stacked on top of each other and you wanted the line separators between them right so on the LIs we could say here and say and LI and then in that one do an and not last child and say that the border let's do a border right in this case of three pixels solid yellow just so we can see it so they're all getting it except for the login here so if I just for fun if I take that off hit save and we can see that yellow maybe I'll make it orange so it stands out a bit more but that is showing up next to my login button so it's a little bit weird here because I've double nested it but the and not could be very useful the same way doing the and hover and and you know and the and focus these types of little things like this are that part where like this little it just makes our lives easier as devs and can be a bit faster to write another thing that's kind of interesting that it's not a super common pattern this is possible in preprocesses as well is let's go find my hero let's just do a paragraph and let's say the color of our paragraphs is going to be we're gonna go steal blue just so we can see that things change so you can see all of them have changed and what you could actually do is if we wanted if you had different theming and stuff going on there's other use cases for this but I could say something like dark theme and then do my ampersand out here and it looks a little bit funky because the ampersand is here but then I could say that the color in this case is going to be a light blue and then let's go over to my HTML so then on my hero here let's just add a dark theme that save and you can see that the color actually switched on that and of course we'd probably wanna have something like then coming here and doing an and dark theme is a background I won't do a new gradient let's just do a background of black so it switches so if it's the dark theme we get the light blue and in this case the steel blue and the regular time so the steel blue down here or maybe for fun let's just make this yellow so they're really different the thing I like about this pattern is that if I go to my paragraph I can find all the styling for my paragraph in one place and I don't know if this is the change I would make I'd probably rely more on inheritance than doing it this way but it's nice to have one selector and then you can find the different stuff going on with that selector instead of having to go and find your dark theme and then find all the different changes it's making if you're going to do this make sure you document it in some way or another because it's not sort of a normal thing that we actually see we're getting our paragraphs that are inside of our dark theme so it looks kind of weird it could be definitely useful but it's one of those things that if someone's not used to this they'll have no idea what they've just come across so document this if you're going to use it now I'm going to get rid of that because it's kind of ugly not that this site is beautiful by any means the next thing I want to look at is my favorite thing because I promised you we would talk about my favorite thing with nesting which is that remember there's different symbols that are allowed so our class selector can be working there but another thing that works is the at symbol and that means that we can now nest media queries and this is the greatest thing ever and so let's say my hero let's just boost the font size on here a bit font size is 1.25 rem let's say or look we made it smaller but we'll stick with that because then what we can do is say an at media and do a min width we'll say 780 pixels and we'll do a font size of two rem and now it's really big so let's open up our dev tools click on the little responsive guy and as this shrinks down at one point there we go we get the smaller and the bigger font size coming in and this is something from the preprocessors that works the same way that I love so much and I'm so happy it's coming to native CSS because as much as I still do USAS being able to do this for me is so nice and we need to see it here at media and font size and it's changing and if I go in the end it's the hero, right? So we know exactly what's happening we can find out where sort of what's going on with it and the font size is getting switched right there and the media query is working even though I didn't have to know I don't have to do hero again and then nest the media query inside that other selector and then add the stuff I love this so very much there is one really important thing with this though is let's actually take this out and do it the old way the old painful way of doing it of right hero then you'd have your media query like that and the reason that this is a little bit of a gotcha that potentially is if I put this up here because this is only for big screens but then this is for all sizes this is going to win because it's coming afterwards and nesting can actually change the order of your CSS which is the first time I think that that actually comes up there's with layers you can sort of control stuff in a different way but this is the first time I think that literally changes the order of your text or of your rules. So here if I take this at media and I put it at the top it's still going to work and you can see then the S code is not happy with me but it's still working clearly and the reason this is actually working is because regular declarations are going to be hoisted to the top when the browser parses through this it's going to find all the regular ones put them first and then take anything that's nested inside and make new rules after that because it still has to sort of go okay how is this impacting things lower down? So the order here again if you have regular rules and then nested stuff even if the regular even if the nested things are coming first in the way the CSS is reading it it comes after probably not a big deal in this case it actually could save you from a mistake you made because the media query should come afterwards anyway but it is one of those things that maybe could cause an issue along the way that you're not expecting so it is important to be aware of that that it can change the order of stuff and another thing that's really important to understand is it can actually muck around with your specificity in unexpected ways as well and to illustrate how this works let's just come here and if we come and take a look or you know what let's give this we have a section down here and just to sort of we're gonna do an ID of introduction because you know maybe you have IDs through in different stuff and you wanna style that introduction differently as well so what you end up doing is or actually let's just we'll stay with our hero here and let's say our hero and our introduction are both getting similar styles here we have the gradient that's on both of them the font size is all of that and that's great and then I wanna grab this H1 and my H2 here and I wanna style them so then I come here and I say and H1 and H2 and I say color is red and the color has gone to red on both of them and that's exactly what we would expect to happen on these two things but then later on, it's a few days later you forgot about that code a little bit and you don't like this red and you're looking at your HTML and you see oh I have a page title there okay let me come and style this so I do page title and I say color is now blue and it doesn't work oh yeah okay well you know here we have this or maybe even you look in your dev tools right we can find this in our dev tools so you go and you look and you go oh it's this and H1 I forgot that I nested it inside of that that hero thing that was coming here okay so that's not a problem and you might have seen a preview of why this is a problem and so you might be saying that this is a class selector plus my H1 so I just need to match that specificity so we can match it with the H1 page title and it doesn't work huh that's weird but our dev tools actually gave us the answer there when I hovered on top of this you can see that it says is hero introduction and so if you have multiple selections here and then we have stuff nested inside of that the is is going to be used to create this into a selector and so that can muck around with your specificity on things because all of a sudden the specificity of this H1 has an ID in it because if you're not familiar with how is works is it uses the highest specificity of all the selectors in there so in this case it's not combining these two together it's just saying it's the same level as an ID selector and so it's basically unbeatable right so it just it doesn't work and so it just means be careful with how you combine your selectors and again a lot of time you don't want to be probably putting in IDs like that but even if you're just using classes here and then you have that it is a descendant selector so we do want to be careful with it but you can have these unintended consequences with it as well and so yeah that's more or less how it works but there's a few important things that I think are worth addressing as well with this is first of all the way that nesting can affect readability and searchability especially when it's used within a preprocessor a lot of people would complain about it because your and H1 wouldn't actually be the selector that you'd be able to find in your dev tools and so then you'd find something or as I said you might even have something that looks like this in the code but it looks very different in the finished CSS and so it would make things very hard to search for at times now there were with maps and other stuff there's ways to find it anyway but it was a complaint that would come up and the other thing is readability that is kind of can be awkward and especially like right here this might look a little bit strange I think that if you're nesting super, super deep readability is definitely impacted but I think a large part of readability A is going to be the syntax highlighting improving just because right now this all being gray I definitely think it doesn't do it any justice but once you get used to how nesting works just like anything else like when arrow functions first came to JS they were kind of weird looking and then you eventually get used to it the same way here this is something that you may not be familiar with but once you start using it enough it doesn't really hurt the readability as much so you do have to glance up and of course if you have this giant thing that's all nested and you have to scroll up to see what the parent selector is that can be a little bit annoying so a couple of things to watch out for there then of course the big thing is what's browser support like so here if we come and take a look the table might have a lot more green on it here than you expected and we're at 70 as of recording we're almost at 73% support for something that's very new that's awesome it is coming in the next update of firefox so that means all the major browsers are going to be supporting it you know the big thing now it is in safari and safari on iOS so it's rolling out now of course that does mean that older devices well you know it's still a lot of people on the older devices for iOS so it doesn't mean we can start using it immediately in production and it is one of those things that if it doesn't work it could break your site so we do want to be careful with it if you are going to be using it then it is something that once it has enough support will probably start being a lot more widely used because it is one of the people's favorite features from preprocessors like sass and people saying that that's primarily reason they use sass so maybe they won't have to use it anymore so I see this being something that's going to be widely adopted as soon as browser support does get a bit better with it so playing around with it on personal projects and familiarizing yourself with it is probably a good idea and speaking of preprocessors I mentioned a few of the differences between how nesting works within native CSS and the preprocessors but I sort of just glanced over them if you're someone who does use sass and you'd like a much deeper breakdown into the differences and also what's going to happen to sass nesting you're curious about that I covered it in this video right here maybe there because if that video is not showing up it means it's not out yet because it's coming out two days after this video does so if it's not out yet and you do not want to miss that video then do make sure that you're subscribed to the channel and with that I would like to thank my enablers of awesome Bailey Andrew James and Rico Michael Simon Tim and Johnny as well as all my other patrons for their monthly support and of course until next time don't forget to make your court on the internet just a little bit more awesome