Interactive Pseudo-Classes :link :visited :hover :active

[00:00] The vast majority of the time, all you'll need are basic selectors like the class and element selectors. There are times when some more advanced selectors will save you from adding unnecessary HMTL or even JavaScript to accomplish the styling you need, which brings us to pseudo selectors.

[00:15] There are two kinds -- pseudo classes and pseudo elements. They're called pseudo selectors because unlike other selectors, they do not have any corresponding references in the DOM. Pseudo classes, they're primarily used for styling states of an element, but can also be used to target elements based on the relationships in the DOM hierarchy.

[00:35] Let's go ahead and take a look at some sample files so you can understand what I'm talking about. Once you've cloned repo from GitHub, go ahead and open the directory in your favorite editor. Also, we're going to run Browsersync to quickly reload the browser as we make changes to the files.

[00:52] In the main directory, run npm install, which I've already done. It's going to jump right through that. I've also mapped the command we need to run Browsersync to a simple npm script. Just go ahead and type in npm run to. If you want to understand what this script this, you can look at the package.json file and dive a little deeper into it.

[01:15] When you run this, it should start up Browsersync which will open our browser to the correct directory. Now, Browsersync will reload this page every time I make changes to the file. But I want to be able to see the browser and my editor at the same time. I'm going to open them up full screen. Put the browser over here and my editor. I don't really need to see much of the browser. We can focus on the editor.

[01:37] Now, I've got my link.html file open. Let's go ahead and click on link state pseudo classes. Click corresponding URL. You can see here, I've got a list of links. They're actually an unordered lists.

[01:51] I've got some <a> tags. I've got a button. Then, this last one is also an <a> tag but it doesn't have an href property. It's not really a link. It's a named anchor.

[02:00] In my link.css file, you'll see that I'm styling all of the <a> tags. I'm taking away the text decoration which means I'm taking away the underline. By default, links have underlines and I'm taking that away.

[02:11] Then, here's our first pseudo class. This is the link pseudo class. It's applying to every <a> tag that has an href property. I'm changing the color to blue which is actually the default, but I can change this to green if I wanted to. When I save that, you'll see the links turn green.

[02:29] I've got a visited pseudo class. This pseudo class applies to any link that I have visited. I have visited Google.com. It shows here that it hasn't been visited but that's because it redirects to www.Google.com. It's actually an HTTPS.

[02:48] When I change that, then it changes the link to purple because that is a link that I have visited. Then, here, I have one link that actually isn't a real URL. I can't visit it, so it will never turn purple.

[02:58] Then, here's our next pseudo class. I've got a hover state for the links. You can see here the text decoration. It's adding that underline back again. When I hover over these, you'll see that the underline shows up.

[03:10] Now, what I want to point out as well is that this is actually applying to the named anchor. If I wanted to be really tricky about it, I could go like this and say, "Hey, I want it to be the hover state of things that are links."

[03:23] It wouldn't apply to the first one but it would apply to the other ones. If you have a named anchor, you can combine these pseudo classes to fit your need.

[03:30] Then, this last one here is the active state. If I click on an interactive element, it will add this border. I've got a one pixel solid. It's just choosing the color of the text.

[03:41] Then, I also wanted to show here that it's important that we are specific with our pseudo classes in the case of something like links. If I uncomment this out, now I am adding a solid green two-pixel border to any element when I hover over it. When I save this file, it's going to reload that and you'll see it causes some real problems when I hover over things.

[04:02] We want to make sure that we add our pseudo classes to the correct corresponding elements. That's pretty annoying. I'm going to go ahead and comment that back out again.

[04:13] Now, I do want to point out here that these pseudo classes are important to keep in the correct order because they will override each other in ways that you may not expect. I recommend this order -- link, then visited, then hover, then active. You'll make sure you shouldn't have any problems with overriding styles that you might need in previously declared pseudo classes.