"Swift 2.0 Collections and Control Flow" was retired on May 31, 2020. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed CSS Selectors!
You have completed CSS Selectors!
Preview
The ::first-line and ::first-letter pseudo-elements let us target the first line of text and the first character in a line of text.
Quick Reference
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Pseudo-elements are similar to
pseudo-classes, but
0:00
instead of describing a state, like
pseudo-classes do,
0:03
pseudo-elements style certain parts of an
element.
0:06
And they can insert elements and content,
into our page, from our CSS.
0:10
Pseudo-elements are exactly what their
name implies.
0:14
They are phony elements that are not part
of the DOM,
0:17
the way real HTML elements are.
0:20
And they can help keep our HTML cleaner,
because they target virtual elements that
0:23
are not defined in the markup, and they
don't appear in the source code.
0:27
Now, there are four types of
pseudo-elements in CSS.
0:31
So, let's begin by taking a look at the
first line, and
0:34
first letter pseudo-elements.
0:38
Since text in paragraphs is usually fluid
on most sites, selecting and
0:41
formatting the first rendered line of
text, would not be possible with class or
0:45
ID selectors, because the line width
varies so much.
0:50
So, this is where the first line
pseudo-element, will sort of work its
0:55
magic, by targeting and styling the first
rendered line of text, in a paragraph.
0:59
No matter how narrow, or how wide, the
line of text.
1:04
So, back in our latest workspace, let's
scroll down to the first paragraph.
1:08
And even though the first line of this
intro paragraph,
1:13
does not have any HTML tags around it,
1:17
as we can see here in the markup, we're
still able to select it and style it.
1:20
So, let's go over to our CSS directory,
and open up the style.css file.
1:24
And we're gonna create our pseudo-element
selector, by first targeting
1:30
the class intro, followed by a colon, then
we're gonna type, first-line.
1:35
[BLANK_AUDIO]
1:41
And we're going to give that first
rendered line of text,
1:44
a font weight property, and we're gonna
set the value to bold, and
1:47
we're also gonna increase the font size.
1:51
So, let's set the font-size value to 1.4em.
1:53
All right?
1:58
So, once we save our style sheets, and
refresh the browser,
1:59
notice how this selects the first line of
the intro paragraph, and
2:03
it styles it with those styles we
declared.
2:08
And if we resize the viewport, we can see
how the first line pseudo-element,
2:10
will always select the first line of text
rendered by the browser,
2:15
no matter the line width.
2:19
While the first line pseudo-element
identifies the first line of
2:21
text within an element, we can also use
the first letter pseudo-element,
2:25
to identify the first letter of text,
within an element.
2:30
So, first letter will actually target the
very first character,
2:35
of the first line of text.
2:39
And it's commonly used for creating
typographical effects like drop caps,
2:41
where the first letter on the paragraph is
enlarged, to drop down two or more lines.
2:46
And this makes the letter stand out from
the rest of the paragraph.
2:50
So, let's see how we're able to select and
2:53
style that first letter of our paragraph,
with the first letter pseudo-element.
2:56
So, right below the first line rule, we'll
again target the intro class.
3:01
And this time we're gonna write, colon,
first-letter.
3:07
[BLANK_AUDIO]
3:11
So, let's add a few CSS properties to
style the first letter.
3:15
Let's first float it left.
3:19
An d we're going to change the font size.
3:22
Let's set the value to 80 pixels, and
let's change the color value to white.
3:24
Let's also give it some padding.
3:32
So, let's make the padding value, five
pixels, ten pixels.
3:33
Right below that, let's change the
background color,
3:39
with a background property.
3:41
And we're gonna make it a hex value of
pound 384047.
3:43
Let's also give it some margins.
3:50
So, we'll add a margin property.
3:53
And let's set the top margin to ten
pixels, the right margin to ten pixels,
3:55
and then, bottom zero, left zero.
4:00
All right, two more properties.
4:03
Let's give it a nice border radius, so,
we'll add a border-radius property, and
4:04
let's set it to five pixels, and finally
let's change the line height.
4:09
So, let's add a line height property, and
set it to one.
4:13
Right?
4:16
So, let's take a look at our awesome drop
cap.
4:17
We'll save our style sheet.
4:19
And once we refresh the page, we see those
new styles applied to the very
4:21
first letter of our paragraph, so now it
looks like a drop cap, cool.
4:26
So, before we continue,
4:30
sometimes we might see pseudo-elements
that use double colons, instead of one.
4:32
Now, the double colon is simply used to
distinguish between pseudo-classes, and
4:38
pseudo-elements, since pseudo-classes use
one colon.
4:42
But browsers will still support both
values, and
4:45
they will work exactly the same way.
4:48
So, moving forward, we're going to stick
with the double colon syntax.
4:50
[BLANK_AUDIO]
4:54
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up