1
00:00:02,090 --> 00:00:03,290
We want to target

2
00:00:03,290 --> 00:00:07,300
this third list item here basically.

3
00:00:07,300 --> 00:00:10,360
You see that this list item doesn't have any kind of ID,

4
00:00:10,360 --> 00:00:13,210
or something which makes it easy for us to identify

5
00:00:13,210 --> 00:00:16,800
this item, but still, with a specific selector type,

6
00:00:16,800 --> 00:00:20,260
we have options to interact with this element.

7
00:00:20,260 --> 00:00:22,293
For that, we go back to our code,

8
00:00:23,319 --> 00:00:27,490
and here we now add a new selector type.

9
00:00:27,490 --> 00:00:30,150
We want to select a specific list item,

10
00:00:30,150 --> 00:00:33,650
therefore we use the list type selector,

11
00:00:33,650 --> 00:00:38,650
and now add a colon, and now use first of type,

12
00:00:39,000 --> 00:00:40,640
this one here.

13
00:00:40,640 --> 00:00:44,800
This rule here, this selector, will allow us to select

14
00:00:44,800 --> 00:00:49,730
the first list item inside our unordered list.

15
00:00:49,730 --> 00:00:51,400
So what this basically says is,

16
00:00:51,400 --> 00:00:55,240
I want to target the first list item I can find,

17
00:00:55,240 --> 00:00:56,910
inside the parent element,

18
00:00:56,910 --> 00:01:00,040
the parent here would be unordered list.

19
00:01:00,040 --> 00:01:02,600
As a basic example, we could, for example,

20
00:01:02,600 --> 00:01:06,560
add a different background color to this element,

21
00:01:06,560 --> 00:01:08,713
let's say, here, yellow quickly.

22
00:01:10,110 --> 00:01:13,190
With this you'll see that the first element here,

23
00:01:13,190 --> 00:01:16,103
well, has this property applied.

24
00:01:17,680 --> 00:01:20,060
Okay, nice, but not what we want,

25
00:01:20,060 --> 00:01:23,133
we want to interact with the third element in here.

26
00:01:24,040 --> 00:01:26,800
Back in our code, we can of course also achieve this,

27
00:01:26,800 --> 00:01:29,340
I'll comment out this code here though,

28
00:01:29,340 --> 00:01:31,760
because we have another selector type,

29
00:01:31,760 --> 00:01:34,200
which allows us to specifically target

30
00:01:34,200 --> 00:01:37,230
the specific element here.

31
00:01:37,230 --> 00:01:39,660
Again, we target our list item,

32
00:01:39,660 --> 00:01:41,700
but here we don't want to have

33
00:01:41,700 --> 00:01:45,600
the first item here inside our unordered list.

34
00:01:45,600 --> 00:01:49,393
Here, we want to have the nth occurrence of this item.

35
00:01:50,940 --> 00:01:54,510
Go down here to the nth of type selector.

36
00:01:54,510 --> 00:01:57,590
So, nth of type means simply that we have,

37
00:01:57,590 --> 00:02:00,440
well in our case, eight list items,

38
00:02:00,440 --> 00:02:02,260
and I can simply enter a number

39
00:02:03,160 --> 00:02:05,860
which is matching the item that I want to select.

40
00:02:05,860 --> 00:02:08,830
In our case, this would be the third item,

41
00:02:08,830 --> 00:02:12,820
so in here, in the parenthesis, we add the number three,

42
00:02:12,820 --> 00:02:16,870
and now we can again copy our background color property

43
00:02:18,300 --> 00:02:19,303
and save this.

44
00:02:20,160 --> 00:02:22,380
And going back, you'll see that now,

45
00:02:22,380 --> 00:02:25,040
this third element is selected

46
00:02:25,040 --> 00:02:27,313
and highlighted with our yellow color.

47
00:02:29,230 --> 00:02:32,480
So this is the nth of type selector.

48
00:02:32,480 --> 00:02:33,930
But how can we now make sure

49
00:02:33,930 --> 00:02:36,305
that this element here occupies,

50
00:02:36,305 --> 00:02:38,133
well, the entire space here?

51
00:02:39,000 --> 00:02:41,710
To position an element inside our grid,

52
00:02:41,710 --> 00:02:45,460
we have, again, various options to achieve this goal.

53
00:02:45,460 --> 00:02:47,900
If you think about the grid logic though,

54
00:02:47,900 --> 00:02:49,910
and what we've learned about it so far,

55
00:02:49,910 --> 00:02:52,040
we have to tell our element

56
00:02:52,040 --> 00:02:55,660
that it should occupy two columns, right?

57
00:02:55,660 --> 00:02:57,400
Because we have a two column layout,

58
00:02:57,400 --> 00:02:59,020
we cannot select this element,

59
00:02:59,020 --> 00:03:00,310
so we just have to tell it,

60
00:03:00,310 --> 00:03:03,860
well, please don't occupy this space in your column,

61
00:03:03,860 --> 00:03:07,600
but also occupy this space in the second column.

62
00:03:07,600 --> 00:03:08,703
We can do this,

63
00:03:10,280 --> 00:03:15,133
by again, going to our rule that we just created.

64
00:03:16,250 --> 00:03:21,233
And here, we'll now add the grid column property.

65
00:03:23,010 --> 00:03:26,390
The grid column property now allows us to,

66
00:03:26,390 --> 00:03:29,080
well, tell this element how many columns

67
00:03:29,080 --> 00:03:31,520
it should occupy in the end.

68
00:03:31,520 --> 00:03:33,820
In our case, this will mean that the element

69
00:03:33,820 --> 00:03:38,820
should start in column one, then we add a dash,

70
00:03:39,160 --> 00:03:40,880
and it should end where?

71
00:03:40,880 --> 00:03:43,160
Well, in column two.

72
00:03:43,160 --> 00:03:44,880
Okay, let's see if we do this,

73
00:03:44,880 --> 00:03:46,760
does this change anything?

74
00:03:46,760 --> 00:03:48,673
No, this is not working.

75
00:03:49,950 --> 00:03:52,720
Again, we selected our grid option here, right?

76
00:03:52,720 --> 00:03:55,320
This is important to have this activated.

77
00:03:55,320 --> 00:03:58,330
And if we again look at these numbers I mentioned

78
00:03:58,330 --> 00:04:00,340
at the beginning of this grid explanation,

79
00:04:00,340 --> 00:04:03,880
you see, we have the number one, the number two,

80
00:04:03,880 --> 00:04:06,240
and the number three for the columns.

81
00:04:06,240 --> 00:04:09,463
So we have two columns, but three numbers.

82
00:04:10,330 --> 00:04:13,800
This is due to the fact that our positioning

83
00:04:13,800 --> 00:04:17,870
of the elements inside the grid relies on these numbers.

84
00:04:17,870 --> 00:04:21,380
So this is position one, position two,

85
00:04:21,380 --> 00:04:24,090
so basically, the first column starts at one,

86
00:04:24,090 --> 00:04:26,990
it ends at the position two, the second column

87
00:04:26,990 --> 00:04:30,293
starts at two, and ends at the position three.

88
00:04:31,170 --> 00:04:33,760
If we follow this logic, then we would actually

89
00:04:33,760 --> 00:04:37,360
have to tell our element that it should start

90
00:04:37,360 --> 00:04:41,313
at position one and end at position three.

91
00:04:43,370 --> 00:04:46,593
Let's give this a try and change one to three.

92
00:04:48,640 --> 00:04:51,020
Yeah, now this working.

93
00:04:51,020 --> 00:04:53,940
Now we have our third element,

94
00:04:53,940 --> 00:04:57,333
and this occupies the entire space available.

95
00:04:59,240 --> 00:05:02,960
This is not the only way to achieve this though.

96
00:05:02,960 --> 00:05:06,630
We have other ways to tell the browser to do that,

97
00:05:06,630 --> 00:05:08,370
and that's just what it is.

98
00:05:08,370 --> 00:05:10,780
I just want to show you one additional way,

99
00:05:10,780 --> 00:05:12,950
which you might come across.

100
00:05:12,950 --> 00:05:16,453
Let's go back and instead of writing three here,

101
00:05:17,470 --> 00:05:20,100
I'll add a span.

102
00:05:20,100 --> 00:05:23,478
The span simply tells us, well,

103
00:05:23,478 --> 00:05:26,610
how many columns are very important?

104
00:05:26,610 --> 00:05:30,270
How many columns this element should occupy?

105
00:05:30,270 --> 00:05:32,270
If we would add three again,

106
00:05:32,270 --> 00:05:34,463
as we just had it and save this,

107
00:05:35,430 --> 00:05:38,200
well then this would be kind of,

108
00:05:38,200 --> 00:05:40,480
out of our grid, as you see it here.

109
00:05:40,480 --> 00:05:41,680
It would be way too big.

110
00:05:42,960 --> 00:05:45,593
If we go back and would add one,

111
00:05:48,030 --> 00:05:50,510
then the element would just sit where it was,

112
00:05:50,510 --> 00:05:54,530
because we just tell the element here to start,

113
00:05:54,530 --> 00:05:57,710
sit here, to start at the position one.

114
00:05:57,710 --> 00:06:00,910
So right here, and to span across well,

115
00:06:00,910 --> 00:06:04,063
one column, which is basically all the space here.

116
00:06:05,150 --> 00:06:07,683
But if it would change the one to two,

117
00:06:09,488 --> 00:06:12,250
then we would have the same result

118
00:06:12,250 --> 00:06:13,963
that we had at the beginning.

119
00:06:14,980 --> 00:06:17,720
Now as I said, this is just the basics part,

120
00:06:17,720 --> 00:06:20,290
you're only referring to columns.

121
00:06:20,290 --> 00:06:23,540
You can also interact with rows in the grid,

122
00:06:23,540 --> 00:06:26,490
and also of course, combined column and row logic,

123
00:06:26,490 --> 00:06:29,023
and do a lot more things with this grid here.

124
00:06:30,070 --> 00:06:31,430
For the purpose of this course,

125
00:06:31,430 --> 00:06:33,980
at this point though, this is all we need

126
00:06:33,980 --> 00:06:36,270
to create the desired layout.

127
00:06:36,270 --> 00:06:39,880
You hopefully also saw why this is a lot easier

128
00:06:39,880 --> 00:06:43,450
than creating this with the flex book logic.

129
00:06:43,450 --> 00:06:46,010
And with that, let's go back to the project

130
00:06:46,010 --> 00:06:48,153
and implement this on our own.