The third substring matching attribute selector we'll cover is referred to as

the contains selector and it's called that, because it targets an element whose

attribute value contains the piece of code we define anywhere in the value.

And I'll show you what I mean.

So earlier, we used the begins with selector to give

links beginning with http.

A background-repeat, background-size, and padding-left property.

While it does the job as we can see we used it to help define these file type

icons, I'd prefer a selector that's a bit more specific and predictable.

So, let's instead match a link that contains the word

downloads anywhere inside the href attribute value.

So we'll go back to our style sheet and at the bottom,

let's create our new contains selector by once again targeting an anchor element.

Then inside the square brackets, we're gonna target the h ref attribute.

And we're going to use the asterisk character to

tell the browser that we're selecting every anchor element who's h

ref attribute contains the word downloads anywhere in the value.

[BLANK_AUDIO]

So in this selector, the asterisk is what defines the contains selector.

Because, again, it tells the browser to match a value string that

contains downloads anywhere in the value and it doesn't matter if there

are spaces before or after the substring, the browser will still match it.

So let's scroll back up to our first begins with selector rule, and

let's keep the color and text decoration properties in this original rule,

but we're gonna select and cut out the background repeat, background size and

padding left declarations.

And we will scroll down and paste them in our new contains selector rule.

All right, so let's take a look.

Once we save our stop sheet, and refresh the page,

as we can see everything everything still looks and works exactly the same.

But the difference is that the browser is now matching the anchor elements that

contains downloads anywhere in the href attribute.

So it's still matching the three download links but

it's matching a different piece of the href attribute's value.

Next, let's go over another useful example of the contained selector.

So let's say that now we need to target our thumbnail images and

apply a border and some margins.

Well, in our index.html file you'll notice that the image elements

contained the word thumbnails in their source attribute value.

So great.

We can actually use the word thumbnails and

our selector as the piece of the source value we'll want to target.

So let's create a selector for this.

So back in our .css file we'll create our selector by

first targeting the image element, followed by a set of square brackets.

Then we're going to define the source attribute and

we'll again use the asterisk character.

To tell the browser that we're selecting any image

whose source attribute contains the word, thumbnails, anywhere in the value.

[BLANK_AUDIO]

In fact let's go ahead and use, thumb, instead of, thumbnails.

Just so we can see how specific we can actually get with the selector.

[SOUND] So now let's add a few CSS properties inside our new rules.

So let's say margin four pixels let's add a border property and

let's add the value to solid two pixels and

we'll follow that with a width property.

Now let's set the width to 180 pixels and set the height to 140 pixels.

All right, so let's go ahead and

save our style sheet and take a look at our gallery.

Once we refresh the browser, we can see how the browser targets and

styles all the thumbnails in our galleries.

So, now, if all of our thumbnails need to have these particular styles, it doesn't

matter how many we have on our page or in our site, as long as the thumbnail source

points to the thumbnails directory, it will still take on those styles.

And they'll all have that nice border and the same width and height.

Similarly, if we need to target a particular image without giving it

a class, we can still do that with the contains attribute selector.

For example, to target the lake image here, so

just the lake image we can tell the browser.

To match the substring, lake, that's in the source attribute.

So let's go ahead and do that.

Back in our style sheet, right beneath the selector, we just start.

Let's once again target an image element.

And we're going to target the source attribute, and we'll use the asterisk for

the contained selector.

And let's target the substring lake.

[BLANK_AUDIO]

And for this lake image we're gonna turn the border color red.

All right.

So when we refresh the page.

Notice how the browser matches that lake image, because its

source value does in fact contain the word lake somewhere in the value.

And it doesn't matter where in the value as long as it's somewhere in the value.

In this case it's name of the image or if we need to target say the bay image,

well we can change that and have the browser.

Match the bay substring, and

as we can see when we refresh the page now the bay image has that nice red border.

So, as we just learned these substring matching attribute selectors can make our

CSS selectors more powerful because we're able to target any part of

an attribute and we're not just limited to the full value.

So let's go over when or

why we might wanna use some of the structural pseudo classes or

substring matching attribute selectors in place of regular ID's or class selectors.

As we learned, the special selectors can come in handy when we don't have a lot of

control over the HTML.

For example we may be working with a content management system or

framework that gives us little or no access to

the html preventing us from being able to add classes or IDs to certain elements.

They're also helpful when we have dynamic content that's always changing, for

example a dynamic list or an image gallery.

Having some of the structural pseudo classes in place will prevent us from

constantly having to change the order of classes in the HTML,

as we saw earlier in the first and last child examples.