Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this movie, I want to take a closer look at pseudo-class selectors, starting with the most common pseudo-class selectors, the dynamic group of pseudo-class selectors that allows us to style links and link states, and the target pseudo-class selector. So I have the pseudo-class.htm file open from the 02_14 folder, and again there is not a lot going on here in this page. Let's just take a quick look at the code. We have an unordered list with four links into it: one's going to a page called products, about us, contact us, and sign up! None of these pages really exist except for the products page.
We don't have to open it, but it is going to allow us to check out the whole visited link thing. And we have another paragraph that has a link inside of it, and this one doesn't have an href attribute. It just has an id. So this would be more of an anchor link that allows us to link to certain section of a page. That's a pretty common technique. And we have a pseudo-class selector that allows us to target those elements as well. So let's go ahead and get into writing our styles. And the first thing I want to do is I'm going to scroll up, because I've got a rule here that doesn't have a selector and this is going to be sort of our basic default link styling if you will.
So I'm just going to go right up there and add the very simple element selector a, so that I'll target any link on the page. I want to save that, and I'm just going to preview that in one of my browsers. And when I do that, I can see that it's targeting all of our links, even this sort of anchor target element that we don't really want to have that styling. So right now these guys all have the styling. They're looking nice. It looks more like a menu, but I don't want this to have that styling at all. Well, one of the things that you can do--I'm just going to jump back into my code real quick-- well one of the things that you can do is you can use a pseudo-class selector to limit it to just actual active links.
So I'm going to type in after the a:-- so there is our pseudo-class--link. Now very important here for the syntax, there is no whitespace between these. So normally there is a lot of combinators where I've told you hey, spacing doesn't really matter; it does matter in this case. So we want to make sure that there is no whitespace there. Now what does this do? Well, link basically says hey, make sure you're targeting any actual links on the page, and by link it means that any link that has an href attribute. You'll note that the anchor link down here does not.
So if I save this and preview this in my browser again--I'm just going to refresh this-- you can see that now this anchor link down here is not getting that styling anymore, but these links that have the href attribute are still getting that styling. Let's take a look at some of the other pseudo-class selectors that we can use. So directly underneath that one, in this little add styles here area, I'm going to create another pseudo-class selector with a, so a:visited, and I'm just going to go ahead and change its color to black.
Now we're going to go ahead and style these and then I'm going to talk about these link pseudo-class selectors, because there are a couple of things that you need to know about them that are very important. Next, when I am done, I'm going to go to a and then hover, and we'll go ahead and give that one a background of orange. And then after that, we're going to do a:active, and for that one we're going to give it a background of green. So let's talk about these really quickly. So basically if you learn nothing more about pseudo-class selectors over the course of learning CSS, I guarantee that you'll at least learn these four: link, visited, hover, and active.
Obviously they refer to link states: link referring to any link with an href attribute; visited referring to any link that the user of the page has already visited; hover, any link that's being actively hovered over; and the active link is a link that is either in focus or is currently being clicked on. Now the order in which you write these is very important. As a matter of fact, some people have come up with a mnemonic device of love-hate, so LVHA for link, visited, hover, and active, and that's the order that you want those in if you're going to write them separately.
For example, if you put visited after hover then the visited styling will overwrite the hover styling. So you want to make sure they're in that order if you're going to use them. A lot of people group these together. They'll group the link and the visited styles together, and the hover and the active styles together if they want those to be the same. Now one thing about visited styles as well: browsers, over the last couple of years, realized that there was a little bit of a security leak with visited links, that browsers and sites could detect where a user has been and what the user has been doing through the visited link state, so they hide a lot of that now from the active user.
About the only thing that you can still do with visited link styling without getting into the browser's behavior itself is styling the color. That's about the only attribute that's left to us. So I'm going to go ahead and save this and go back into my browser and just refresh the page, or preview it, either way. And now I noticed that when I hover over the links I get that orange background color--that's for my hover styling. If I click on a link, you'll notice if I click and hold the mouse down, it just becomes green. Let's say I visit a page and I clicked on the Products page on purpose, because that one is actually in the folder. And now if I hit the Back button, notice that it's getting that visited styling so that black text is there because of the visited styling.
So, all of those are working. We get green when we're clicking on link, and then if we've visited the link, we get black, and we're getting orange for the hover. Now in a lot of menus you don't want to do this, where you're actually showing the visited styling. That's why a lot of people will go ahead and group the visited styling along with the link styling, so that nothing really changes. In some cases, it's okay to just leave it off. There really isn't a default visited style, except for browsers have a default visited color of purple. You've probably seen that where you've clicked on a link, gone back, and then underlined blue text changes to purple.
So a lot of people will group visited and link styles together just to prevent that purple from showing up. Okay, there's one more pseudo-class selector that I want to take a look at, and it's target. And it can be a little hard to demonstrate exactly how and why this works, so let's take a look at it. I'm going to go back into our code and just below the a:active, I'm going to create one more selector. I'm going to type in a:target, and for that styling, I'm just going to change the color to red. All right! Now I'm going to save this. And target is a very, very specific type of selector, so if I preview this again in the browser and refresh my page, you can see nothing happens.
I'm not getting that red styling, although I am getting a hover styling, which is nice, but that's really all I'm getting. Okay, so target has more to do with the URL than it does the actual page itself. You may have done this before where you've had an ability to click and jump further down the page, or maybe even click on an external link and take you to a certain section of the page. That's typically using the sort of anchor link. And in the URL, the URL has given a specific target or a specific focus. We do that in a URL query string by using the pound symbol.
So, after pseudo-class.htm in my address bar up here, if I type in #target, that's targeting any element on the page with an id of target. And if I hit Return, you can see that now the word target is now getting that red styling because it is now the target of the URL. And just so that you're not confused with that name, the ID could be anything. So if I come back in here and I change the ID to section1 and save that and if I go back to my browser and change this to section1, you'll notice that we still get the styling.
So be sure to read through the pseudo- class selectors section of the Selections Level 3 Specification and keep up to date with its changes and the changes that are being made to browser implementation.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.