1
00:00:01.01 --> 00:00:02.07
- [Chris] Hi, this is Chris
Converse, and in this episode

2
00:00:02.07 --> 00:00:04.07
we're going to make use
of the first-of-type

3
00:00:04.07 --> 00:00:07.09
and last-of-type properties in CSS.

4
00:00:07.09 --> 00:00:09.06
This allows us to select and style

5
00:00:09.06 --> 00:00:12.06
specific instances of
elements within a parent.

6
00:00:12.06 --> 00:00:13.07
And this is a great technique

7
00:00:13.07 --> 00:00:14.09
for styling the beginning and ending

8
00:00:14.09 --> 00:00:16.09
of a string of items, such as links,

9
00:00:16.09 --> 00:00:19.06
which is what we're going
to be doing in this episode.

10
00:00:19.06 --> 00:00:21.01
Now, what I like most about this selector,

11
00:00:21.01 --> 00:00:23.04
is that if enough another
element is in the same parent,

12
00:00:23.04 --> 00:00:25.07
it will have no effect on this selector,

13
00:00:25.07 --> 00:00:28.07
because this selector is
based on an element's type.

14
00:00:28.07 --> 00:00:30.01
So if you'd like to follow along with me,

15
00:00:30.01 --> 00:00:31.06
download the exercise files

16
00:00:31.06 --> 00:00:35.03
and let's open index.html
file in a text editor.

17
00:00:35.03 --> 00:00:36.09
And now with the html file open,

18
00:00:36.09 --> 00:00:39.00
down here we're going to be
focusing on the anchor links

19
00:00:39.00 --> 00:00:42.06
that are inside of a div
with a class of more_info.

20
00:00:42.06 --> 00:00:44.03
So we're going to be
using the CSS selectors

21
00:00:44.03 --> 00:00:46.03
to pick out the first item here,

22
00:00:46.03 --> 00:00:47.08
and the last item,

23
00:00:47.08 --> 00:00:50.05
but we don't want to add any
additional html into here.

24
00:00:50.05 --> 00:00:52.03
I don't want to add any ids or classes,

25
00:00:52.03 --> 00:00:55.03
we're going to use CSS
to pick out those items.

26
00:00:55.03 --> 00:00:56.07
Now if you want to preview the page

27
00:00:56.07 --> 00:00:57.06
we're currently looking at,

28
00:00:57.06 --> 00:01:00.07
you can open the index.html
file up in a browser,

29
00:01:00.07 --> 00:01:02.04
and you can see these
three links showing up here

30
00:01:02.04 --> 00:01:04.09
after the content.

31
00:01:04.09 --> 00:01:06.04
So to begin styling these, let's go back

32
00:01:06.04 --> 00:01:10.02
to the exercise files,
let's find style.css,

33
00:01:10.02 --> 00:01:12.08
let's open this in our text editor,

34
00:01:12.08 --> 00:01:16.05
and in the CSS let's
scroll down to the bottom.

35
00:01:16.05 --> 00:01:18.09
And so down here, we can see
we're targeting the more_info

36
00:01:18.09 --> 00:01:20.09
container which has the links inside.

37
00:01:20.09 --> 00:01:22.01
We're actually going to
make a small adjustment

38
00:01:22.01 --> 00:01:25.06
to the more_info class later.

39
00:01:25.06 --> 00:01:29.08
So scroll down after the
more_info with the hover class,

40
00:01:29.08 --> 00:01:31.09
and let's come in here and
target the first anchor link

41
00:01:31.09 --> 00:01:35.04
inside of the article more_info class.

42
00:01:35.04 --> 00:01:39.08
So type article .more_info

43
00:01:39.08 --> 00:01:41.03
then a space,

44
00:01:41.03 --> 00:01:44.05
then an anchor tag and a colon,
and so we're going to put in

45
00:01:44.05 --> 00:01:47.07
the first-of-type, which is
a structural pseudo-class,

46
00:01:47.07 --> 00:01:49.08
which basically means
that that item is selected

47
00:01:49.08 --> 00:01:52.04
based on its relationship
to, not only its parent,

48
00:01:52.04 --> 00:01:54.02
but its siblings.

49
00:01:54.02 --> 00:01:55.05
So after the colon, we'll type

50
00:01:55.05 --> 00:02:00.02
first-of-type,

51
00:02:00.02 --> 00:02:01.07
then a space,

52
00:02:01.07 --> 00:02:04.06
put in our brackets, split this open,

53
00:02:04.06 --> 00:02:06.03
and the first property we'll set here

54
00:02:06.03 --> 00:02:08.05
will be the border top left property.

55
00:02:08.05 --> 00:02:13.03
I want to have the first and
last links have rounded corners.

56
00:02:13.03 --> 00:02:14.02
So I'll type

57
00:02:14.02 --> 00:02:19.05
border-top-left-radius

58
00:02:19.05 --> 00:02:22.09
: space, and we're going
to set this to 16px.

59
00:02:22.09 --> 00:02:24.08
And now if we go back to the
browser and preview this,

60
00:02:24.08 --> 00:02:27.06
you'll see that the first
anchor link in the more_info div

61
00:02:27.06 --> 00:02:30.03
is the only one that has
the top left rounded corner.

62
00:02:30.03 --> 00:02:32.02
The other ones have square corners.

63
00:02:32.02 --> 00:02:35.00
So let's go back to our CSS,
let's duplicate that property,

64
00:02:35.00 --> 00:02:37.01
let's change border-top-left

65
00:02:37.01 --> 00:02:41.06
to border-bottom-left,

66
00:02:41.06 --> 00:02:43.05
and now in the browser we
have a nice rounded endcap

67
00:02:43.05 --> 00:02:46.00
on that first item.

68
00:02:46.00 --> 00:02:47.06
Let's go back to our CSS,

69
00:02:47.06 --> 00:02:49.08
let's come in here and
copy this entire roll,

70
00:02:49.08 --> 00:02:52.05
so if you returns, let's paste it.

71
00:02:52.05 --> 00:02:55.04
For the second instance,
let's change first-of-type

72
00:02:55.04 --> 00:02:59.03
to last-of-type.

73
00:02:59.03 --> 00:03:01.08
And let's change border-top-left-radius

74
00:03:01.08 --> 00:03:06.04
to border-top-right-radius.

75
00:03:06.04 --> 00:03:07.07
And then for the second one,

76
00:03:07.07 --> 00:03:10.04
we'll change this to bottom-right.

77
00:03:10.04 --> 00:03:11.06
And now in the browser,
we'll see that we have

78
00:03:11.06 --> 00:03:14.02
our first link with rounded
corners on the top left

79
00:03:14.02 --> 00:03:17.00
and bottom left, and the
last link has rounded corners

80
00:03:17.00 --> 00:03:19.03
on the top right and bottom right.

81
00:03:19.03 --> 00:03:20.04
So now with these changes in place,

82
00:03:20.04 --> 00:03:23.00
the entire element now
has these rounded corners,

83
00:03:23.00 --> 00:03:25.02
so I want to change a
few of the optics here.

84
00:03:25.02 --> 00:03:26.05
I want to add a little bit more padding

85
00:03:26.05 --> 00:03:29.02
on the right of the type on the last item,

86
00:03:29.02 --> 00:03:31.03
and the left of the
type on the first item,

87
00:03:31.03 --> 00:03:32.03
and I also want to align this

88
00:03:32.03 --> 00:03:34.07
so that the rounded corner here

89
00:03:34.07 --> 00:03:36.08
extends a little bit to the left of this,

90
00:03:36.08 --> 00:03:39.02
giving us more of an optical alignment.

91
00:03:39.02 --> 00:03:42.09
So let's come back here
to the first-of-type,

92
00:03:42.09 --> 00:03:48.02
let's come in here and set padding-left.

93
00:03:48.02 --> 00:03:52.06
We're going to set this to 19px.

94
00:03:52.06 --> 00:03:54.06
Come in here and copy that.

95
00:03:54.06 --> 00:03:56.09
Let's come down to last-of-type,

96
00:03:56.09 --> 00:03:58.08
let's paste that down here
and change padding-left

97
00:03:58.08 --> 00:04:02.03
to padding-right.

98
00:04:02.03 --> 00:04:03.05
Save our work.

99
00:04:03.05 --> 00:04:05.03
Now in the browser, we have
a little bit of extra space

100
00:04:05.03 --> 00:04:07.03
on the left side of the first one,

101
00:04:07.03 --> 00:04:10.02
and the right side of the last one.

102
00:04:10.02 --> 00:04:12.03
And then back in the CSS, let's scroll up

103
00:04:12.03 --> 00:04:15.05
to find the article .more_info.

104
00:04:15.05 --> 00:04:17.07
Let's come over here to
the margin left property,

105
00:04:17.07 --> 00:04:20.09
and let's set this to -3px.

106
00:04:20.09 --> 00:04:23.02
What that will do is take
this entire element here

107
00:04:23.02 --> 00:04:25.00
and just move it a little bit to the left.

108
00:04:25.00 --> 00:04:29.01
So it more optically aligns
with the rest of the content.

109
00:04:29.01 --> 00:04:31.02
And then finally, let's
go back to our html file,

110
00:04:31.02 --> 00:04:32.07
let's add another link and make sure

111
00:04:32.07 --> 00:04:35.02
that the rules are working properly.

112
00:04:35.02 --> 00:04:37.03
So back in our html file,
let's come down here

113
00:04:37.03 --> 00:04:40.01
to the third link, which is Behaviour,

114
00:04:40.01 --> 00:04:41.07
let's duplicate that,

115
00:04:41.07 --> 00:04:48.01
and let's change that to In Culture.

116
00:04:48.01 --> 00:04:48.09
Save our work,

117
00:04:48.09 --> 00:04:49.08
and then back in the browser,

118
00:04:49.08 --> 00:04:51.08
we can see that the last
link is now picking up

119
00:04:51.08 --> 00:04:54.00
the selector of last-of-type.

120
00:04:54.00 --> 00:04:55.07
So the first and last-of-type gives us

121
00:04:55.07 --> 00:04:58.07
a great way to style specific
elements within a group,

122
00:04:58.07 --> 00:05:01.07
without adding additional
html markup to your web page.

123
00:05:01.07 --> 00:05:03.08
Now, if you'd like to
expand on these link styles,

124
00:05:03.08 --> 00:05:05.07
maybe add a nice rollover effect,

125
00:05:05.07 --> 00:05:08.02
check out our course on
creating CSS animated rollovers

126
00:05:08.02 --> 00:05:09.07
here in the library.

127
00:05:09.07 --> 00:05:12.01
And so with that, I'll
conclude this episode.

128
00:05:12.01 --> 00:05:15.01
And, as always, thanks for watching.