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.
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
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 length href attribute. 2:25 We'll then follow that with the carat 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 carat 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 links 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 up