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.