Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
The “contains” substring matching attribute selector targets an element containing the piece of code we define anywhere in an attribute's value.
Quick Reference
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
This selector matches an a element containing the word blog anywhere inside its href value:
a[href*="blog"] {
border-bottom: solid 2px steelblue;
}
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
You need to sign up for Treehouse in order to download course files.
Sign up