Join James Williamson for an in-depth discussion in this video Targeting links, part of CSS: Selectors.
- So far we've targeted elements that are coded right into the HTML as an exposed part of the dom. However, you'll often need to adjust styling based on user actions or the current state of the element. To do that, you'll use pseudo class selectors that are often referred to as user action pseudo classes. Those will be the focus of this chapter. I'm gonna start by exploring how to target link states. We have four link states that we can target: link, visited, hover, and active. Let's explore what they allow us to do as we go over them individually.
First thing I wanna do is I just wanna scroll down to the very bottom of the page where I've got an example section. We'll be styling a couple of links. Now currently we've got two links on the page, and you can see that visually right now, they look a little bit different. The top link has an underline, the bottom link doesn't, but they're both the same color. Well if we switch over to looking at this file in our code editor, we can kind of tell what's going on here. You can see at the very top of the page in the styles we currently have a default style for all of our links. The anchor element, and right now the only thing that's been set for that is color.
So as long as there's a visual difference between those two links. Well if I scroll down to the bottom of the code, you can see that the two links over on line 73 or so, one of them has an href attribute, and the other one doesn't. Now this was more common a few years back when people would use anchor elements to link to various places on the page. Now we can do that through an ID attribute so we don't really necessarilly have to have an anchor element to do that. But there still might be some times when you have an anchor element with no href attribute. You can see the default styling for the browser is not to apply text decoration, unless there's an href attribute.
Well we can also control that as well. I'm gonna go back up to my styles, and I'm gonna modify the existing selector by adding the link psuedo class selector. And right after the a with no whitespace I'm gonna type in a colon, which is proper syntax for any psuedo class selector, and I'm just gonna type in the word link. All right, I'm gonna save that, so I'll go back out to the browser and refresh and you can see now the link that has no href attribute now no longer accepts the color. So when you use a link pseudo class selector, a lot of people are a little fuzzy about what that actually does.
It's gonna target every anchor element on the page that also has an href attribute. Now there are other states that we can target as well, so the next thing I'm gonna do, I'm gonna go back into my CSS and I'm gonna run a new selector. And this one's gonna be a:visited. And again, very important for pseudo class selector syntax, no whitespace between the element and the pseudo class selector. For this one inside the CSS declaration, I'm just gonna go ahead and set the color to something a little different, in this case I'm gonna go #6C778C.
As you can see it's more of a subdued color, sort of a slight blue, and that's gonna indicate any visited links. So again, if I save this, back into my browser I'll go ahead and refresh again. And now I can click on this link which will take me to an example page and I'll go back to the demo. Now as I scroll down you can see the link now is showing the visited styling. Now I wanted to give you a quick word about visited styling. You're a little limited in terms of what you can do with visited links. The reason for that is because there's a little bit of a security issue around visited links, so a few years back browsers got together and decided that only certain styles would be allowed on visited links.
Color's one of them, background is one of them, text decoration, things like that. So for the most part, file properties you can adjust, and anything dealing with color you can adjust as well. But anything other than that, you can't. And the reason for that is that way a web site can't query what the current style limit is, to tell if you've visited a link or not, which is a little bit of a security hole. Now it just doesn't report back on that limited list of items. And you're free to style them any way that you want. Now we can also target user actions as well, so after the visited selector, I'm gonna do a:hover.
And this is gonna allow me to style the link a little bit differently when the link is being interacted with, or hovered over. Give that, I'm gonna set color, again. to something slightly different, so it's gonna be #C17532. And you can see when I hover over that it's a little bit of an orange color. And on the next line, I'm also gonna turn the text decoration off. Now a lot of people like to turn their text decoration off as a default for their links, but I'm not a huge fan of that.
The reason I'm not a huge fan of that is because underlining links is something that's really important to usability. It's sort of baked in to web pages and when you see underlined text you automatically know what to do with them. When you turn that underlining off, you have to give the user a very strong indication that what he's looking at - he or she is looking at - is something that is clickable. And then especially for accessibility reasons, it's not really a great idea to turn it off. However, turning it off on hover merely responds to user interaction, so that's not that big of a deal. So I'm gonna save that, go back out to my browser, refresh the page.
Now when I hover over the link, you see that not only it changes the color, but the text decoration goes away as well. I've got one more state I can set, to do that I'm gonna go to the next line, and I'll do a:active. An active link is any link that's currently being clicked or interacted with. So what I'm gonna do with that one is I want to make the interaction sort of visible, so I'm gonna set the color to something a little different, this time I'm just gonna use the red keyword. And then I'm gonna set the position of it to relative, and give it an offset from the top of one pixel.
So not only is that gonna turn the link color red when we click on it, it's gonna have a little bit of an offset down, which is gonna give the visual indication that the link is being interacted with. So I'm going to save this, refresh the browser, and now, just pay really close attention when I click on the link, watch what happens. Turns red, goes down, and then when I let go, the link activates. So generally it's gonna be a very quick thing, you won't notice it that often, but it's one of those nice things to do that let's people know that a link is indeed being interacted with.
That way if there is something wrong with the link, and the link's not working, that way if they click on it and it doesn't work, they know the link's actually broken because it is something they can interact with. Now you may have noticed that we did those in a very specific order. We did link first, then visited, followed by hover, and active. That order's on purpose. And the reason for that is these share exactly the same degree of specificity. So the last one that you have is gonna be able to overwrite the other ones. So let's say if we put our visited link last, because this is a visited link, it would overwrite hover and active and you wouldn't see them.
So a quick way to remember that is love hate, lvha, link, visited, hover, active. If you remember that order, you'll be fine. Now how you style your links is a very important part of any site design. Make sure that any strategy that you doc considers usability and accessibility as key parts of your overall design. If your target link states intelligently, it can actually create more functional, and beautiful projects.
- Targeting classes and IDs
- Working with group selectors
- Targeting element attributes
- String matching
- Targeting links with pseudo-class selectors
- Targeting child elements and empty elements
- Targeting parent, child, and sibling elements
- Matching patterns
- Writing efficient selectors