Preview

Start a free Courses trial
to watch this video

Descendant Selectors

4:37 with Anwar Montasir

CSS 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.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

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

You need to sign up for Treehouse in order to download course files.

You need to sign up for Treehouse in order to set up Workspace

CSS Basics

Descendant Selectors

Further reading

Related Discussions

Related Discussions