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
We're also able to write simple CSS functions to generate content. In this video, we'll see how the attr() function inserts an element's attribute value as page content. Before we wrap up, we'll do a quick review of the advanced selectors we just learned.
Quick Reference
Using attr()
This pseudo-element rule will insert the value of an a element's title attribute after the link's content:
a::after {
content: attr(title);
}
So another useful thing about pseudo
elements, is that we can use simple CSS
0:00
functions, to return generated content
based on an element's attribute, and
0:04
I'll show you what I mean, so if we take a
look at the markup, for
0:10
our two download links, notice how the top
link's title value.
0:13
Is jpg, and the bottom link's title value
is ZIP,so,
0:19
we're able to generate this exact text
next to each link just like we
0:24
did with our icons,in the HTML file,
you'll notice that our two links,
0:29
are nested inside an unordered list, with
the class d-loads, or downloads.
0:34
So let's go over to our style sheet, and
we'll create our pseudo-element rule,
0:40
by first targeting the downloads
class,then we're
0:46
gonna target the descendant anchor
elements.
0:52
And then we'll add the after, pseudo
element,so next,
0:55
we'll need to define the content
property,and as the value for
1:02
this content property, we're going to
define the attribute function.
1:06
So we're gonna type attr followed by a set
of parentheses,and this is
1:11
where we'll tell the browser, which
attribute's value we want to insert.
1:16
In this case, we want to insert a link's
title value as content, So
1:20
right inside the parentheses let's type
title.
1:24
Next we'll add a few css properties to
style this generated text,so first let's
1:29
display it in line block, with the display
property and the value in line block.
1:35
And we'll follow that with a color
property,
1:43
where we'll want to set the color back to
it's initial color.
1:46
So, let's add the value initial, and let's
also change the font size,
1:49
with a font size property, and let's make
the font size value .65em.
1:54
And finally, we'll want to give it a
little bit of,
2:01
separation on the left side, so let's do
that with a left margin value of 5 pixels.
2:03
So again, what this does is, it takes the
value, of the attribute we specify,
2:10
which in this case is the title attribute,
and it places,
2:15
it as text,next to the element,in this
case, it will place it after, the element.
2:19
So, what we should see now, are the words
JPG and
2:24
ZIP generated next to each link
respectively.
2:27
So, let's save our style sheet, and once
we refresh the page, that's exactly what
2:30
we're seeing,the link's title values are
immediately placed after the text.
2:35
Cool, and we're able to do this with just
about any attribute,so for
2:40
instance, sometimes we may want to create
a print version of our page.
2:44
And for those we'd usually,
2:48
like to display a links full URL next,to
the link text, since we can't click on it.
2:50
So to do that, we can simply insert a
links href value as generated content,
2:56
So for instance if we replace,title with
href and refresh the page.
3:02
Notice how that displays the full URL of
each link after, the link text, but in
3:09
our case, we'll want to display the title
value, so let's change it back to title.
3:15
So finally, one of the most important
things to keep in mind,
3:21
about pseudo elements, is that the
generated content is
3:24
not exactly inserted before or after the
actual element like we might think.
3:27
It's actually inserted, into the element
as child content, so, we'll be able to
3:33
see exactly how this happens, if we apply
a solid border around our download link.
3:38
So, let's go back to our style sheet, and,
right below the,
3:43
pseudo element rule, we just wrote, let's
targets, the downloads class once again.
3:46
And the anchor elements inside, and let's
apply,
3:52
a solid border, with the border property.
3:55
So we'll make the value solid, one
pixel,so now we should see any
3:58
child content, of the download links,
contained within this border we set.
4:03
So let's take a look,once we've refreshed
the page, notice how the generated
4:08
content is actually prepended, and
appended, to the inside of the elements.
4:12
So they're inside of their box
model,they're inserted before, and
4:17
after, the text, not before, or after the
boundaries of the anchor elements.
4:21
Before we wrap up,
4:28
let's do a quick review of some of the
more advanced, selectors we just learned.
4:28
First with the Nth child pseudo class, we
can select all even or
4:33
odd child elements,or we can also get
really specific and
4:37
use expressions, to target a combination
of child elements.
4:40
And let's not forget about the nth-of-type
pseudo class, for
4:44
targeting an element based on its
position, no matter where it
4:47
is inside the parent, but only if it's a
specific type of element.
4:50
And the root pseudo class always targets
the root of the document,
4:54
this will usually be the HTML element,
4:57
and remember, the root selector, has more
specificity than the html type selector.
4:59
The not pseudo class selects everything
except the type of element we specify.
5:05
Finally, with pseudo elements, we can
target virtual elements,
5:09
that don't exist in the source code, and
we can insert generated,
5:14
content into our HTML from our CSS rules.
5:17
Again we're not required to memorize every
single,
5:21
CSS selector available, but it's important
that we're at least able to read, and
5:24
understand ,and many of the selectors, in
case we encounter them in
5:28
the wild ,or find ourselves in one of
those code conundrums, from earlier.
5:32
When we had limited access to the HTML.
5:36
To practice these selectors, on your own
try revisiting previous projects, and
5:39
see if you can use some of these new
selectors, in your style sheets.
5:43
Or as a good practice exercise, try
getting creative, with these selectors and
5:46
see how many elements you can target on a
page, without having to add any classes.
5:51
But try not to get too carried, away using
these selectors,
5:55
on real projects, as designers and
developers, it's our responsibility to
5:58
make our code as readable, predictable,
and a maintainable as possible.
6:02
Imagine opening that project style sheet
back up, a few months from now, and
6:06
spending hours trying to figure out which
elements the selectors are targeting.
6:09
Not fun, right, so, that about does it for
6:14
CSS selectors, and we're always here to
help and motivate you so,
6:17
if you have any questions, about the
content we've covered in this course,
6:20
feel free to reach out to our support
team, the wonderful treehouse community,
6:23
on our forum, or you can get hold of me on
Twitter.
6:27
I'm @guilh.
6:29
Thanks everyone.
6:30
You need to sign up for Treehouse in order to download course files.
Sign up