1
00:00:00,025 --> 00:00:05,912
[NOISE] There's a lot more to CSS pseudo
classes than the link and

2
00:00:05,912 --> 00:00:11,371
user action pseudo classes we covered back
in CSS basics.

3
00:00:11,371 --> 00:00:14,234
CSS actually has a number of other helpful
pseudo classes,

4
00:00:14,234 --> 00:00:18,072
beginning with structural pseudo classes,
that target elements according to

5
00:00:18,072 --> 00:00:21,960
their position on the page and their
relation to other elements.

6
00:00:21,960 --> 00:00:24,460
This is where we'll really start to see
the real power and

7
00:00:24,460 --> 00:00:27,960
flexibility behind many of the more
advanced CSS selectors.

8
00:00:27,960 --> 00:00:31,660
So let's continue with pseudo classes by
next taking a look at how to

9
00:00:31,660 --> 00:00:33,740
target first and last child elements.

10
00:00:34,750 --> 00:00:38,300
So first, we'll need to launch the new
workspace for this lesson.

11
00:00:38,300 --> 00:00:42,490
And as we can see when we click the
preview button the page consists of

12
00:00:42,490 --> 00:00:45,720
a simple list containing ten items.

13
00:00:45,720 --> 00:00:51,400
Now if we take a look at the index dot
html file we can see that the markup for

14
00:00:51,400 --> 00:00:56,460
that list is an un-ordered list containing
10 list items.

15
00:00:56,460 --> 00:01:02,710
So we can say that all 10 of these LI
elements are children of this parent UL.

16
00:01:02,710 --> 00:01:09,100
So now let's say we only want to target
and style the first item in our list.

17
00:01:09,100 --> 00:01:10,380
So item one.

18
00:01:10,380 --> 00:01:15,770
Well, we can use the first child
structural pseudo class to do just that.

19
00:01:15,770 --> 00:01:17,610
So let's go back to our work space and

20
00:01:17,610 --> 00:01:23,300
we'll bring up the style.css file right
here in the CSS directory.

21
00:01:23,300 --> 00:01:25,960
And let's create that first child selector
by

22
00:01:25,960 --> 00:01:31,390
first targeting an li element followed by
the first child pseudo-class.

23
00:01:31,390 --> 00:01:38,320
So we'll say :first-child.

24
00:01:38,320 --> 00:01:39,650
So like I said,

25
00:01:39,650 --> 00:01:45,780
this selector will target the list element
that is the first child of its parent.

26
00:01:45,780 --> 00:01:50,410
So in the rule, let's go ahead and give it
a background property.

27
00:01:51,450 --> 00:01:56,120
And we're going to set the value to #52.

28
00:01:56,120 --> 00:02:01,880
BAB3 and we're gonna set the color to
white all right.

29
00:02:01,880 --> 00:02:02,860
So let's take a look.

30
00:02:02,860 --> 00:02:06,110
We'll save our style.css file and

31
00:02:06,110 --> 00:02:11,690
when we refresh the browser notice that
the first list item in our unordered

32
00:02:11,690 --> 00:02:16,860
list is the only one with that aqua green
background color and the white text color.

33
00:02:16,860 --> 00:02:22,030
So similar to the first child pseudo
class, the last child pseudo class.

34
00:02:22,030 --> 00:02:27,130
Allows us to target an element that's the
last child of its parents.

35
00:02:27,130 --> 00:02:28,150
So let's see how that works.

36
00:02:28,150 --> 00:02:30,600
We'll go back to our style sheet and

37
00:02:30,600 --> 00:02:36,750
let's change the first child selector to
last child.

38
00:02:36,750 --> 00:02:40,640
So now when we go back to our list and
refresh the page.

39
00:02:40,640 --> 00:02:45,300
Now we can see how the styles are applied
to the very last list item only.

40
00:02:45,300 --> 00:02:50,190
And it doesn't matter how many list items
we add or remove from this unordered list,

41
00:02:50,190 --> 00:02:54,480
the very last one will always have that
background color and white text color.

42
00:02:54,480 --> 00:02:55,920
So, that's why these first and

43
00:02:55,920 --> 00:03:01,110
last child selectors can come in really
handy when styling lists or navigations.

44
00:03:01,110 --> 00:03:03,220
So, I'm gonna go back to our style sheet
and

45
00:03:03,220 --> 00:03:07,420
set this selector back to the first child
pseudoclass.

46
00:03:07,420 --> 00:03:09,420
I'm gonna go ahead and undo that.

47
00:03:09,420 --> 00:03:11,030
So, when we take a look at it again, once
again,

48
00:03:11,030 --> 00:03:14,350
that first list item, takes on those color
styles.

49
00:03:14,350 --> 00:03:19,930
But now, let's say that we want to remove
this unnecessary border here.

50
00:03:19,930 --> 00:03:21,330
In the last list item,

51
00:03:21,330 --> 00:03:25,350
well now we know that we can easily do
that with a last child pseudo class.

52
00:03:25,350 --> 00:03:26,390
No problem right?

53
00:03:26,390 --> 00:03:28,700
So let's go back to our style sheet and

54
00:03:28,700 --> 00:03:32,670
right beneath the first child selector we
just wrote.

55
00:03:32,670 --> 00:03:37,440
Let's type li colon last dash child.

56
00:03:39,140 --> 00:03:43,470
And, we'll add a border property and set
the value to none.

57
00:03:43,470 --> 00:03:45,520
So now when we save our style sheet and

58
00:03:45,520 --> 00:03:49,650
refresh the page we can see that the
bottom border is now gone.

59
00:03:49,650 --> 00:03:53,470
This is really great because instead of
creating a separate class for

60
00:03:53,470 --> 00:03:56,790
the first list item to add these colors.

61
00:03:56,790 --> 00:04:01,700
We're creating a separate class to remove
the border here in the last list item.

62
00:04:01,700 --> 00:04:05,860
We can do this in a more efficient way
with the first and

63
00:04:05,860 --> 00:04:07,810
last child pseudo classes.

64
00:04:07,810 --> 00:04:12,700
Now in a later lesson, we'll learn how to
target any combination of these child

65
00:04:12,700 --> 00:04:15,800
elements, with more specific structural
pseudo classes.