1
00:00:00,831 --> 00:00:05,211
We're back with the webpage that
links to lists of famous paintings.

2
00:00:05,211 --> 00:00:11,743
The CSS starts with a rule that sets a font family
for everything in the body to sans-serif.

3
00:00:11,743 --> 00:00:17,114
Then a rule for group selectors that 
changes the font family of the s and s.

4
00:00:17,114 --> 00:00:24,737
And then we have a bunch of rules that you probably 
haven't seen before and might look a bit funny.

5
00:00:24,737 --> 00:00:29,967
They all start with "a", and then a colon,
and then a word.

6
00:00:29,967 --> 00:00:35,504
What does that colon mean? 
What could those rules be selecting for?

7
00:00:35,504 --> 00:00:41,065
Well, all of those things that start with 
a colon are called pseudo-classes.

8
00:00:41,065 --> 00:00:48,002
A pseudo-class is used to select elements based on information
that's not really part of the webpage structure

9
00:00:48,002 --> 00:00:51,826
or just can't be expressed using 
other selectors.

10
00:00:51,826 --> 00:00:57,430
In this page, I'm using pseudo-classes to
style the links based on their state.

11
00:00:57,430 --> 00:01:03,449
The 'link' pseudo-class will select all the links
on the page that the user has not visited yet.

12
00:01:03,449 --> 00:01:06,582
Which most browsers default to blue.

13
00:01:06,582 --> 00:01:10,405
The 'visited' pseudo-class will select 
all the links that the user has visited.

14
00:01:10,405 --> 00:01:13,294
Which most browsers default to purple.

15
00:01:13,294 --> 00:01:16,121
If we really want, we can 
change the colors.

16
00:01:16,121 --> 00:01:18,083
But you should have a good reason 
for doing that.

17
00:01:18,083 --> 00:01:22,954
People get used to associating blue and purple 
with things they have and haven't seen.

18
00:01:22,954 --> 00:01:25,549
And people like knowing 
which pages they've visited.

19
00:01:25,549 --> 00:01:28,474
So you should not take that away
without a good reason.

20
00:01:28,474 --> 00:01:31,092
So, I'm just going to delete these two rules. 


21
00:01:31,092 --> 00:01:34,221
Because I don't think it's personally 
a good idea to be messing with them.

22
00:01:34,221 --> 00:01:38,972
The next rule is a fun one though: 'a:hover'.

23
00:01:38,972 --> 00:01:46,138
The 'hover' pseudo-class will select an element 
as long as the user is currently mousing over it.

24
00:01:46,138 --> 00:01:48,408
So the properties will only get applied then.

25
00:01:48,408 --> 00:01:53,353
Try pausing this talk-through now 
and hover over the links to see what happens.

26
00:01:53,353 --> 00:01:57,406
Go ahead, I'll wait. Hover hover 
hover hover...

27
00:01:57,406 --> 00:02:01,165
Did you see that background change color? 
It's a pretty cool effect.

28
00:02:01,165 --> 00:02:05,073
And you can actually use that 'hover' pseudo-class 
on any element, not just links.

29
00:02:05,073 --> 00:02:07,662
Just remember that it won't work 
for all devices.

30
00:02:07,662 --> 00:02:11,421
Like if you're on a phone, you don't have a way of hovering. 
You just have touch or no touch.

31
00:02:11,421 --> 00:02:15,298
It's great to have a hover effect as a bonus, but don't rely on it.

32
00:02:15,298 --> 00:02:20,503
What about these last two here? 
They're similar to 'hover'.

33
00:02:20,503 --> 00:02:23,067
They depend on what the user is currently doing.

34
00:02:23,067 --> 00:02:27,191
The 'active' pseudo-class selects elements 
that are currently being activated.

35
00:02:27,191 --> 00:02:34,076
Like for a link, if the user is currently pressing down on the link, 
right before they actually change pages.

36
00:02:34,076 --> 00:02:38,614
The 'focus' pseudo-class selects elements 
that currently have the focus

37
00:02:38,614 --> 00:02:42,394
which usually happens if you use your tab key 
to tab around an interface.

38
00:02:42,394 --> 00:02:47,744
Pause the talk-through now and try pressing down on the links 
and tabbing around them, and see what happens.

39
00:02:47,744 --> 00:02:51,497
Did you see the background 
change color when you did that?

40
00:02:51,497 --> 00:02:56,415
I chose the same property for 'hover', 'active', and 'focus',
because they're all sort of the same thing.

41
00:02:56,415 --> 00:02:58,842
The user is targeting the link somehow.

42
00:02:58,842 --> 00:03:03,655
Many web designers use the same properties 
across all three states for that reason.

43
00:03:03,655 --> 00:03:07,114
What if I decided I want to change 
the color of that background?

44
00:03:07,114 --> 00:03:13,552
Well, I can either go into each of them 
and change each one of them

45
00:03:13,552 --> 00:03:15,885
Or I could do what we just learned.

46
00:03:15,885 --> 00:03:20,140
I can group the selectors by putting them 
all into one rule, separated by commas.

47
00:03:20,140 --> 00:03:27,214
So we'll just put our comma after here, 
say "a:active", then "a:focus".

48
00:03:27,214 --> 00:03:37,418
Now I can delete these two and change 
all three of those at once. Nice.

49
00:03:37,418 --> 00:03:41,531
These are the first pseudo-classes we've 
shown you here, but they're not the only ones.

50
00:03:41,531 --> 00:03:45,123
You can search for CSS pseudo-classes 
on the Internet to find out about others

51
00:03:45,123 --> 00:03:48,653
or wait for us to teach more here.