 I bet at one time or another you had something like this where you have multiple classes inside of a parent and you want to select the first one of those classes and none of the other ones. So you jump on over to your CSS and you try enth of type and it doesn't work like you expected it to in that it just doesn't work at all. Now the reason that this isn't working is because the enth of type here is looking to see if color accent is the first of its type meaning the first paragraph inside of the article here. The first paragraph that it comes across is not a color accent so it does not match. And to show this if we move this to be the first paragraph in the article it is now the this color accent is the first of its type so the first paragraph inside the article and now it is getting the color right on it and this is incredibly frustrating that there is not an easy way to do it except this is coming to CSS and not only is it coming it is one of the features that was added to Chrome 111 along with a whole bunch of other really amazing CSS things and it's already supported by Safari. Now browser support for it is not perfect yet so please don't start using this in production we're going to talk more about browser support in a second though but let's see how we can do this even if my paragraph is not the first thing there but I still want to select the first paragraph of a specific class. So while this one is not working what we can do is come in and say we want to choose our article and then I'm going to use instead of an nth of type we're going to use an nth child so we use our nth child and in here where it's really cool is we can say one of and then color accent and I bet you that you can see here uh VS code is very mad at me for trying this but let's select this paste it in here and oh my goodness it has worked and I just realized the font size wasn't actually getting bigger but there we go we can make a larger font size as well. The syntax highlighting here has not made it to VS code yet but we're saying one of color accent so the first of that class that is within our article and it is working so I could change this to a two and it's going to be the second one you could also do two n just like before it will choose every second one and we definitely do need to be careful with browser support with all of these amazing new features that are coming to CSS which there are many many many of and my new rule for making videos on these things is once two browsers support it then I can make a video on it so we have support for this in two browsers now so I feel like it's good to start getting the word out and letting people know that these exist and they are coming and I already know there's probably comments down below saying I can't use this for six years because of internet explorers but the reality of it is with today's browsers things are moving incredibly quickly if we just look at has and container queries they're both beyond 80% support already even though they're relatively new and things just really can move quickly and we can also use these as progressive enhancements where we're adding a little bit of extra for people who have the support and so even if somebody is on an older device that can't update the browser like an old phone or something like that it's not the end of the world they still have a working experience even if it's not a perfect one and if you want to know more about that I actually talked about this years ago in this video right here so if you're curious about that sort of mindset you can check that video right now and with that I would like to thank my neighbors of awesome Johnny Michael Ralph Simon and Tim as well as all my other patrons on Patreon and of course until next time don't forget to make your corner the internet just a little bit more awesome