Hello, in this CSS Crash Course video, we're going to be looking at pseudo classes. quick overview, what a pseudo class is, is basically extra functionality for a particular element. At the moment, we've been affecting an element or a class or an ID, but it's just affected it all the time. But maybe we wanted to change the storyline of a div, when the user hovered over it, but when they didn't hover over it, it wouldn't have that stone applied to it. That would be a pseudo class that will be in sort of like almost like a hidden piece of functionality, we're going to go through bozo most of the main pseudo classes in this video. So the first thing we are going to do is for a, a href, href gonna have to do a you could do a div tag, but we're just gonna keep it simple in this use an anchor tag cuz this is something that you'll be commonly using.
When you're using stuff like harvest dates, and other pseudo state for hashing, we don't care about where he goes to the store and he'll want to put this is a link. Save that, I'm going to duplicate this, I'm going to duplicate it. And one of the pseudo classes really require more than one of a particular type of element plus, to actually demonstrate this point, I'm going to put this as a second link, save this, run it. So this is what it looks like. At the moment earlier, he's got this sort of horrible blue color on this black background. It doesn't look very good.
So that's the first or pseudo class that we're going to deal with is the actual link color. So we're gonna put a colon link anywhere they say a, it could be a class name, it could be an ID name, whatever. We're just using an anchor tag. So link, curly braces color. Red Save that refresh. And as you can see the default link color is no red.
And if I click that, as you can see a clicked element is now purple. So what we're going to do now is change the clicked collapse, I'm going to put a colon visited for the Columbia yellow. So that refresh and as you can see, we could be visited visited is now yellow. forward to copy the link, open incognito window, paste it into here. As you can see, it's red and it won't turn yellow because we're in incognito. But if we go back to our regular tab in a year because we have visited, but this is also a great way to make sure the visited color or styling is the same as a regular one if that's what you want.
Maybe you don't want it to change wants to use a video today. That is more than a common scenario. Nothing That that is the way you would do it. Then Now, let's look at the active pseudo class. So this will change the styling of a link that is being pressed but he hasn't been released yet. So basically when you're messing down on it, and I'm just going to do font, weight, changes to gold, save it, I think it's a okay.
It's normal. If I keep you pressed it makes a boulder so that's the active senior class. Now we're going to look at the almighty harvest class. This is something that you'll definitely be using a lot for this one quick text decoration on the scorn non save that I'm going to refresh here. As you can see, when I hover over it doesn't do anything for refresh. Now, when I hover over it, it removes the underscore because we removed move all the text decoration.
Now we're going to look at the a focus. So a cola focus on Desiree's coat on 40 m save that refresh. And as you can see, it's while the hover state is working, the normal click state is working. You might be thinking, Okay, it's doing both and that's the real reason it is focusing on it, and we are actually visiting it. But if you just want to do the focus state on so we clicked tab, so we are focusing on it focusing on the next one, focus in here. That's not my guess.
So then focusing on it again, the last pseudo class we're going to show you the first child pseudo class. So what we're going to do is background color. You For the yellow, save that refresh, and probably not the best quality attorney today. instead. Yes, not too bad. So basically what are the effects only the first a tag.
So if you were to switch these around, it would affect this one because that will be the first anchor tag that it picks up. I recommend doing that just have a look experiment will be that's the best way to learn to see how it reacts. So that's it for pseudo classes. If you have any questions, feel free to post them on my education platform sonar learning.co.uk. If you want to check out the source code, don't worry there will be a resource attached to this video which will have all the source code from the theories below the video please. Now if you didn't let us know as well.
We welcome your comments. As usual. Thank you for watching and have a great day.