- [Instructor] Hi, this is Chris Converse,
and in this episode, we'll be helping our users
determine which links they've already visited
by making use of the visited pseudo-class in CSS.
Now, using CSS, we can alter some properties of the links
that go to destinations
that match the user's browsing history.
But for privacy reasons,
browsers will limit the properties that we can apply
using the visited pseudo-class.
So we'll make the most of what's available to us.
Now if you'd like to follow along with me,
you can download the exercise files,
and we'll start by opening the index.html file
in a text editor.
Now, with this html page open,
we have a very simple layout here,
and we're going to be focusing on this unordered list,
where I simply have the list of links
to different courses that we have here in the library.
And if you'd like to preview the way this page looks,
you can open this index.html file up in a browser,
and you'll see a layout that looks something like this.
So, here's the list.
So what we want to do is indicate to our users
whether or not they have visited any one of these URLs.
So right now, we have no CSS in place
to target the visited links,
so all of the links have the same appearance.
So to begin modifying this,
let's go back to the exercise files,
and let's open up style.css up in our text editor.
And here in the CSS file, down at the bottom,
we have our two anchor link selectors.
We have our regular anchor link,
and the anchor link with the pseudo-class of hover.
Now, there is a specific order
that you should list all of your pseudo-classes in.
You should start with the anchor tag, or a:link,
and then next, you should specify the visited pseudo-class,
then the hover pseudo-class,
and then finally, the active pseudo-class.
So we already have our anchor links specified,
we already have a hover, and in this particular episode,
we're going to focus on the visited class.
So back in our CSS class,
we're going to specify the visited pseudo-class
before the hover,
so let's come in here and add a few returns before hover.
So we'll type a:visited, put in our brackets,
hit a few spaces,
and what I want to do first
is specify a light gray text color.
So we'll type in color, colon, space, pound sign,
and then an a for red, a for green, and a for blue,
then a semi-colon.
Now, let's save our work,
let's go back to the browser, and hit reload,
and since I haven't visited any one of these URLs yet,
they all still look the same.
So I'm going to come in here,
and open Styling a Table in a new tab,
and then Add a Twitter Timeline in a new tab.
Now, if I go to each of these tabs,
we can see the course loaded up here.
I'll close each tab.
Come back to the main window,
and we'll now see that those two particular courses
are now showing up in gray type.
And if you don't see that
you may need to hit reload in your browser.
So again, this is specifying to me
that I have now visited these two individual links.
Now, the next property we're going to change
is the background color,
however, the background color cannot be changed
on the visited pseudo-class,
unless it's already been defined on the anchor tag.
So let's go back to our CSS file,
and let's come in here and define a background color.
So I'll type background-color, colon, space.
We're going to set the background color
to the same color gray as the body.
So let's come up here
and find the background property for the body.
Let's copy that, it's e5 for red, green and blue.
Then we'll paste that down here, hit a semi-colon.
Now, let's come down to the visited link,
and we'll add a background color down here,
and we're going to set the background color to white.
So pound sign and three F's.
And now, another thing to note here
is that we cannot use any semi-transparent values
for any of the properties in the visited links.
So I can't use an RGBA value here,
and specify the alpha at anything other than 100 percent.
So with this in place, let's go back to the browser.
Let's hit reload, and now we'll see
that we have background properties
that are showing up for the visited links.
But again, we are specifying the exact same background color
in the backgrounds of these other tags.
However, now that I look at this,
this actually calls more attention to the visited links
versus the links that somebody has not gone to.
So now, let's reverse this
so that the visited links aren't quite as prominent.
Now let's go back to our CSS,
let's come up to the anchor tag.
Let's change the background color here to white,
so I'll put three letter F's here.
Then I'll come in here and cut the color
that was originally there.
Let's come down here and paste it on the visited,
and then let's come in here and add a few more properties
to make these look a little bit more like buttons.
So up in the anchor tag, after background color,
let's hit a return.
Let's set a display type to inline-block.
This way, if the links wrap on a second line,
we'll cover the entire text area.
Next line, let's set padding.
We're going to set this to four pixels on the top and bottom,
and 15 pixels on the right and left.
Then, a return.
Let's come in here and set border-radius.
We're going to set that to five pixels on all four sides.
Then, a return, and let's come in here
and specify a border as well.
We'll set a one pixel, solid,
we'll use RGBA, because we're on the main anchor link,
not the visited link,
and for the RGBA values, we're going to use 255 for red,
255 for green, and 255 for blue,
and then we're going to specify .8 for the alpha.
Now, let's come down to the visited link.
After background-color, let's hit a space.
Let's come in here and specify border color.
And again, we can't use transparency here,
so we'll simply set this to white.
So a pound sign, and three F's.
And now, so with these properties in place,
let's go back to the browser.
Let's hit reload,
and so now all of the links that we have not visited
have a white background and rounded corners,
and all of the visited states
have applied our background color and our border,
and now show in gray type,
so they don't feel quite as prominent
as the links that we have not yet visited.
And so now that we're using more of a button style
instead of a list, let's go back to our CSS.
Let's find our unordered list.
After the margin properties, let's hit a space,
let's come in here and set list-style to none.
And let's come in here and set padding-left to zero.
Then, we'll go back to the browser one more time,
hit reload, and now each of our links is displaying
without a bullet in front,
and they're flush left with the rest of the content.
And so with a few simple CSS rules,
we're able to give our users an indication
on which particular links they have not yet visited
from our webpage.
So now, if you'd like to explore more techniques
for working with pseudo-classes for hyperlinks,
check out our course here in the library
on creating animated rollovers with CSS.
Or, to learn to assign background graphics to hyperlinks,
check out chapter two of our course
on creating a sortable photo gallery.
And so with that, I'll conclude this brief look
at the visited pseudo-class,
and as always, thanks for watching.