0:00:00.831,0:00:05.211
We're back with the webpage that[br]links to lists of famous paintings.

0:00:05.211,0:00:11.743
The CSS starts with a rule that sets a font family[br]for everything in the body to sans-serif.

0:00:11.743,0:00:17.114
Then a rule for group selectors that [br]changes the font family of the s and s.

0:00:17.114,0:00:24.737
And then we have a bunch of rules that you probably [br]haven't seen before and might look a bit funny.

0:00:24.737,0:00:29.967
They all start with "a", and then a colon,[br]and then a word.

0:00:29.967,0:00:35.504
What does that colon mean? [br]What could those rules be selecting for?

0:00:35.504,0:00:41.065
Well, all of those things that start with [br]a colon are called pseudo-classes.

0:00:41.065,0:00:48.002
A pseudo-class is used to select elements based on information[br]that's not really part of the webpage structure

0:00:48.002,0:00:51.826
or just can't be expressed using [br]other selectors.

0:00:51.826,0:00:57.430
In this page, I'm using pseudo-classes to[br]style the links based on their state.

0:00:57.430,0:01:03.449
The 'link' pseudo-class will select all the links[br]on the page that the user has not visited yet.

0:01:03.449,0:01:06.582
Which most browsers default to blue.

0:01:06.582,0:01:10.405
The 'visited' pseudo-class will select [br]all the links that the user has visited.

0:01:10.405,0:01:13.294
Which most browsers default to purple.

0:01:13.294,0:01:16.121
If we really want, we can [br]change the colors.

0:01:16.121,0:01:18.083
But you should have a good reason [br]for doing that.

0:01:18.083,0:01:22.954
People get used to associating blue and purple [br]with things they have and haven't seen.

0:01:22.954,0:01:25.549
And people like knowing [br]which pages they've visited.

0:01:25.549,0:01:28.474
So you should not take that away[br]without a good reason.

0:01:28.474,0:01:31.092
So, I'm just going to delete these two rules. [br]

0:01:31.092,0:01:34.221
Because I don't think it's personally [br]a good idea to be messing with them.

0:01:34.221,0:01:38.972
The next rule is a fun one though: 'a:hover'.

0:01:38.972,0:01:46.138
The 'hover' pseudo-class will select an element [br]as long as the user is currently mousing over it.

0:01:46.138,0:01:48.408
So the properties will only get applied then.

0:01:48.408,0:01:53.353
Try pausing this talk-through now [br]and hover over the links to see what happens.

0:01:53.353,0:01:57.406
Go ahead, I'll wait. Hover hover [br]hover hover...

0:01:57.406,0:02:01.165
Did you see that background change color? [br]It's a pretty cool effect.

0:02:01.165,0:02:05.073
And you can actually use that 'hover' pseudo-class [br]on any element, not just links.

0:02:05.073,0:02:07.662
Just remember that it won't work [br]for all devices.

0:02:07.662,0:02:11.421
Like if you're on a phone, you don't have a way of hovering. [br]You just have touch or no touch.

0:02:11.421,0:02:15.298
It's great to have a hover effect as a bonus, but don't rely on it.

0:02:15.298,0:02:20.503
What about these last two here? [br]They're similar to 'hover'.

0:02:20.503,0:02:23.067
They depend on what the user is currently doing.

0:02:23.067,0:02:27.191
The 'active' pseudo-class selects elements [br]that are currently being activated.

0:02:27.191,0:02:34.076
Like for a link, if the user is currently pressing down on the link, [br]right before they actually change pages.

0:02:34.076,0:02:38.614
The 'focus' pseudo-class selects elements [br]that currently have the focus

0:02:38.614,0:02:42.394
which usually happens if you use your tab key [br]to tab around an interface.

0:02:42.394,0:02:47.744
Pause the talk-through now and try pressing down on the links [br]and tabbing around them, and see what happens.

0:02:47.744,0:02:51.497
Did you see the background [br]change color when you did that?

0:02:51.497,0:02:56.415
I chose the same property for 'hover', 'active', and 'focus',[br]because they're all sort of the same thing.

0:02:56.415,0:02:58.842
The user is targeting the link somehow.

0:02:58.842,0:03:03.655
Many web designers use the same properties [br]across all three states for that reason.

0:03:03.655,0:03:07.114
What if I decided I want to change [br]the color of that background?

0:03:07.114,0:03:13.552
Well, I can either go into each of them [br]and change each one of them

0:03:13.552,0:03:15.885
Or I could do what we just learned.

0:03:15.885,0:03:20.140
I can group the selectors by putting them [br]all into one rule, separated by commas.

0:03:20.140,0:03:27.214
So we'll just put our comma after here, [br]say "a:active", then "a:focus".

0:03:27.214,0:03:37.418
Now I can delete these two and change [br]all three of those at once. Nice.

0:03:37.418,0:03:41.531
These are the first pseudo-classes we've [br]shown you here, but they're not the only ones.

0:03:41.531,0:03:45.123
You can search for CSS pseudo-classes [br]on the Internet to find out about others

0:03:45.123,0:03:48.653
or wait for us to teach more here.