- Introducing CSS Selectors 8:00
- Type Selectors 4 objectives
- ID Selectors 4:49
- Class Selectors 8:59
- ID and Class Selectors 6 objectives
- Descendant Selectors 4:37
- Descendant Selectors 3 objectives
- Pseudo-classes 7:41
- Pseudo-classes 3 objectives
- Using Comments in CSS 5:03
- Quiz: Basic Selectors 7 questions
Preview
Video Player
00:00
00:00
Pseudo-classes
7:41Pseudo-classes aren’t classes at all. You don’t use attributes to add pseudo-classes to your HTML document, the way you do with classes. Pseudo-classes instead target elements dynamically by selecting elements in a certain state, such as being hovered over by a mouse or selected using a keyboard. Pseudo-classes can also select elements based on certain characteristics, such as selecting the first element in a list.
Pseudo-classes aren't classes
at all. You don't use attributes
0:00
to add pseudo-classes to
your HTML document,
0:05
the way you do with classes.
Pseudo-classes instead target
0:08
elements dynamically by selecting
elements in a certain state,
0:12
such as being hovered over by
a mouse or selected using a
0:17
keyboard. Pseudo-classes can
also select elements based on
0:22
certain characteristics, such as
selecting the first element in a list.
0:27
Think of a pseudo-class as a
keyword we add to a selector
0:33
to style a special state
of an element.
0:38
Here in the MDN Docs, we're seeing
a list of standard pseudo-classes.
0:42
We're only going to cover
a few of these in this lesson,
0:48
starting with link
pseudo-classes.
0:52
Think of all the things a user
can do with hyperlinks.
0:56
They can simply observe a list
of links when a page loads.
1:01
They can hover over the link,
provided they're using a mouse.
1:04
Users can activate the link,
which happens once
1:09
the user presses down on the
link with the mouse or a finger.
1:11
And once the user lets go,
they'll visit the hyperlink's location.
1:17
In my CSS, I styled my links
earlier using the a type selector.
1:23
But I'm gonna modify that and
see if I can get a little more
1:29
specific using pseudo-classes.
First up, the :link pseudo-class
1:33
allows us to style links that
have not been visited.
1:38
So these are links that haven't
been clicked yet by the user.
1:43
We can select them by specifying
the a element followed
1:47
by a colon and
the word link.
1:51
When you preview this in
the browser, your links might
1:56
be the dark blue color that
we specified. Or they might be
1:58
the browser's default visited
color, which is a shade of purple.
2:03
I'm guessing you've visited
Treehouse's site before.
2:10
But if you've never
been to Codewars,
2:14
that link will be dark blue
because it's not yet visited.
2:16
Let's change what our visited
links look like by targeting
2:21
the :visited pseudo-class.
2:26
And now my visited link, which goes
to Treehouse, is colored seagreen.
2:43
You might have noticed we used
the text-decoration property
2:50
to remove the underlines
beneath our links.
2:55
What if we wanted to restore
those underlines upon hover?
2:59
We'll target the :hover
pseudo-class.
3:04
Note this particular pseudo-class
only works with a mouse, so
3:21
touchscreen audiences won't
see the underline. So when
3:26
styling, you want to make sure
your links look obviously like
3:30
links, without forcing your user to
hover over them to discover their
3:34
functionality. Links aren't the only
elements we can apply the :hover
3:40
pseudo-class to. We can actually
apply it to any element, like
3:46
headings or images. Let's try giving
the photo of Developer Diane a
3:51
border with rounded
edges upon hover.
3:57
Now, that works, but
it feels a little strange.
4:17
So I might undo that change.
4:21
Finally, let's take a look at
a pseudo-class called :focus.
4:27
The focus pseudo-class is only
applied to interactive elements
4:32
like links, buttons, and form
elements. The styles are
4:38
applied as soon as the element
has received focus, which means
4:41
the browser discovered that
a user is ready to interact with it.
4:46
The focus pseudo-class
is important to users
4:52
who are navigating your site using
a keyboard instead of a mouse.
4:55
Whether this is due to a broken
mouse, or perhaps a disability
5:00
impacting the user's vision or
motor skills, we want to make sure
5:03
it's obvious when the user selects
one of our links using the Tab key.
5:08
To do that, we'll simply need
to define the a element
5:15
with the focus psuedo-class,
since in this case,
5:20
all of our interactive elements
are simple text links.
5:25
In the browser, if we move
forward using the Tab key, or
5:41
backwards using Shift+Tab key,
we see that once a link obtains
5:47
focus, it takes on the styles defined
in the :focus pseudo-class.
5:53
Now a user dependent on keyboard
navigation will be able to tell
6:00
the interface element is selected.
6:05
So you might ask yourself,
6:09
are pseudo-classes only used
to detect user interactivity?
6:11
That's often what
they're used for, but
6:16
some pseudo-classes select
elements in other ways.
6:19
For instance, what if Diane
wanted to call attention to her
6:24
most recent award
or achievement?
6:29
We could solve this by adding a
class or ID to our HTML.
6:32
But pseudo-classes give
us another option.
6:37
The pseudo-class I've used
here, :first-child, means that
6:48
of all the list items that are
descendants of the ol element,
6:52
select only the first one
and make it bold.
6:57
What's cool is when I
update my HTML,
7:03
no change is needed to the CSS
to select that first list item.
7:07
The first item is still bold in
my browser. This technique
7:26
is great for something like a blog
where the content gets dynamically
7:30
updated, but you'd still like to call
visual attention to the newest post.
7:35