CSS Selectors in Depth
Identify Interactive HTML Elements with CSS Link Pseudo Classes
The interactive pseudo-classes for links (and buttons) allow us to make sure the user knows what elements on the page are interactive and that they can use them to navigate the website.
Instructor: [00:00] The majority of the time, all you need are basic selectors, like the class and element selectors, but there are times when more advanced selectors will save you from adding unnecessary HTML or JavaScript to accomplish the styling and interaction you need.
[00:13] The most basic or common example of interactive styling are state pseudo classes on links. They're called pseudo classes because you don't define anything specifically in the DOM to make them work.
[00:24] Here in the HTML, we have an unordered list with some links, a button. The last one looks like a link because it's also an a tag, but it's actually a named anchor because it doesn't have an HREF or a URL that it's going to.
[00:36] Let's go ahead and style some of these links. If I want to remove the underlines from all of the links, I can do that by targeting the a and changing the text decoration to none.
[00:47] If I want to change just the links -- notice that they're blue, but the last one isn't -- I can do that using the link pseudo class. I can target the links and then change the color of the text to be green.
[01:00] One of these is purple because it is a link that I visited. If I want to change the visited state, I can go ahead and use the visited pseudo class. Then I can change the color to something like orange.
[01:12] I can add a hover state to the links by using the hover pseudo class. Here I'll add the underline back when we hover over the links, using text decoration.
[01:20] Notice the last a tag also gets this hover state even though it isn't a link. To be more specific, we can stack the link and hover pseudo classes or even use the HREF attribute selector to just target tags with an HREF property.
[01:38] Links also have an active state, which is triggered when the link is being activated or, in this example, when the mouse is being held down while hovering over the link. Here I'm going to go ahead and change the border, give it one pixel, and make it solid. When I hover over it and I click the button, you can see that border shows up.
[01:57] It's important to know that order matters here. CSS is designed to have a hierarchy. You can override these states or pseudo classes if things get out of order. They'll do things that you may not expect. It's recommended, if you're going to use any of these pseudo classes, to use link, visited, hover, active, in that order.
[02:15] Links aren't the only elements with these pseudo classes. If I make a generic hover pseudo class and add a green border to it, it'll trigger on all the elements on the page.
[02:30] I can be more specific by adding the a tag to the front of it, but that also triggers that named anchor. I can add the HREF attribute selector or, in this case, I'll stack it with the link selector. If I want to also include the button in the same hover state, I can use a comma to combine selectors in the same rule set.
[02:53] None of these pseudo classes were defined by us by changing the DOM. They come from the browser and the user's interactions. There are also some form pseudo classes, but these link pseudo classes are the ones that are most commonly used when you're styling a website.