Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

CSS Selectors

Well done!

You have completed CSS Selectors!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Substring Matching Attribute Selectors - "Begins With" and "Ends With"

8:19 with Guil Hernandez

With 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