1
00:00:00,350 --> 00:00:03,500
If you enjoyed working with attribute
selectors earlier, well,

2
00:00:03,500 --> 00:00:05,910
CSS levelled up on attribute selectors,

3
00:00:05,910 --> 00:00:10,650
by adding three powerful selectors called
substring matching attribute selectors,

4
00:00:10,650 --> 00:00:14,570
that allow us to target specific pieces of
an attribute's value.

5
00:00:14,570 --> 00:00:15,950
Let's see how.

6
00:00:15,950 --> 00:00:19,130
So, the first thing we'll need to do is
launch the latest workspace for

7
00:00:19,130 --> 00:00:20,300
this lesson.

8
00:00:20,300 --> 00:00:21,650
And when we open up and

9
00:00:21,650 --> 00:00:27,217
preview the workspace files, you'll notice
that it brings up a simple image gallery.

10
00:00:27,217 --> 00:00:31,657
Now, let's say that we need to enhance
this gallery page a bit with CSS.

11
00:00:31,657 --> 00:00:35,989
But, let's also imagine that in this
particular case,

12
00:00:35,989 --> 00:00:42,137
we're not allowed or able to add any class
or ID hooks to style our HTML elements.

13
00:00:42,137 --> 00:00:44,710
So it sounds pretty challenging, doesn't
it?

14
00:00:44,710 --> 00:00:49,020
Well fortunately, with carefully written
substring matching attribute selectors,

15
00:00:49,020 --> 00:00:50,660
we can get around that.

16
00:00:50,660 --> 00:00:55,448
As we learned in previous lessons, we're
able to target any attribute and

17
00:00:55,448 --> 00:00:57,128
value of an HTML element.

18
00:00:57,128 --> 00:01:02,428
Now, with substring matching attribute
selectors, we can get really specific,

19
00:01:02,428 --> 00:01:07,880
and target pieces of those attribute
values, like certain letters or words.

20
00:01:07,880 --> 00:01:10,058
And those pieces are called substrings.

21
00:01:10,058 --> 00:01:15,365
So, first up, we'll take a look at what's
called the begins with attribute selector,

22
00:01:15,365 --> 00:01:19,613
because it targets an element whose
attribute value begins with what we

23
00:01:19,613 --> 00:01:21,197
specify in the selector.

24
00:01:21,197 --> 00:01:23,890
So, it begins with a certain piece of the
value string.

25
00:01:23,890 --> 00:01:25,507
And I'll show you what I mean.

26
00:01:25,507 --> 00:01:32,207
So in our index.html file, notice how
we're using several links on our page.

27
00:01:32,207 --> 00:01:37,110
Now, some links' href attribute point to
relative links.

28
00:01:37,110 --> 00:01:41,037
For example, the links in the top
paragraph.

29
00:01:41,037 --> 00:01:47,521
While other links, like the ones in the
bottom are external links,

30
00:01:47,521 --> 00:01:50,377
that begin with http://.

31
00:01:50,377 --> 00:01:54,298
So let's say that we need to target all
external links on the page.

32
00:01:54,298 --> 00:01:57,311
Well, with the begins with attribute
selector,

33
00:01:57,311 --> 00:02:02,417
we can use this very specific piece of the
href attribute, to match those elements.

34
00:02:02,417 --> 00:02:08,340
So, let's go over to the CSS directory,
and bring up the style.css file.

35
00:02:08,340 --> 00:02:12,520
And we'll scroll down to the bottom of the
page, and right beneath the comment for

36
00:02:12,520 --> 00:02:18,610
substring matching attribute selectors,
we'll create our new selector,

37
00:02:18,610 --> 00:02:23,380
by first selecting the anchor element,
followed by a set of square brackets.

38
00:02:23,380 --> 00:02:25,630
Now, in between the square brackets,

39
00:02:25,630 --> 00:02:29,320
we'll specify that we're selecting
a link href attribute.

40
00:02:29,320 --> 00:02:33,867
We'll then follow that with the caret
character, and an equals sign.

41
00:02:33,867 --> 00:02:40,315
And next, we need to specify the beginning
of the value we want to target,

42
00:02:40,315 --> 00:02:43,228
which in our case is http://.

43
00:02:43,228 --> 00:02:45,608
[BLANK_AUDIO]

44
00:02:45,608 --> 00:02:52,330
So in this selector, the caret character
is what defines the begins with selector.

45
00:02:52,330 --> 00:02:56,932
And it's what tells the browser to match
this specific piece of code,

46
00:02:56,932 --> 00:03:00,767
that's at the beginning of a link's href
attribute value.

47
00:03:00,767 --> 00:03:04,395
So next, let's give those links a
different color value, and

48
00:03:04,395 --> 00:03:06,120
a text decoration of none.

49
00:03:06,120 --> 00:03:11,740
So back in our begins with rule, let's add
a color property, and

50
00:03:11,740 --> 00:03:18,440
we're going to set the value to #52BAB3,
and right below that,

51
00:03:18,440 --> 00:03:22,390
we'll add a text-decoration property,
where we'll set the value to none.

52
00:03:22,390 --> 00:03:26,440
And as we can see this is an aqua green
color it will render.

53
00:03:26,440 --> 00:03:28,207
So let's save our style sheet.

54
00:03:28,207 --> 00:03:30,232
And once we refresh the page,

55
00:03:30,232 --> 00:03:35,416
we can see how the browser targets only
those links at the bottom of the page,

56
00:03:35,416 --> 00:03:40,037
containing that http:// at the beginning
of their href values.

57
00:03:40,037 --> 00:03:45,140
So, it only checks for the beginning of
the string in an attribute.

58
00:03:45,140 --> 00:03:52,000
Now if we actually go back to our
selector, and remove both forward slashes.

59
00:03:52,000 --> 00:03:53,300
When we save our style sheet and

60
00:03:53,300 --> 00:03:56,400
take a look at it again, we can see that
it still works.

61
00:03:56,400 --> 00:04:02,050
Because the href value still begins with
http:.

62
00:04:02,050 --> 00:04:04,580
So, we have a begins with selector, so

63
00:04:04,580 --> 00:04:07,460
of course we'll need to have an ends with
selector.

64
00:04:07,460 --> 00:04:08,210
Right?

65
00:04:08,210 --> 00:04:10,910
Similar to the begins with selector,

66
00:04:10,910 --> 00:04:15,950
the ends with selector targets an element
with an attribute value,

67
00:04:15,950 --> 00:04:21,340
that ends with the piece of code or a
substring we specify in the selector.

68
00:04:21,340 --> 00:04:25,690
So back in our three external links, at
the bottom of the page.

69
00:04:25,690 --> 00:04:29,118
Notice how each link points to a different
file.

70
00:04:29,118 --> 00:04:33,478
One points to a PDF, the other points to a
JPEG,

71
00:04:33,478 --> 00:04:36,857
while the third points to a zip file.

72
00:04:36,857 --> 00:04:40,434
Well, wouldn't it be great if we could
display an icon for

73
00:04:40,434 --> 00:04:43,135
each of the file types in front of the
links,

74
00:04:43,135 --> 00:04:47,030
based on this specific piece of code in
the a href attribute.

75
00:04:47,030 --> 00:04:50,150
Because remember, we're trying not to add
any hooks to our HTML.

76
00:04:50,150 --> 00:04:55,120
So, let's take advantage of the ends with
selector to do that.

77
00:04:55,120 --> 00:04:58,795
Once again, back on our style sheet, we'll
first target an anchor element,

78
00:04:58,795 --> 00:05:00,020
href attribute.

79
00:05:00,020 --> 00:05:05,438
So inside the square brackets, we'll type
href, and this time,

80
00:05:05,438 --> 00:05:10,785
we'll use a dollar sign to target href
values ending with .pdf.

81
00:05:10,785 --> 00:05:13,286
[BLANK_AUDIO]

82
00:05:13,286 --> 00:05:18,021
So, in the ends with selector, the dollar
sign is what tells the browser to

83
00:05:18,021 --> 00:05:22,210
match a substring that's at the end of an
attribute's value.

84
00:05:22,210 --> 00:05:27,610
So next, we'll need to add a PDF icon as a
background image for this particular link.

85
00:05:27,610 --> 00:05:32,470
So, here, in the image directory, we
should see three SVG files.

86
00:05:32,470 --> 00:05:34,840
And these are the file type icons we wanna
display.

87
00:05:34,840 --> 00:05:38,663
So first, let's display the PDF icons, for

88
00:05:38,663 --> 00:05:43,297
length that end with .pdf, like our first
link here.

89
00:05:43,297 --> 00:05:45,387
So, back on our style sheet,

90
00:05:45,387 --> 00:05:50,440
let's add a background-image property in
our new CSS rule.

91
00:05:50,440 --> 00:05:54,940
And now we'll go ahead and add the path to
that PDF icon.

92
00:05:54,940 --> 00:06:03,086
So inside the parentheses, I'll add a set
of quotes, then type the path to the icon,

93
00:06:03,086 --> 00:06:09,328
which is in the image directory and it's
called icn-pdf.svg.

94
00:06:09,328 --> 00:06:12,850
So, now let's go ahead and add the icons
for the other two links.

95
00:06:12,850 --> 00:06:18,520
So, I can actually just copy the rule we
just wrote, and paste it right below.

96
00:06:18,520 --> 00:06:19,170
And this time,

97
00:06:19,170 --> 00:06:24,210
we'll target anchor elements with the href
attribute ending with .jpg.

98
00:06:24,210 --> 00:06:28,387
So I will replace .pdf with .jpg.

99
00:06:28,387 --> 00:06:33,047
So, for those, we'll want to display the
picture .svg icon as a background image.

100
00:06:33,047 --> 00:06:39,160
So we'll replace PDF with picture.svg.

101
00:06:39,160 --> 00:06:44,570
And let me copy this one, paste it right
below, and

102
00:06:44,570 --> 00:06:51,860
finally we'll display the zip icon when an
href attributes values ends with .zip.

103
00:06:51,860 --> 00:06:57,287
And let me change the background image
from icon picture to icn-zip.svg.

104
00:06:57,287 --> 00:06:58,920
So, there's one more thing we need to do
here.

105
00:06:58,920 --> 00:07:03,006
We'll need to add a few styles that define
the size of the icons and

106
00:07:03,006 --> 00:07:05,698
prevent the backgrounds from repeating.

107
00:07:05,698 --> 00:07:11,018
So, instead of repeating those styles by
adding them to these three selectors, we

108
00:07:11,018 --> 00:07:16,580
can revisit our handy begins with selector
rule, and add the new declarations there.

109
00:07:16,580 --> 00:07:17,570
So let's scroll up.

110
00:07:17,570 --> 00:07:19,600
And up here in the first rule,

111
00:07:19,600 --> 00:07:23,820
in the begins with rule, let's add some
new CSS declarations.

112
00:07:23,820 --> 00:07:26,240
So below the text declaration, property.

113
00:07:27,520 --> 00:07:30,817
Let's add a background, repeat property.

114
00:07:30,817 --> 00:07:33,960
We'll set the value to no-repeat.

115
00:07:33,960 --> 00:07:38,690
And below that, let's add a
background-size property,

116
00:07:38,690 --> 00:07:44,640
and we're gonna set the background size to
18 pixels, 18 pixels.

117
00:07:44,640 --> 00:07:47,107
And finally let's give it somewhat
padding,

118
00:07:47,107 --> 00:07:50,407
just to add a little bit of space between
the icon and the link.

119
00:07:50,407 --> 00:07:55,027
So let's say padding-left, and set that to
25 pixels.

120
00:07:55,027 --> 00:07:56,820
All right.
So now let's go ahead and take a look.

121
00:07:56,820 --> 00:08:01,740
I'm gonna save the stylesheet, and in the
browser hit Refresh, and

122
00:08:01,740 --> 00:08:07,080
there we see the nice file type icons
in front of their respective links.

123
00:08:07,080 --> 00:08:12,190
Because the browser matched those href
values ending with the file

124
00:08:12,190 --> 00:08:13,310
types we specified.

125
00:08:13,310 --> 00:08:18,707
So, there we see the PDF icon, the picture
icon, and the zip icon.

126
00:08:18,707 --> 00:08:19,230
Pretty cool.