 There's actually a lot more pseudo-elements and pseudo-classes out there than a lot of people realize and some of them let us come up with solutions that you can do with a couple of lines of CSS rather than trying to engineer more complex solutions. So in today's video we're going to be looking at three pseudo-classes that you might not know about, you might not have ever used that give us nice elegant solutions to common problems that can come up from time to time. Hello my friend and friends and welcome back to the channel. If you're new here my name is Kevin and here in my channel we learn how to make the web and how to make it look good with weekly tips tricks and tutorials and explore the wonders that are CSS and I'm really excited for this one because pseudo-classes are things that we know the basics of. We know things like hover and focus and that and we use them all the time but we don't always run into situations every single site where you need to use the ones I'm going to be looking at in this video but they're the types of ones that can really help you out in specific situations so let's go and dive in and take a look at what they are. All right so the very first thing I want to look at is an issue where sometimes you go and you have these sites that were then there's like a navigation that brings you to different parts on the page so we're all in the same page here and we click and it brings us to that section but we sometimes run into issues with that and we're going to look at a few of the fixes and one of them is going to be using a pseudo element and I'll throw a few extra bonus tips into this one as well as we go through it. So the first one is it's not really obvious that we're on the same page when this just jumps around so we could do an HTML and throw in a scroll behavior smooth just like that and what that does is it well makes our smooth scrolling come in. All right so now we can see when we scroll around we go around but as I said you might click on section three and think that it's actually bringing this into view so this is where our first pseudo element comes in and I've wrapped each one of these in actually a section so you know your markup might be a little bit different but I'm just going to say section target just like that and this means if something is the target of it might when I click my link and I'm in code pen so we can't see the URL changing but normally you get the hashtag there followed by the section or the ID so when it becomes the target like that we can do something interesting and we and on this I am going to use an outline and not a border for this a border would actually have size to it so we can impact the page whereas an outline shouldn't do that so outline will do a three pixel co-dobbied red just so it stands out I'm not saying to use this for your own you can come up with more elegant solutions than this but now when I click section one you can see it's actually highlighting section one or section two or then down to section three and it's showing me what section I've clicked on when I've done that so that's kind of cool and you could even go a step further you could say section target and then say h2 um no let's leave this one like that and we'll just do a section target each we'll do an h2 like that so it's only if it's a direct child and we can say color is purple and now if I click on section three not only has that changed but my h3 there has changed too and again I wouldn't necessarily want to make it purple like that this is getting kind of ugly but just to show you some of the possibilities that can open up with this and you will see section two has multiple h2 so both of them have changed so just but just to show you a few different ways that we can sort of style things and play around with things a little bit right there so I'm going to take that one off because I don't really like it now another thing you might notice is when you go to section one it really lines up with the top of the page which isn't super nice this isn't a pseudo class and so what I'm going to do is I'm going to come on my html here and you don't have to have smooth scrolling on for this we're going to add a scroll padding top and I'll do three rem but I mean the number is up to you and that just means that when I go to section one it's actually going to keep like a three rem of padding there or we can go to section two or we can go section three doesn't influence it because it doesn't reach the top of the page but we can use that and scroll padding is an interesting property you can do a bit more with it than just this but just to show you that's possible I could also be really useful if you have a sticky nav and you want to make sure that the elements don't slide underneath your sticky navigation so things like that could be useful so there we go that is my target with a few little bonus tips along the way as well and is it just really really fast here actually if we turn off the scroll behavior say you don't want it you'll see it still keeps that scroll padding there so that's not because we have smooth scroll on so a nice little fun tip right there and the next one I want to look at is something that's a this one I actually think could be pretty useful and actually I did a video a while back that looked at sort of a way you can hack that to make a CSS only light box you do a lot with target these next two are a little bit less popular you probably won't need them as often but they can come in in interesting cases um so actually I'm going to change my content here just really fast and I'm going to comment out all my sections and what I want to look at now is a pseudo element um or a pseudo class I should say and it's going to be p and there's two different ones we're going to look at um one is only child so you've probably heard of nth child and you have one two three or first child last child and one that I never see talked about is only child and where this is interesting is let's say you had a blog and the blog has different types of content sometimes it's a really long form one that has lots of content and other times you just want something quick of a single just a single paragraph it's like something it's a bit more inspirational it's there it's just something quick that's going on your page and so you have your paragraph and you know this could be section or if you're doing it in an article you know our article p only child or whatever it is um for this demo though I'm just going to leave it like this and what I'm going to say is font size is for rem and then it just changes the font size of that paragraph and so yeah I think this is one that wouldn't come up terribly often but you don't have to you know the fact that you can see if something is an only child I think that's super cool and just to show you that it is working if I come here and I add a second paragraph uh lorem 20 or 10 whatever doesn't matter we just need another paragraph it's not styling these they're not the only child there's multiple children in here so it is styling this one only if there's one paragraph I find that really really interesting and really cool I again I don't think it's one of those ones that's going to come up all the time but I've seen things we're looking for these types of situations with sort of a complex javascript solution where you're trying to diet you're analyzing the DOM looking for when something is the only child and it's a certain type of thing and it can get really complex and you can do it with one line of CSS so one of those things that I guarantee you won't use every project but you're gonna be so happy to know about it when it does come up and when you do need it and the other one is actually really really similar to this and we're gonna do this one with a block quote so we'll say block quote and instead of only child it's going to be only of type and so this is very similar to only child the difference between only of type and only child is let's turn all these back on and the when we have all of this here right now if I did a block quote only of type and what I'm going to do here is actually section just to make it a bit more obvious what's happening and on here maybe we say font size is two rem and the color is red just so we can see it really clearly and this block quote here should change because it's the only block quote within that section but let's say for some reason we have more block quotes in one section we can come here and say block quote and lorem 15 just we have some content in there there we go and by doing that now I have these two block quotes and they're not styled the same because it's not the only of type the only of type you can have a ton of stuff but it's the only element it's the only block quote and then it's the only one that the only block quote that is in there and then that's going to qualify whereas the only child it could I mean you could even do a star only child here and it's going to look for anything that's the only child so that could be really really interesting and useful in different circumstances now I'm not saying that I would want to use this for block quotes in this sense but again this is one of those times where you might have something where if it's the the only child might not work for you because maybe you have a section with let's just say here in my article I do have an h1 and the h1 is my article title here so let's go and get rid of all of this once again and so if I did my paragraph only child and ignoring that the paragraph only child's not going to work now because I have an h1 within my article and so and again usually you'd probably do something like that article paragraph only child it's not working and then they go oh I wanted to do that thing Kevin told me about I thought it'd be cool well that's where the only type could come in not only of child only of type there we go and then that paragraph will get styled because it's the only paragraph within the article so there is a bit of a distinction between the two I think they could both be used in interesting ways depending on the circumstances and again they're not something you use in every single project but they're ones but they're ones that could really help you out in the right circumstance and the target one that I talked about I made a video a little while ago on how you can make a CSS only light box using the target and if you want to check that out it is right here for your viewing pleasure and with that a really big thank you to Zach and Randy who are my supporters of awesome over on patreon as well as all my other patrons for their monthly support thank you guys also very much and of course until next time don't forget to make your corner the internet just a little bit more awesome