We're back with the webpage that
links to lists of famous paintings.

The CSS starts with a rule that sets a font family
for everything in the body to sans-serif.

Then a rule for group selectors that 
changes the font family of the s and s.

And then we have a bunch of rules that you probably 
haven't seen before and might look a bit funny.

They all start with "a", and then a colon,
and then a word.

What does that colon mean? 
What could those rules be selecting for?

Well, all of those things that start with 
a colon are called pseudo-classes.

A pseudo-class is used to select elements based on information
that's not really part of the webpage structure

or just can't be expressed using 
other selectors.

In this page, I'm using pseudo-classes to
style the links based on their state.

The 'link' pseudo-class will select all the links
on the page that the user has not visited yet.

Which most browsers default to blue.

The 'visited' pseudo-class will select 
all the links that the user has visited.

Which most browsers default to purple.

If we really want, we can 
change the colors.

But you should have a good reason 
for doing that.

People get used to associating blue and purple 
with things they have and haven't seen.

And people like knowing 
which pages they've visited.

So you should not take that away
without a good reason.

So, I'm just going to delete these two rules.

Because I don't think it's personally 
a good idea to be messing with them.

The next rule is a fun one though: 'a:hover'.

The 'hover' pseudo-class will select an element 
as long as the user is currently mousing over it.

So the properties will only get applied then.

Try pausing this talk-through now 
and hover over the links to see what happens.

Go ahead, I'll wait. Hover hover 
hover hover...

Did you see that background change color? 
It's a pretty cool effect.

And you can actually use that 'hover' pseudo-class 
on any element, not just links.

Just remember that it won't work 
for all devices.

Like if you're on a phone, you don't have a way of hovering. 
You just have touch or no touch.

It's great to have a hover effect as a bonus, but don't rely on it.

What about these last two here? 
They're similar to 'hover'.

They depend on what the user is currently doing.

The 'active' pseudo-class selects elements 
that are currently being activated.

Like for a link, if the user is currently pressing down on the link, 
right before they actually change pages.

The 'focus' pseudo-class selects elements 
that currently have the focus

which usually happens if you use your tab key 
to tab around an interface.

Pause the talk-through now and try pressing down on the links 
and tabbing around them, and see what happens.

Did you see the background 
change color when you did that?

I chose the same property for 'hover', 'active', and 'focus',
because they're all sort of the same thing.

The user is targeting the link somehow.

Many web designers use the same properties 
across all three states for that reason.

What if I decided I want to change 
the color of that background?

Well, I can either go into each of them 
and change each one of them

Or I could do what we just learned.

I can group the selectors by putting them 
all into one rule, separated by commas.

So we'll just put our comma after here, 
say "a:active", then "a:focus".

Now I can delete these two and change 
all three of those at once. Nice.

These are the first pseudo-classes we've 
shown you here, but they're not the only ones.

You can search for CSS pseudo-classes 
on the Internet to find out about others

or wait for us to teach more here.