CSS dynamic pseudo classes

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.