1
00:00:00,970 --> 00:00:05,840
CSS also lets us target elements 
based on their relationship in the

2
00:00:05,840 --> 00:00:11,450
 HTML document. For instance, we 
can combine selectors to create 

3
00:00:11,450 --> 00:00:16,231
what's called a descendant selector 
because it targets an element that 

4
00:00:16,231 --> 00:00:21,284
is a descendant of another element.
By descendant, I mean any element


5
00:00:21,284 --> 00:00:27,393
nested within another element, like 
a p element inside a header element.

6
00:00:27,393 --> 00:00:32,086
Descendant selectors are more
specific than type selectors.

7
00:00:33,486 --> 00:00:38,778
In our HTML file, notice the
p elements nested inside

8
00:00:38,778 --> 00:00:43,846
the address element, which is 
inside the header. Because this

9
00:00:43,846 --> 00:00:49,086
p element is a descendant of the 
header, we can use a descendant

10
00:00:49,086 --> 00:00:54,220
selector to target only the p 
elements found inside a header 

11
00:00:54,220 --> 00:00:59,802
element. To create a descendant 
selector, we'll need to use

12
00:00:59,802 --> 00:01:03,040
two or more selectors 
separated by whitespace.

13
00:01:04,200 --> 00:01:07,997
So in our style sheet, right 
below the header rule, we'll

14
00:01:07,997 --> 00:01:13,475
write a descendant selector by
writing the header element first,

15
00:01:13,475 --> 00:01:17,386
followed by a space and
then the p element selector.

16
00:01:33,170 --> 00:01:37,072
And now we see those 
styles applied only to the

16b
00:01:37,072 --> 00:01:39,572
paragraphs inside the header.

17
00:01:43,811 --> 00:01:49,190
Descendant selectors are not 
limited to just type selectors.

18
00:01:49,190 --> 00:01:55,464
We can also add specificity 
with class and ID selectors.

19
00:01:55,464 --> 00:02:00,648
For example, what if I wanted to
style not all the h3 elements, but

20
00:02:00,648 --> 00:02:05,258
only those that are descendants
of the education ID?

21
00:02:20,763 --> 00:02:23,673
Now the selector gets quite 
specific, since we're 

22
00:02:23,673 --> 00:02:29,137
telling the browser to apply 
these styles to an h3 element,

23
00:02:29,137 --> 00:02:34,090
but only if it's a descendant of
an element with the ID education.

24
00:02:35,270 --> 00:02:37,888
And let's check that 
out in the browser.

25
00:02:43,301 --> 00:02:48,840
Descendant selectors are also
commonly used to style lists.

26
00:02:48,840 --> 00:02:53,061
For example, if I were to apply
the following to my list items:

27
00:03:00,586 --> 00:03:02,651
and check the 
results in the browser.

28
00:03:05,133 --> 00:03:07,600
That works fine.

29
00:03:07,600 --> 00:03:10,968
My list items, whether 
ordered or unordered,

30
00:03:10,968 --> 00:03:15,550
have text that is spaced out 
horizontally. And the text is

31
00:03:15,550 --> 00:03:19,492
now tomato colored, unless I 
specified elsewhere that I

32
00:03:19,492 --> 00:03:23,640
wanted a different color. But 
watch what happens when 

33
00:03:23,640 --> 00:03:27,888
we get more specific 
using a descendant selector.

34
00:03:33,514 --> 00:03:38,973
Now, the list items are spread
out horizontally and have tomato

35
00:03:38,973 --> 00:03:44,390
colored text only if those list 
items belong to a numbered 

36
00:03:44,390 --> 00:03:49,979
or ordered list. My bulleted or
unordered lists are left alone.

37
00:03:53,795 --> 00:03:58,150
Descendant selectors,
like IDs, are very specific.

38
00:03:58,150 --> 00:04:01,630
So we need to be careful
with how we use them.

39
00:04:01,630 --> 00:04:06,109
If you're making a broad change
across your entire document,

40
00:04:06,109 --> 00:04:10,598
such as removing all of the 
bullets from your unordered

41
00:04:10,598 --> 00:04:13,892
 lists, a descendant selector 
can be a great tool.

42
00:04:17,891 --> 00:04:21,560
But using too many descendant 
selectors can make our CSS 

42b
00:04:21,560 --> 00:04:24,960
rules less reusable. If you're
aiming for a more specific

43
00:04:24,960 --> 00:04:30,112
change that will be applied 
to certain areas of your 

44
00:04:30,112 --> 00:04:34,870
document, a class selector 
is likely a better choice.