2.5 Working With Links

Hello, and welcome back to the CSS of the future. In this lesson you will take a look at a couple of proposed pseudo-classes for dealing with links. First, you will take a look at the any link pseudo-class which is designed to target every link on the page. Then you will learn about the proposed way for targeting local links. In the level four specification. So here we have a very, very simple page that links start.html, we just have a list of links. A couple of them are local links, a couple of them link to an external website, a couple of them as you can see have been visited. We've clicked on matches.html and has.html which is why the links are now purple instead of blue. Well if we go to Finder. First of all, you can see in your selectors folder, we're starting with links start.html and let's open that up in brackets. And here we go. So again, it's just simple unordered list with some list items that contain links. So let's see what would happen if we just target all anchor tags. And let's set the color to red and then we'll save that as links.html, so we don't write over the start file. And then in our browser, we'll jump over to links.html and that will turn all of our links red. Now you're probably familiar with a couple of the CSS pseudo-classes. For example, we have :link. Let's see what happens if we just target :link. So maybe a :link color is red. Save that, and refresh. And now you can see that only our top two have been colored red. And the reason for that is that there's a difference between the link pseudo class and the visited pseudo-class. So the link pseudo-class basically just targets any link that has not been visited yet. And the colon visited pseudo-class does just the opposite, it targets all links that have been visited or clicked on. So with the link class again, we're just targeting all links that have not been visited yet. If were to change this to :visited, color red. Then we should see the opposite happening. Refresh. And now we see that our top two links are back to the default blue color and our two visited links are now red. Well, another way that we could target all links and visited links other than just typing a, as we could type a:visited and a:link. Save that, refresh, and now it targets all of them. But in the level four specification there's another suggested way to do this. And that's by typing a:any-link and keep in mind, we don't have to type a here, we kinda spell that right thou, there we go, we don't have to type in a here, we can just say any-link. And we can set the color to red. So let's comment out this first one and we're gonna see that this is actually gonna be a little disappointing. We'll save that and refresh. And we'll see that it doesn't work, because again this is another pseudo-class that is not fully supported. In fact, it's not supported in any major browsers as of the time of this recording. So this particular pseudo-class doesn't work yet, but when it does work, I think it's gonna have its uses. So let's just actually leave that like it is and let's take a look at another pseudo-class that we have available to us for working with links. And there really is no working equivalent for this. So there's no way to test this, but the level four specification has a suggested way for dealing with local links as opposed to links that go off to some other website. And the way it looks is something like this. We would have, whatever selector we want and anchor tag, and then :local-link. Easy enough. And then, inside that we could maybe make our text bold. So it's font-weight, we'll set that to bold. As I mentioned, this is not going to work. We'll save that and refresh, and nothing changes here. But ideally what would change is all of our local links, ie these two bottom ones would now have bold text. So that's another suggested or another selector that's currently in the level four specification or the current draft of it, anyways. If it makes it further, we might start to see some support for that in our browsers in the near future. So thank you for watching, and I'll see you in the next lesson.