- 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
Descendant Selectors
4:37CSS also lets us target elements based on their relationship in the HTML document. For instance, we can combine selectors to create what's called a descendant selector because it targets an element that is a descendant of another element. By “descendant”, I mean any element nested within another element, like a p element inside a header element. Descendant selectors are more specific than type selectors.
CSS also lets us target elements
based on their relationship in the
0:00
HTML document. For instance, we
can combine selectors to create
0:05
what's called a descendant selector
because it targets an element that
0:11
is a descendant of another element.
By descendant, I mean any element
0:16
nested within another element, like
a p element inside a header element.
0:21
Descendant selectors are more
specific than type selectors.
0:27
In our HTML file, notice the
p elements nested inside
0:33
the address element, which is
inside the header. Because this
0:38
p element is a descendant of the
header, we can use a descendant
0:43
selector to target only the p
elements found inside a header
0:49
element. To create a descendant
selector, we'll need to use
0:54
two or more selectors
separated by whitespace.
0:59
So in our style sheet, right
below the header rule, we'll
1:04
write a descendant selector by
writing the header element first,
1:07
followed by a space and
then the p element selector.
1:13
And now we see those
styles applied only to the
1:33
paragraphs inside the header.
1:37
Descendant selectors are not
limited to just type selectors.
1:43
We can also add specificity
with class and ID selectors.
1:49
For example, what if I wanted to
style not all the h3 elements, but
1:55
only those that are descendants
of the education ID?
2:00
Now the selector gets quite
specific, since we're
2:20
telling the browser to apply
these styles to an h3 element,
2:23
but only if it's a descendant of
an element with the ID education.
2:29
And let's check that
out in the browser.
2:35
Descendant selectors are also
commonly used to style lists.
2:43
For example, if I were to apply
the following to my list items:
2:48
and check the
results in the browser.
3:00
That works fine.
3:05
My list items, whether
ordered or unordered,
3:07
have text that is spaced out
horizontally. And the text is
3:10
now tomato colored, unless I
specified elsewhere that I
3:15
wanted a different color. But
watch what happens when
3:19
we get more specific
using a descendant selector.
3:23
Now, the list items are spread
out horizontally and have tomato
3:33
colored text only if those list
items belong to a numbered
3:38
or ordered list. My bulleted or
unordered lists are left alone.
3:44
Descendant selectors,
like IDs, are very specific.
3:53
So we need to be careful
with how we use them.
3:58
If you're making a broad change
across your entire document,
4:01
such as removing all of the
bullets from your unordered
4:06
lists, a descendant selector
can be a great tool.
4:10
But using too many descendant
selectors can make our CSS
4:17
rules less reusable. If you're
aiming for a more specific
4:21
change that will be applied
to certain areas of your
4:24
document, a class selector
is likely a better choice.
4:30