Pseudo-classes

[00:00:00]
>> We are gonna talk about Pseudo-classes and pseudo elements. This is more for completeness, a little bit more of an advanced topic when it comes to CSS, but I just want you to be aware that they're out there. So what happens if you wanna do something conditionally, right?

[00:00:19]
So for example, I have this like box here this is hovering your mouse over me, right. Now if you hover your mouse over it, it changes color and it changes size. This here is called a Pseudo class. So it has this base style of width 100, height 100, background-color and color, right?

[00:00:45]
And then if you hover over it with this colon, the colon being the key part of this here, right. This applies this class only conditionally if that hover state is true. Changes the background color width and height and you end up with this. Kind of cool somewhat interactive thing, right?

[00:01:08]
There are many CSS pseudo classes I'm just showing you one of them. So one thing to keep in mind when you're doing like hover for example, how do you hover on iPhone? You don't, right? There's no hover, right? You don't have a mouse. It does kind of apply some trickery like if you touch it sometimes it requires you to touch it.

[00:01:30]
To twice the first actual hover the second touch will click on it but for all intents and purposes you can't hover on mobile. So if you're intending for your site to work on mobile avoid hover states. That it is useful sometimes, what's a good example I'll show you one a good example.

[00:01:49]
Here on this web course website if you hover over the, you can see this little stripes in the corner changes color. That's done by using a CSS hover effect. And it's just like a little nice little touch if a person on mobile never sees that it's totally fine, it's just like a little flair to it.

[00:02:12]
That's when you should use something like cover it's should never be for core functionality otherwise you're excluding all your mobile users which most of us don't wanna do. But if you're doing like corporate intranet where it's like someone like accountants are always gonna use on their desktop computers.

[00:02:27]
Then it doesn't matter, right? They're always gonna be doing that they're not gonna be on their iPhones, browsing yours, spreadsheet app or something like that. In other words, just in general, with web dev, your audience is always the most important thing. Who are you building this website for?

[00:02:43]
You need to continually ask yourself that question. Okay, Let's talk about another one. So I have this first child example and the color is crimson, right? So I have this First, Second and Third. And then I have this one here, where it says first-child example so matches this exact same first class, but then I have this colon, first-child.

[00:03:09]
What color our Second and Third gonna be?
>> Crimson.
>> Crimson, what color is first gonna be?
>> Limegreen.
>> Yeah, so first-child is gonna be select only the first one in the list, right? The first one that matches this, so you can see here this is First.

[00:03:28]
So what's cool about this is now this is kinda like resistant to change over time. So let's say, suddenly we wanna start counting from 0 so we can put 0 there. I didn't have to go change anything else, my CSS just worked right away. Because the other way you could have done this as you could have just put First here and unstyled based on the first class, right?

[00:03:51]
Totally would have been valid but here styling by the structure of this makes some sense that so that. If later this changes which it did when I added 0, everything just worked right away. What happens if I change this too? Last-child. Same thing, right? It only will do the last one.

[00:04:13]
So that's another Pseudo-class, it ends up being super useful. So another really good example of when you might wanna use this. Let's say, I wanna have a nice black line between all of these. So if I put a border bottom which is like border but it's only gonna do the bottom border, right?

[00:04:35]
One pixel solid black, So they all have this like bottom black line, but what happens if I only wanted it between them and not at the end? In other words I wanna drop this one down here at the bottom. Easy to use first-child example and you just say border, bottom, none.

[00:04:58]
And now they have this like dividing line we could make it look better we'd have to put some padding on bottom, right. So we'd have to say, padding bottom 10 pixels or something like that? Maybe 20 pixels, 30 pixels, 50 pixels. There we go, that looks a little bit more plausible now, right?

[00:05:22]
And now we have this like nice dividing line, whereas if I didn't have this line, right. There'd be this weird last line, and it doesn't look as nice. Another thing I'll probably notice here is, I guess and check a whole lot. The way that one writes CSS is try this, did it work?

[00:05:43]
No, try it again. And just keep doing that over and over again until you get what you want. Okay? So I put a link here to Pseudo classes here. This is on CSS tricks again. There's so many, focus that's another one like active. This is another one. If you're pressing a button while you're pressing light holding the button, that's active.

[00:06:09]
Focus can be, if you click on a input and that they're cursors in the input that's focused, right. If you have an a tag and you want your visited tags to look different than your unvisited tags, you can do that with a selector that way. Target, enabled, there's so many of these that I'm just not even gonna get into them first nth-of-type, first-of-type, okay?

[00:06:40]
I'm gonna stop there because there's a whole article here but you get it, right? There's these conditional Pseudo class selectors.