How to target specific tags in HTML to apply css to using Pseudo Classes

Hi there, we're going to take Pseudo Classes to a next level. We're going to target this second P-tag in our testimonials. We're going to make it smaller, we're going to tab it in, and you'll notice, in our HTML we haven't applied a Class to it, because that's what we would have done up until now. We would have gone, "All right, P-tag, get a class," but look, they're just plain old P-tags, but somehow in our CSS, magically, we're being able to isolate this using a Pseudo Class. We do it with our testimonial, we do it with this good looking thing. Every third list item is read. Pseudo Classes, they are the place to be. It's where it's happening. Join me in this video, and you too can be cool with Pseudo Classes. 

So we learned the real basic Pseudo Class Hover in the last video, but there's lots of other cool things you can do with Pseudo Classes. And the w3schools version of explaining it all can be very dry, and that sometimes is really what I want, but sometimes it's good to go and check out something like CSS tricks. Chris Coyer is really good at just giving things a practical application, and sometimes it will say, "You have to do something, according to the manual," but then you're like, "Really?" and then you come in here, and sometimes Chris is like, "Yeah, that's what you're meant to do," but it's not what people do. Not what regular designers do, or developers. 

So anyway, this one's pretty good, css-tricks.com/pseudo-class-selectors. Just do a search on his site, it gives you more practical explanations. Now I'm going to go through them myself because there's lots in this, but just know that there's more that we can cover in this particular video. It's got a really common one. So we've done those ones, let's look at these ones. The position and numbering are really useful, because what I'd like to do for our testimonials is, this last thing here, this last P tag, I would like to make it smaller, and dented a little bit. Where's my mock-up? I want it-- oh, that's not, I didn't even do that in my mock-up, but I want the smaller push to the right, and maybe italicized, so we can target things like that using Pseudo selectors. So let's have a little look. 

So we're going to use this one called first child first, and then we'll look at last of type, maybe. So let's jump into our Visual Studio Code. So start working with these slightly more complicated Pseudo Classes. Let's look at the first child one because what I'd like to do is, I'd like to say, style the H1 inside of this Hero box. So what we can do is we can say, inside Hero box1, I'd like to do the, I'd like to style the first child. Remember, we talked about parents and children, kind of makes a little bit more sense now, right? So I want to find the first child, and now what you do with it is, up here, can you see?-- let's look at an earlier one. So when we want to find a P-tag inside of cards, we put a space. It's the same with these Pseudo Classes. I don't want to attach it straight to this, and do first child, because it's not what I want, what I want to do is find the first child inside of. 

So just having that space in here, like we've done earlier for earlier kind of Compound Classes, I want to find the first child inside of Hero box. I'd like to make the color of blue. It's weird, huh? Weird syntax. Don't worry, I find it weird too. So I found the first child inside of there, you could say, the last child, and it's going to look at Hero box and find the last thing in there, and the last thing in there is this button here, and it's applied the blue color to the text. So that's going to work for us. 

What we want to do is, not Hero box, we want to find our cards, here we are. And we're going to say, I would like, inside of tbox, I would like to find the last child, because it's the last thing in there, last child, that's what I want. Is that what I want? Some bit of syntax, less curly braces. And let's do Font size, just make sure it works. So Font size, I'm going to turn down to maybe 0.8 ems, no, rems. Let's save it, let's have a little look. Did that work? There you go. 

So I've set the last child of this box here to do this to it. What I could do as well is if there's more-- ours is quite simple boxes, you can do-- let's comment that out, so it's there, and we look at a slightly different way, because your box that-- your Div Tag might be more complicated than that. So there's other ones in here, let's have a little look. We'll do nth of type, or type, this is a good one. So child is just dealing with whoever's inside the parent, and of-type, let's say we want to find the last of type. And what kind of type? So we're going to say inside of the tbox, space, because I want it to be inside tbox, I want to find the last, not last child, we'll find the last of type. And what kind of type? I want it to be the P-tag. These two get joined. 

So the last kind of P-tag inside of tbox is going to do the same sort of thing. I'm going to do Font size of 0.8 rems. And we'll do a bit of Padding on the-- which side is that? That side is left. Just going to push it over a little bit. How far? I'm going to guess that for the moment. Let's have a little look, and our guy is there. So it is the last of the P type, we end up at the same place, but you can imagine, if you have lots of things afterwards, after this P-tag, maybe there's an image, our last child is not going to work, because that's the last child now. 

So you can be a little bit more specific with it. Now again, I'm not going to cover them all, because it will have a, I guess, their our own kind of place. Let's look at maybe just a few more, but what we might do is we might leave that because that's working. I'll leave that there, you can decide which one you want to use. I'm just going to close this down and create a new document. What did I do there? I just created like a throwaway document. 

So there's an Unordered list, which is a bullet pointed list, and there's 10 little items inside of it, and it looks like this. You can play along, you can create this if you want, and I'm going to do my styling up in the Head tag for the moment. So let's look at some other things. Let's say that I want to target the third guy down, just this fella. So what I can do is I can say, inside of the ul, put a space, because, something inside of it, I would like to target the nth child, and in the brackets you type the number you want. So I want to target the third child inside of this fella. I'm going to put in my curly braces, I'm going to say, make you a color of red. We've used too much blue. So let's give it a test in the browser, there you go. 

The cool thing about it is, if I start putting stuff in here, apples-- I'll speed this up. That will do, let's save it, let's have a look. So the orange is red but the thing about it is, if I move the order of this, I'll make the oranges the top, it doesn't really matter actually, you can see, banana has now become red. So it's a great way of targeting it, and you can kind of dump stuff on to the page, and it doesn't matter, the third person will become red. 

Now you can also do, instead of just the third child, you can actually say, I want the second, the letter N afterwards, it will do the second version of him, and just kind of repeat. Same, you could put in third. There's lots of other things you can do in terms of kind trying to find specific-- you know, you might be dumping loads of data on to a page, and you need to style every 20th row, but only if. And that's where you might jump into something like, Chris Coyer's kind of bit more, they all kind of dive into nice little examples, but I think that's it, gives you a good explanation. 

The big thing to know though is that, different from our Hover class, often there's a space in between, because I want to find the nth child inside of this thing, but if you want to get real specific, if I want to find the Li, I want to find the nth child only targeting the lis inside of the ul, this gets joined up. Weird, but true. All right, do we actually do ‘l’? We did, we tab those in, that's what I really wanted to do, and that’s why we created our testimonials, so we can learn a bit more about Pseudo classes. And if you're like, "Man, that seemed like a big-- what are we doing this for?," because later on in the course we're going to need to know a little bit more about Pseudo classes. So it's good kind of foundation for us, it will make it real easy later on. 

All right, that is it for this video. I will see you in the next one.