Complete Intro to Web Development, v2 Pseudo-classes

[00:00:00]
>> Brian Holt: So we're gonna talk about pseudoclasses for a second. So these are things that you will end up using quite a bit. Sometimes you wanna do CSS based on some sort of state that the UI will find itself in.
>> Brian Holt: And probably the most easy one to demonstrate and one that you'll commonly use is the hover pseudoclass.

[00:00:19] So I have here this box over there, the one that says Hover your mouse over me. And when I hover my mouse over it, like I put my mouse over it, it changes styles, right? So it's kind of reacting to the user's input. Now, when you will typically use this is for links, right, because links will change colors, or they'll underline themselves.

[00:00:40] I did it here, right? If you go back to Intro to Web Dev, they underline themselves, they get a little bit darker. And that's just based on the hover class.
>> Brian Holt: And the way that you do that is I have hover example right here, that has some set of colors, right?

[00:00:59] And then I have hover-example:, so this is the key thing that you're looking for is the colon, :hover. So that means any time that it's both this class and it's being hovered over, then apply these styles. So the background changes colors, it changes width and height, etc, etc.

[00:01:19]
>> Brian Holt: There's a bunch of them. There's focus, if I'm doing an input and the user clicks on it, you wanna outline it in blue to let the user know it's like, hey, you are focused on this at the moment. You can do :focus, there's :active, which is like, I'm actively pushing a button.

[00:01:37] There is :checked for check boxes, whenever they're checked, you can do different styles based on that. There's a bunch of stuff. Those are called pseudoclasses. They do have a certain amount of specificity associated with them, and I believe it is like being a tag, no it's a class, I think it's like a class.

[00:02:05] So if did hover-example, and we'll do div, I did color blue,
>> Brian Holt: No, not color, I want background color, background-color,
>> Brian Holt: Okay.
>> Brian Holt: So I would expect this to stay blue. No, it gets red, so, right, because this is like a class, right? So this is like 20, whereas this one's like 11.

[00:02:44]
>> Brian Holt: Whereas if I did hover-example twice, hover-example. So this is twice, this is 20, this is 20, right? Which one wins? The one that's lower on the page, so therefore it stays blue.
>> Brian Holt: I mean, you can even see it, I've been doing this for a decade or longer than a decade, and I still get mixed up at this stuff.

[00:03:07] And this is example stuff, so I'm teaching to brand new beginners, which is why I try to avoid it as much as possible. If everything's just styled with one class, and sometimes two classes, it's great, it's a lot easier to work through.
>> Brian Holt: Questions?
>> Brian Holt: Yes.
>> Student: I have a question in chat room.

[00:03:30] I think it goes to semantics and defining things. Is hover a class, or an event, or both?
>> Brian Holt: Yes, [LAUGH] the answer is, depends on what context we're talking about. In this very particular instance right now, it is a pseudoclass, which means its specificity is similar to that of a class.

[00:03:58] In JavaScript, there are hover events, which we will get to. I don't know if. It's not actually called hover. It's called mouse enter and mouse leave at that point, but that's what it's called, it's the same thing.
>> Brian Holt: Good question.
>> Brian Holt: Other questions?
>> Brian Holt: This is another pseudoclass, one called first-child.

[00:04:37] So I have here an ol, with three li's in it. And let's say I wanted to always style the first one a different color.
>> Brian Holt: Now, I could have just given this another class.
>> Brian Holt: Another class, and I could have styled based on that, right? And I could have use specificity in the cascade to make that work.

[00:05:04] However, there's these kinda structural pseudoclasses that you can use. And of them is first-child. So it says, if it has the first-child-example of class, and also it is the first child in the list, if that's the case, then apply this particular class. So this one, because it's the first child in the list, it gets this green color, right?

[00:05:34]
>> Brian Holt: So that's one of them. There's also last-child. So if I change this to last-child, you get the last one. And there's also one called nth-child, which I don't really wanna get too much into, but I want you to just be aware that it exists. Nth-child, and say, I wanted to get the one in the middle, then I could just put 2 in there, it's the second child.

[00:05:58]
>> Brian Holt: Or if I wanted to get the first and the third one, you can actually end up doing math in here, not that anyone wanted to do math today, but you could.
>> Brian Holt: So you give it a formula, it will follow the formula. That's what nth-child does,
>> Brian Holt: Which is kinda fun.

[00:06:20] But if we go back to first-child,
>> Brian Holt: Inside of ol's you'll only ever put li's. But let's just take for a dump reason, I put a p in here for whatever reason.
>> Brian Holt: Notice that nothing is green now because technically this p is the first child, right? And it doesn't match this one either cuz it doesn't have first-child example in there either.

[00:06:48] So nothing matches, you just get the red one.
>> Brian Holt: Questions about that? There are quite a few pseudoclasses to look at, so that's something you should check out. I think I linked to a CSS Tricks article on it, yep, so give that a look if you wanna learn more about them.

[00:07:13] There's nth of type, which is another one that's kind of interesting. I don't think I've ever used nth of type, that's just one those things I just know about. I do use nth-child, and nth-child is quite useful, so is first-child and last-child. So that's when to bother learning, for sure