- :first-child and :last-child 4:15
- :first-child and :last-child Challenge 2 objectives
- :only-child and :empty 4:58
- Substring Matching Attribute Selectors - "Begins With" and "Ends With" 8:19
- Substring Matching Attribute Selectors - "Contains" 6:44
- Substring Matching Attribute Selectors Challenge 3 objectives
- Element States Pseudo-Classes 6:20
- Structural and Element States Pseudo-Classes Review 5 questions
Preview
Video Player
00:00
00:00
Substring Matching Attribute Selectors - "Begins With" and "Ends With"
8:19With substring matching attribute selectors, we can target specific pieces of an attribute's value, like certain letters and words.
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