1
00:00:00,330 --> 00:00:04,900
So another useful thing about pseudo
elements, is that we can use simple CSS

2
00:00:04,900 --> 00:00:10,220
functions to return generated content
based on an element's attribute, and

3
00:00:10,220 --> 00:00:13,850
I'll show you what I mean, so if we take a
look at the markup, for

4
00:00:13,850 --> 00:00:19,250
our two download links, notice how the top
link's title value

5
00:00:19,250 --> 00:00:24,370
is -JPG, and the bottom link's title value
is -ZIP, so,

6
00:00:24,370 --> 00:00:29,510
we're able to generate this exact text
next to each link just like we

7
00:00:29,510 --> 00:00:34,400
did with our icons, in the HTML file,
you'll notice that our two links,

8
00:00:34,400 --> 00:00:40,310
are nested inside an unordered list, with
the class d-loads, or downloads.

9
00:00:40,310 --> 00:00:46,090
So let's go over to our style sheet, and
we'll create our pseudo-element rule,

10
00:00:46,090 --> 00:00:52,130
by first targeting the downloads
class, then we're

11
00:00:52,130 --> 00:00:55,930
gonna target the descendant anchor
elements.

12
00:00:55,930 --> 00:01:02,200
And then we'll add the after pseudo
element, so next,

13
00:01:02,200 --> 00:01:06,430
we'll need to define the content
property, and as the value for

14
00:01:06,430 --> 00:01:11,060
this content property, we're going to
define the attribute function.

15
00:01:11,060 --> 00:01:16,210
So we're gonna type attr followed by a set
of parentheses, and this is

16
00:01:16,210 --> 00:01:20,970
where we'll tell the browser, which
attribute's value we want to insert.

17
00:01:20,970 --> 00:01:24,840
In this case, we want to insert a link's
title value as content, so

18
00:01:24,840 --> 00:01:27,680
right inside the parentheses let's type
title.

19
00:01:29,490 --> 00:01:35,460
Next we'll add a few css properties to
style this generated text, so first let's

20
00:01:35,460 --> 00:01:42,330
display it inline-block, with the display
property and the value inline-block.

21
00:01:43,820 --> 00:01:46,590
And we'll follow that with a color
property,

22
00:01:46,590 --> 00:01:49,660
where we'll want to set the color back to
its initial color.

23
00:01:49,660 --> 00:01:54,590
So, let's add the value initial, and let's
also change the font size,

24
00:01:54,590 --> 00:02:01,070
with a font size property, and let's make
the font size value .65em.

25
00:02:01,070 --> 00:02:03,930
And finally, we'll want to give it a
little bit of,

26
00:02:03,930 --> 00:02:10,320
separation on the left side, so let's do
that with a left margin value of 5 pixels.

27
00:02:10,320 --> 00:02:15,380
So again, what this does is, it takes the
value of the attribute we specify,

28
00:02:15,380 --> 00:02:19,140
which in this case is the title attribute,
and it places

29
00:02:19,140 --> 00:02:24,430
it as text next to the element, in this
case, it will place it after the element.

30
00:02:24,430 --> 00:02:27,150
So, what we should see now, are the words
JPG and

31
00:02:27,150 --> 00:02:30,910
ZIP generated next to each link
respectively.

32
00:02:30,910 --> 00:02:35,880
So, let's save our style sheet, and once
we refresh the page, that's exactly what

33
00:02:35,880 --> 00:02:40,540
we're seeing, the link's title values are
immediately placed after the text.

34
00:02:40,540 --> 00:02:44,530
Cool, and we're able to do this with just
about any attribute, so for

35
00:02:44,530 --> 00:02:48,710
instance, sometimes we may want to create
a print version of our page.

36
00:02:48,710 --> 00:02:50,070
And for those we'd usually,

37
00:02:50,070 --> 00:02:56,460
like to display a links full URL next to
the link text, since we can't click on it.

38
00:02:56,460 --> 00:03:02,180
So to do that, we can simply insert a
links href value as generated content,

39
00:03:02,180 --> 00:03:09,180
So for instance if we replace,title with
href and refresh the page.

40
00:03:09,180 --> 00:03:15,660
Notice how that displays the full URL of
each link after, the link text, but in

41
00:03:15,660 --> 00:03:19,740
our case, we'll want to display the title
value, so let's change it back to title.

42
00:03:21,300 --> 00:03:24,270
So finally, one of the most important
things to keep in mind,

43
00:03:24,270 --> 00:03:27,940
about pseudo elements, is that the
generated content is

44
00:03:27,940 --> 00:03:33,660
not exactly inserted before or after the
actual element like we might think.

45
00:03:33,660 --> 00:03:38,250
It's actually inserted, into the element
as child content, so, we'll be able to

46
00:03:38,250 --> 00:03:43,280
see exactly how this happens, if we apply
a solid border around our download link.

47
00:03:43,280 --> 00:03:46,962
So, let's go back to our style sheet, and,
right below the,

48
00:03:46,962 --> 00:03:52,740
pseudo element rule, we just wrote, let's
targets, the downloads class once again.

49
00:03:52,740 --> 00:03:55,820
And the anchor elements inside, and let's
apply,

50
00:03:55,820 --> 00:03:58,880
a solid border, with the border property.

51
00:03:58,880 --> 00:04:03,420
So we'll make the value solid, one
pixel,so now we should see any

52
00:04:03,420 --> 00:04:08,450
child content, of the download links,
contained within this border we set.

53
00:04:08,450 --> 00:04:12,650
So let's take a look,once we've refreshed
the page, notice how the generated

54
00:04:12,650 --> 00:04:17,220
content is actually prepended, and
appended, to the inside of the elements.

55
00:04:17,220 --> 00:04:21,090
So they're inside of their box
model,they're inserted before, and

56
00:04:21,090 --> 00:04:26,400
after, the text, not before, or after the
boundaries of the anchor elements.

57
00:04:28,010 --> 00:04:28,980
Before we wrap up,

58
00:04:28,980 --> 00:04:33,570
let's do a quick review of some of the
more advanced, selectors we just learned.

59
00:04:33,570 --> 00:04:37,480
First with the Nth child pseudo class, we
can select all even or

60
00:04:37,480 --> 00:04:40,720
odd child elements,or we can also get
really specific and

61
00:04:40,720 --> 00:04:44,640
use expressions, to target a combination
of child elements.

62
00:04:44,640 --> 00:04:47,550
And let's not forget about the nth-of-type
pseudo class, for

63
00:04:47,550 --> 00:04:50,500
targeting an element based on its
position, no matter where it

64
00:04:50,500 --> 00:04:54,480
is inside the parent, but only if it's a
specific type of element.

65
00:04:54,480 --> 00:04:57,890
And the root pseudo class always targets
the root of the document,

66
00:04:57,890 --> 00:04:59,820
this will usually be the HTML element,

67
00:04:59,820 --> 00:05:05,530
and remember, the root selector, has more
specificity than the html type selector.

68
00:05:05,530 --> 00:05:09,884
The not pseudo class selects everything
except the type of element we specify.

69
00:05:09,884 --> 00:05:14,400
Finally, with pseudo elements, we can
target virtual elements,

70
00:05:14,400 --> 00:05:17,700
that don't exist in the source code, and
we can insert generated,

71
00:05:17,700 --> 00:05:20,510
content into our HTML from our CSS rules.

72
00:05:21,710 --> 00:05:24,530
Again we're not required to memorize every
single,

73
00:05:24,530 --> 00:05:28,950
CSS selector available, but it's important
that we're at least able to read, and

74
00:05:28,950 --> 00:05:32,590
understand ,and many of the selectors, in
case we encounter them in

75
00:05:32,590 --> 00:05:36,590
the wild ,or find ourselves in one of
those code conundrums, from earlier.

76
00:05:36,590 --> 00:05:39,240
When we had limited access to the HTML.

77
00:05:39,240 --> 00:05:43,390
To practice these selectors, on your own
try revisiting previous projects, and

78
00:05:43,390 --> 00:05:46,800
see if you can use some of these new
selectors, in your style sheets.

79
00:05:46,800 --> 00:05:51,190
Or as a good practice exercise, try
getting creative, with these selectors and

80
00:05:51,190 --> 00:05:55,720
see how many elements you can target on a
page, without having to add any classes.

81
00:05:55,720 --> 00:05:58,390
But try not to get too carried, away using
these selectors,

82
00:05:58,390 --> 00:06:02,580
on real projects, as designers and
developers, it's our responsibility to

83
00:06:02,580 --> 00:06:06,720
make our code as readable, predictable,
and a maintainable as possible.

84
00:06:06,720 --> 00:06:09,990
Imagine opening that project style sheet
back up, a few months from now, and

85
00:06:09,990 --> 00:06:14,140
spending hours trying to figure out which
elements the selectors are targeting.

86
00:06:14,140 --> 00:06:17,050
Not fun, right, so, that about does it for

87
00:06:17,050 --> 00:06:20,510
CSS selectors, and we're always here to
help and motivate you so,

88
00:06:20,510 --> 00:06:23,930
if you have any questions, about the
content we've covered in this course,

89
00:06:23,930 --> 00:06:27,530
feel free to reach out to our support
team, the wonderful treehouse community,

90
00:06:27,530 --> 00:06:29,990
on our forum, or you can get hold of me on
Twitter.

91
00:06:29,990 --> 00:06:30,928
I'm @guilh.

92
00:06:30,928 --> 00:06:32,520
Thanks everyone.