1
00:00:08,813 --> 00:00:10,270
Welcome back everybody.

2
00:00:10,270 --> 00:00:15,180
Today we're going to talk very briefly
about pseudo classes and elements.

3
00:00:15,180 --> 00:00:18,550
So we've been working with different types
of elements throughout this entire course,

4
00:00:18,550 --> 00:00:20,820
and how we can structure them and
style them.

5
00:00:20,820 --> 00:00:23,750
Well, pseudo elements are kind of
different from the other things

6
00:00:23,750 --> 00:00:28,280
we've seen before in that they are very
dependent on the DOM structure, and

7
00:00:28,280 --> 00:00:31,320
some of them are actually
dynamically populated.

8
00:00:31,320 --> 00:00:36,290
So, to be honest, you have seen this
before back when we talked about styling

9
00:00:36,290 --> 00:00:39,640
links because the links had
those different states.

10
00:00:39,640 --> 00:00:42,580
One example we used was the idea of hover.

11
00:00:42,580 --> 00:00:47,100
If you hover a link, you can change the
style to get rid of maybe the underline or

12
00:00:47,100 --> 00:00:48,630
change the color.

13
00:00:48,630 --> 00:00:51,680
So, let's talk about some of these
different types of pseudo-classes beyond

14
00:00:51,680 --> 00:00:53,580
what you can do with just a link.

15
00:00:53,580 --> 00:00:55,540
I started off with the one
we've seen before.

16
00:00:55,540 --> 00:00:58,460
You can have a link and
also a link that's been visited.

17
00:00:58,460 --> 00:01:01,460
You can also react to
different user actions.

18
00:01:01,460 --> 00:01:04,140
So, if someone's hovering
over a paragraph or

19
00:01:04,140 --> 00:01:06,840
hovering over an H1 tag,
you can still react to it.

20
00:01:06,840 --> 00:01:09,060
It doesn't just have to be a link.

21
00:01:09,060 --> 00:01:10,970
You can also have active, and

22
00:01:10,970 --> 00:01:15,470
active is when you're holding the mouse
button down over some sort of element.

23
00:01:15,470 --> 00:01:17,170
And the last one is focus.

24
00:01:17,170 --> 00:01:19,620
Focus would be when someone's
tabbing through the page

25
00:01:19,620 --> 00:01:22,350
you can put focus down
on each one of these.

26
00:01:22,350 --> 00:01:25,650
Finally, one that makes a lot of sense and
you've probably seen before

27
00:01:25,650 --> 00:01:29,870
is that you can dial the pseudo-classes
of forms or interfaces.

28
00:01:29,870 --> 00:01:31,720
If the check box has been clicked or

29
00:01:31,720 --> 00:01:34,710
checked off, you can see that
sometimes they make it yellow.

30
00:01:34,710 --> 00:01:38,130
Or if you've ever been to a site and
you're not allowed to type something in

31
00:01:38,130 --> 00:01:41,520
until you type something in a box above,
higher in, they tend to gray it out.

32
00:01:41,520 --> 00:01:45,360
So the way you would go ahead and
do this is you could say, you know what?

33
00:01:45,360 --> 00:01:51,585
If someone hovers over my paragraph,
I want to just do a border.

34
00:01:51,585 --> 00:01:58,102
Border:1 px.

35
00:01:58,102 --> 00:02:01,681
Now, even though there's no place
on the DOM where they have p:hover,

36
00:02:01,681 --> 00:02:04,449
it should work for
you when you put that styling rule in.

37
00:02:05,570 --> 00:02:09,580
So, you can also style based
on the structural position

38
00:02:09,580 --> 00:02:10,790
of the different elements.

39
00:02:10,790 --> 00:02:14,000
You have first-child,
last-child, nth-child.

40
00:02:14,000 --> 00:02:16,670
The way that one works is you put
a number in to say the fifth child or

41
00:02:16,670 --> 00:02:17,260
the tenth child.

42
00:02:17,260 --> 00:02:19,460
You can have only child.

43
00:02:19,460 --> 00:02:23,329
You also have other different things
such as first-of-type, last-of-type,

44
00:02:23,329 --> 00:02:24,660
only-of-type.

45
00:02:24,660 --> 00:02:27,379
And again, you just have the element,
the colon, and

46
00:02:27,379 --> 00:02:31,530
then the name of the pseudo-class
that you want to style.

47
00:02:31,530 --> 00:02:34,520
Pseudo elements aren't
necessarily part of the DOM, but

48
00:02:34,520 --> 00:02:38,790
they can be used to style specific or
unique parts of the page.

49
00:02:38,790 --> 00:02:42,630
So, some examples might if you have a
paragraph and you wanna put in that fancy

50
00:02:42,630 --> 00:02:46,910
first letter with a different font, you
can use the first letter pseudo element.

51
00:02:46,910 --> 00:02:51,540
Same with the first line, you can
generate things to show up before or

52
00:02:51,540 --> 00:02:52,710
after elements.

53
00:02:52,710 --> 00:02:56,030
A lot of times if you're styling
something like credit card information,

54
00:02:56,030 --> 00:02:58,920
you can go ahead and put in
the different types of credit cards but

55
00:02:58,920 --> 00:03:02,310
have a little before that says,
and hey, put a picture in here.

56
00:03:02,310 --> 00:03:05,510
You can also style just fragments
of different selections.

57
00:03:07,120 --> 00:03:11,020
Now I didn't give you much code when we
went through here because really using

58
00:03:11,020 --> 00:03:15,850
pseudo classes and pseudo elements is very
unique to the page you're going to make.

59
00:03:15,850 --> 00:03:19,810
So later when we talk about tables, keep
an eye out because I'm going to be using

60
00:03:19,810 --> 00:03:22,480
a lot of pseudo classes and
pseudo elements there.

61
00:03:22,480 --> 00:03:25,130
It's really important to realize that
I'm not going to be able to cover

62
00:03:25,130 --> 00:03:27,570
every combination of
everything we learn about.

63
00:03:27,570 --> 00:03:30,450
But I do want to give you the tools so
that you can go out and

64
00:03:30,450 --> 00:03:33,668
investigate how you can add some
cool new styles to your page.

65
00:03:33,668 --> 00:03:34,231
Veľa šťastia!