Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
With substring matching attribute selectors, we can target specific pieces of an attribute's value, like certain letters and words.
Quick Reference
Using substring matching attribute selectors
-
^tells the browser to match a piece of code that’s at the beginning of an attribute's value -
$matches a piece at the end of an attribute's value. -
*matches any part of an attribute's value
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
If you enjoyed working with attribute
selectors earlier, well,
0:00
CSS levelled up on attribute selectors,
0:03
by adding three powerful selectors called
substring matching attribute selectors,
0:05
that allow us to target specific pieces of
an attribute's value.
0:10
Let's see how.
0:14
So, the first thing we'll need to do is
launch the latest workspace for
0:15
this lesson.
0:19
And when we open up and
0:20
preview the workspace files, you'll notice
that it brings up a simple image gallery.
0:21
Now, let's say that we need to enhance
this gallery page a bit with CSS.
0:27
But, let's also imagine that in this
particular case,
0:31
we're not allowed or able to add any class
or ID hooks to style our HTML elements.
0:35
So it sounds pretty challenging, doesn't
it?
0:42
Well fortunately, with carefully written
substring matching attribute selectors,
0:44
we can get around that.
0:49
As we learned in previous lessons, we're
able to target any attribute and
0:50
value of an HTML element.
0:55
Now, with substring matching attribute
selectors, we can get really specific,
0:57
and target pieces of those attribute
values, like certain letters or words.
1:02
And those pieces are called substrings.
1:07
So, first up, we'll take a look at what's
called the begins with attribute selector,
1:10
because it targets an element whose
attribute value begins with what we
1:15
specify in the selector.
1:19
So, it begins with a certain piece of the
value string.
1:21
And I'll show you what I mean.
1:23
So in our index.html file, notice how
we're using several links on our page.
1:25
Now, some links' href attribute point to
relative links.
1:32
For example, the links in the top
paragraph.
1:37
While other links, like the ones in the
bottom are external links,
1:41
that begin with http://.
1:47
So let's say that we need to target all
external links on the page.
1:50
Well, with the begins with attribute
selector,
1:54
we can use this very specific piece of the
href attribute, to match those elements.
1:57
So, let's go over to the CSS directory,
and bring up the style.css file.
2:02
And we'll scroll down to the bottom of the
page, and right beneath the comment for
2:08
substring matching attribute selectors,
we'll create our new selector,
2:12
by first selecting the anchor element,
followed by a set of square brackets.
2:18
Now, in between the square brackets,
2:23
we'll specify that we're selecting
a link href attribute.
2:25
We'll then follow that with the caret
character, and an equals sign.
2:29
And next, we need to specify the beginning
of the value we want to target,
2:33
which in our case is http://.
2:40
[BLANK_AUDIO]
2:43
So in this selector, the caret character
is what defines the begins with selector.
2:45
And it's what tells the browser to match
this specific piece of code,
2:52
that's at the beginning of a link's href
attribute value.
2:56
So next, let's give those links a
different color value, and
3:00
a text decoration of none.
3:04
So back in our begins with rule, let's add
a color property, and
3:06
we're going to set the value to #52BAB3,
and right below that,
3:11
we'll add a text-decoration property,
where we'll set the value to none.
3:18
And as we can see this is an aqua green
color it will render.
3:22
So let's save our style sheet.
3:26
And once we refresh the page,
3:28
we can see how the browser targets only
those links at the bottom of the page,
3:30
containing that http:// at the beginning
of their href values.
3:35
So, it only checks for the beginning of
the string in an attribute.
3:40
Now if we actually go back to our
selector, and remove both forward slashes.
3:45
When we save our style sheet and
3:52
take a look at it again, we can see that
it still works.
3:53
Because the href value still begins with
http:.
3:56
So, we have a begins with selector, so
4:02
of course we'll need to have an ends with
selector.
4:04
Right?
4:07
Similar to the begins with selector,
4:08
the ends with selector targets an element
with an attribute value,
4:10
that ends with the piece of code or a
substring we specify in the selector.
4:15
So back in our three external links, at
the bottom of the page.
4:21
Notice how each link points to a different
file.
4:25
One points to a PDF, the other points to a
JPEG,
4:29
while the third points to a zip file.
4:33
Well, wouldn't it be great if we could
display an icon for
4:36
each of the file types in front of the
links,
4:40
based on this specific piece of code in
the a href attribute.
4:43
Because remember, we're trying not to add
any hooks to our HTML.
4:47
So, let's take advantage of the ends with
selector to do that.
4:50
Once again, back on our style sheet, we'll
first target an anchor element,
4:55
href attribute.
4:58
So inside the square brackets, we'll type
href, and this time,
5:00
we'll use a dollar sign to target href
values ending with .pdf.
5:05
[BLANK_AUDIO]
5:10
So, in the ends with selector, the dollar
sign is what tells the browser to
5:13
match a substring that's at the end of an
attribute's value.
5:18
So next, we'll need to add a PDF icon as a
background image for this particular link.
5:22
So, here, in the image directory, we
should see three SVG files.
5:27
And these are the file type icons we wanna
display.
5:32
So first, let's display the PDF icons, for
5:34
length that end with .pdf, like our first
link here.
5:38
So, back on our style sheet,
5:43
let's add a background-image property in
our new CSS rule.
5:45
And now we'll go ahead and add the path to
that PDF icon.
5:50
So inside the parentheses, I'll add a set
of quotes, then type the path to the icon,
5:54
which is in the image directory and it's
called icn-pdf.svg.
6:03
So, now let's go ahead and add the icons
for the other two links.
6:09
So, I can actually just copy the rule we
just wrote, and paste it right below.
6:12
And this time,
6:18
we'll target anchor elements with the href
attribute ending with .jpg.
6:19
So I will replace .pdf with .jpg.
6:24
So, for those, we'll want to display the
picture .svg icon as a background image.
6:28
So we'll replace PDF with picture.svg.
6:33
And let me copy this one, paste it right
below, and
6:39
finally we'll display the zip icon when an
href attributes values ends with .zip.
6:44
And let me change the background image
from icon picture to icn-zip.svg.
6:51
So, there's one more thing we need to do
here.
6:57
We'll need to add a few styles that define
the size of the icons and
6:58
prevent the backgrounds from repeating.
7:03
So, instead of repeating those styles by
adding them to these three selectors, we
7:05
can revisit our handy begins with selector
rule, and add the new declarations there.
7:11
So let's scroll up.
7:16
And up here in the first rule,
7:17
in the begins with rule, let's add some
new CSS declarations.
7:19
So below the text declaration, property.
7:23
Let's add a background, repeat property.
7:27
We'll set the value to no-repeat.
7:30
And below that, let's add a
background-size property,
7:33
and we're gonna set the background size to
18 pixels, 18 pixels.
7:38
And finally let's give it somewhat
padding,
7:44
just to add a little bit of space between
the icon and the link.
7:47
So let's say padding-left, and set that to
25 pixels.
7:50
All right.
So now let's go ahead and take a look.
7:55
I'm gonna save the stylesheet, and in the
browser hit Refresh, and
7:56
there we see the nice file type icons
in front of their respective links.
8:01
Because the browser matched those href
values ending with the file
8:07
types we specified.
8:12
So, there we see the PDF icon, the picture
icon, and the zip icon.
8:13
Pretty cool.
8:18
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up