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
Pseudo-classes select elements dynamically based on their state, as well as their position in a group of sibling elements, and more. Selectors use combinators to target elements based on how they are related to one another.
[MUSIC]
0:00
In this stage you’re going
to learn about the power and
0:04
flexibility of pseudo-classes and
combinators in CSS selectors.
0:07
Elements on a webpage
have different states.
0:11
For example, links and buttons have
a hover state as well as active and
0:13
focused states, and
text fields also have a focus state.
0:17
CSS provides pseudo-class
selectors that match
0:21
HTML elements based on their state and
a user's actions.
0:24
For example, select a button as
a user hovers their mouse over it and
0:28
change it's background and text color.
0:32
A pseudo-class is a keyword
added to a selector
0:35
that specifies a special state of
the selected element or elements.
0:38
Pseudo-classes not only target elements
dynamically based on their state, but
0:42
also their position in a group
of sibling elements and more.
0:47
You've learned how to
target one element or
0:51
a set of matching elements at a time
using type, ID, and class selectors.
0:53
In this stage you're also going to learn
how CSS gives you a more fine grained
0:58
approach to targeting
elements with combinators.
1:02
Combinators select elements based on
how they are related to one another.
1:05
For example, a combinator can target
a specific descendant of an element,
1:09
it can target only elements that
are direct children of a parent, or
1:14
target an immediate sibling element and
1:18
general siblings that follow
a specific type of element.
1:20
In the next step you'll start by
working with dynamic pseudo-classes.
1:24
On we go.
1:28
You need to sign up for Treehouse in order to download course files.
Sign up