Substring Matching Attribute Selectors - "Contains"

The third substring matching attribute selector we'll cover is referred to as 0:00 the contains selector and it's called that, because it targets an element whose 0:04 attribute value contains the piece of code we define anywhere in the value. 0:08 And I'll show you what I mean. 0:13 So earlier, we used the begins with selector to give 0:14 links beginning with http. 0:18 A background-repeat, background-size, and padding-left property. 0:21 While it does the job as we can see we used it to help define these file type 0:26 icons, I'd prefer a selector that's a bit more specific and predictable. 0:32 So, let's instead match a link that contains the word 0:37 downloads anywhere inside the href attribute value. 0:42 So we'll go back to our style sheet and at the bottom, 0:46 let's create our new contains selector by once again targeting an anchor element. 0:49 Then inside the square brackets, we're gonna target the h ref attribute. 0:55 And we're going to use the asterisk character to 1:00 tell the browser that we're selecting every anchor element who's h 1:04 ref attribute contains the word downloads anywhere in the value. 1:08 [BLANK_AUDIO] 1:13 So in this selector, the asterisk is what defines the contains selector. 1:18 Because, again, it tells the browser to match a value string that 1:23 contains downloads anywhere in the value and it doesn't matter if there 1:27 are spaces before or after the substring, the browser will still match it. 1:32 So let's scroll back up to our first begins with selector rule, and 1:37 let's keep the color and text decoration properties in this original rule, 1:43 but we're gonna select and cut out the background repeat, background size and 1:48 padding left declarations. 1:53 And we will scroll down and paste them in our new contains selector rule. 1:55 All right, so let's take a look. 2:00 Once we save our stop sheet, and refresh the page, 2:01 as we can see everything everything still looks and works exactly the same. 2:04 But the difference is that the browser is now matching the anchor elements that 2:09 contains downloads anywhere in the href attribute. 2:13 So it's still matching the three download links but 2:18 it's matching a different piece of the href attribute's value. 2:20 Next, let's go over another useful example of the contained selector. 2:24 So let's say that now we need to target our thumbnail images and 2:29 apply a border and some margins. 2:33 Well, in our index.html file you'll notice that the image elements 2:35 contained the word thumbnails in their source attribute value. 2:40 So great. 2:45 We can actually use the word thumbnails and 2:46 our selector as the piece of the source value we'll want to target. 2:49 So let's create a selector for this. 2:53 So back in our .css file we'll create our selector by 2:55 first targeting the image element, followed by a set of square brackets. 2:58 Then we're going to define the source attribute and 3:02 we'll again use the asterisk character. 3:05 To tell the browser that we're selecting any image 3:09 whose source attribute contains the word, thumbnails, anywhere in the value. 3:12 [BLANK_AUDIO] 3:17 In fact let's go ahead and use, thumb, instead of, thumbnails. 3:21 Just so we can see how specific we can actually get with the selector. 3:25 [SOUND] So now let's add a few CSS properties inside our new rules. 3:28 So let's say margin four pixels let's add a border property and 3:34 let's add the value to solid two pixels and 3:40 we'll follow that with a width property. 3:44 Now let's set the width to 180 pixels and set the height to 140 pixels. 3:49 All right, so let's go ahead and 3:56 save our style sheet and take a look at our gallery. 3:57 Once we refresh the browser, we can see how the browser targets and 4:00 styles all the thumbnails in our galleries. 4:03 So, now, if all of our thumbnails need to have these particular styles, it doesn't 4:06 matter how many we have on our page or in our site, as long as the thumbnail source 4:12 points to the thumbnails directory, it will still take on those styles. 4:18 And they'll all have that nice border and the same width and height. 4:23 Similarly, if we need to target a particular image without giving it 4:27 a class, we can still do that with the contains attribute selector. 4:30 For example, to target the lake image here, so 4:34 just the lake image we can tell the browser. 4:39 To match the substring, lake, that's in the source attribute. 4:42 So let's go ahead and do that. 4:46 Back in our style sheet, right beneath the selector, we just start. 4:47 Let's once again target an image element. 4:51 And we're going to target the source attribute, and we'll use the asterisk for 4:54 the contained selector. 4:59 And let's target the substring lake. 5:01 [BLANK_AUDIO] 5:04 And for this lake image we're gonna turn the border color red. 5:07 All right. 5:11 So when we refresh the page. 5:15 Notice how the browser matches that lake image, because its 5:18 source value does in fact contain the word lake somewhere in the value. 5:21 And it doesn't matter where in the value as long as it's somewhere in the value. 5:25 In this case it's name of the image or if we need to target say the bay image, 5:28 well we can change that and have the browser. 5:34 Match the bay substring, and 5:38 as we can see when we refresh the page now the bay image has that nice red border. 5:40 So, as we just learned these substring matching attribute selectors can make our 5:46 CSS selectors more powerful because we're able to target any part of 5:49 an attribute and we're not just limited to the full value. 5:53 So let's go over when or 5:58 why we might wanna use some of the structural pseudo classes or 5:59 substring matching attribute selectors in place of regular ID's or class selectors. 6:03 As we learned, the special selectors can come in handy when we don't have a lot of 6:08 control over the HTML. 6:12 For example we may be working with a content management system or 6:14 framework that gives us little or no access to 6:17 the html preventing us from being able to add classes or IDs to certain elements. 6:20 They're also helpful when we have dynamic content that's always changing, for 6:25 example a dynamic list or an image gallery. 6:29 Having some of the structural pseudo classes in place will prevent us from 6:33 constantly having to change the order of classes in the HTML, 6:36 as we saw earlier in the first and last child examples. 6:40