NOTE
This file was generated by Descript <www.descript.com>
1

00:00:00,000  -->  00:00:01,259
Hi guys and welcome back.

2

00:00:01,290  -->  00:00:05,240
In this video, let's take a look
at some more selectors in CSS.

3

00:00:05,480  -->  00:00:09,290
So far we've learned and how to
select specific elements, how to

4

00:00:09,290  -->  00:00:13,400
select classes and how to select IDs
as well as the universal selector.

5

00:00:13,610  -->  00:00:17,810
But there's actually a few more that
even if you're not using very often,

6

00:00:18,049  -->  00:00:21,500
you should probably know about so that
you at least understand what's going on

7

00:00:21,500  -->  00:00:23,299
when you read somebody else's CSS code.

8

00:00:23,360  -->  00:00:24,650
So let's take a look at some of them.

9

00:00:25,876  -->  00:00:29,700
The first one that we're going to
look at is the descendant combinator.

10

00:00:30,106  -->  00:00:35,176
A descendant element is any element that
is part of the content of another element,

11

00:00:35,476  -->  00:00:38,356
but they don't need to be direct children.

12

00:00:38,356  -->  00:00:41,896
In this example here, we've got
the unordered list or <ul> element.

13

00:00:42,316  -->  00:00:46,486
Inside the element we have three
<li> elements, and inside one

14

00:00:46,486  -->  00:00:48,196
of them, we have an <a> element.

15

00:00:48,636  -->  00:00:51,726
This is a descendant of this.

16

00:00:52,130  -->  00:00:55,160
So is this one because
they're both inside the <ul>.

17

00:00:55,570  -->  00:01:00,970
But the a element is also a descendant
of the <ul> element because it is inside

18

00:01:00,970  -->  00:01:03,309
it even if it's not a direct child.

19

00:01:03,680  -->  00:01:08,076
We would also say that these <li> element
and these three are siblings because

20

00:01:08,076  -->  00:01:10,266
all of them are inside the same parent.

21

00:01:10,756  -->  00:01:13,791
Descendants and siblings those are
two terms that you need to know.

22

00:01:14,194  -->  00:01:18,964
Descendant combinator in CSS is a means
of combining two or more selectors to

23

00:01:18,964  -->  00:01:21,574
describe an ancestral relationship.

24

00:01:21,654  -->  00:01:25,254
We can achieve this by placing one
or more spaces between selectors.

25

00:01:25,274  -->  00:01:30,032
So let's say that we want to target,
all the <li> elements of this list.

26

00:01:30,622  -->  00:01:35,292
li is going to target all  <li>
elements, no matter where they are,

27

00:01:35,892  -->  00:01:41,112
but if we do ul space li , now we're
targeting all the <li> elements

28

00:01:41,172  -->  00:01:43,392
that are inside an unordered list.

29

00:01:43,762  -->  00:01:48,742
It does not target <li> elements that
are inside an ordered list for example.

30

00:01:49,242  -->  00:01:51,102
So we can do color: orangered.

31

00:01:51,599  -->  00:01:55,339
Now when we refresh this, you'll see
that  <li> elements and the bullet points

32

00:01:55,399  -->  00:01:59,629
turn orangered, but the link does not
turn orange red again because of what we

33

00:01:59,629  -->  00:02:01,219
discussed earlier on with inheritance.

34

00:02:01,279  -->  00:02:03,319
It already has a default color set.

35

00:02:03,812  -->  00:02:08,042
Let's say that we want to target
specifically the <a> element,

36

00:02:08,102  -->  00:02:12,122
which is inside an <li> element,
which is inside an <ul> element.

37

00:02:12,332  -->  00:02:14,562
So we just do a in there.

38

00:02:14,872  -->  00:02:18,612
Now we're targeting the <ul>
element, the <li> element inside

39

00:02:18,612  -->  00:02:20,502
it and the <a> element inside that.

40

00:02:20,999  -->  00:02:24,359
When we do this, the <li>  is going
to turn orange, but the rest is going

41

00:02:24,359  -->  00:02:28,379
back to the default color because we're
no longer targeting the <li> elements.

42

00:02:28,379  -->  00:02:30,619
We're targeting the <a>
elements inside them.

43

00:02:31,019  -->  00:02:34,019
You can have a chain of a lot of
these selectors if you want and

44

00:02:34,019  -->  00:02:37,559
you can describe as an elaborate
ancestral relationship as you want.

45

00:02:37,899  -->  00:02:40,809
But normally these things can get
a bit confusing so I generally

46

00:02:40,809  -->  00:02:42,669
recommend you don't do this very often.

47

00:02:43,169  -->  00:02:47,669
Not only do these chains tie styles
very closely to the structure of

48

00:02:47,669  -->  00:02:51,329
the document, it also makes it hard
to reuse styles later on as well.

49

00:02:51,872  -->  00:02:55,232
Alright , let's now take a
look at the child combinator.

50

00:02:55,629  -->  00:02:57,579
I'm going to close these two
files that we've got open it.

51

00:02:57,579  -->  00:02:59,289
I'm going to open it these two in here.

52

00:02:59,289  -->  00:03:00,639
So I'll show you what they contain.

53

00:03:01,199  -->  00:03:05,932
We've got the index dot html that contains
a <dl> element for a definition list.

54

00:03:06,332  -->  00:03:10,962
In here we've got a term or a <dt>
as well as a definition or a <dd>.

55

00:03:11,509  -->  00:03:14,772
So these elements here
are used to define terms.

56

00:03:15,276  -->  00:03:19,086
So let me just copy the path here
and I'm going to paste it in here.

57

00:03:19,086  -->  00:03:20,106
You'll see what this looks like.

58

00:03:20,116  -->  00:03:23,466
It has some default styles there,
nothing that's too interesting, but

59

00:03:23,466  -->  00:03:25,536
we can make changes here very easily.

60

00:03:26,026  -->  00:03:30,406
We can specify more precise
ancestry using the child combinator.

61

00:03:30,406  -->  00:03:33,806
So when we're using the child
combinator, we use the crocodile clip.

62

00:03:33,806  -->  00:03:37,886
So dl greater than
dt  or crocodile clip dt.

63

00:03:38,376  -->  00:03:42,679
What this means is we're now targeting
the <dt> element, which must be a

64

00:03:42,679  -->  00:03:45,619
direct child of the <dl> element.

65

00:03:46,119  -->  00:03:51,039
Let's say that we want to set the font
weight to 700, which sets it to bold.

66

00:03:51,669  -->  00:03:54,729
Now we can refresh the page and you
can see that the "Dog" has turned bold.

67

00:03:54,729  -->  00:03:56,199
Let me just zoom in there a little bit.

68

00:03:57,009  -->  00:03:59,619
So what if we add a div here?

69

00:03:59,809  -->  00:04:02,569
We're just added the div, which is
something that we can do quite often

70

00:04:02,549  -->  00:04:06,209
for styling purposes to apply some
common styles to this container.

71

00:04:06,699  -->  00:04:11,109
Now, if we refresh the page, this
is no longer bold because the <dt>

72

00:04:11,182  -->  00:04:13,696
is not a direct child of <dl>.

73

00:04:14,196  -->  00:04:19,836
Note that if we remove these entirely,
this is now a descendant combinator,

74

00:04:19,836  -->  00:04:23,866
so we're targeting any <dt> elements
that is inside a <dl> element.

75

00:04:23,886  -->  00:04:26,946
This would once again go back to
bold because this doesn't care

76

00:04:26,946  -->  00:04:28,566
whether it's a direct child or not.

77

00:04:28,836  -->  00:04:34,106
So you've got the space for any child
and the greater than for direct child.

78

00:04:34,606  -->  00:04:39,436
Alright, let's talk about another selector
and the general sibling combinator.

79

00:04:39,556  -->  00:04:43,456
So here, we've got a not a great
example of HTML code, but it'll do

80

00:04:43,456  -->  00:04:45,106
for what we want to show in CSS.

81

00:04:45,106  -->  00:04:46,216
We've got a form.

82

00:04:46,766  -->  00:04:50,036
An input element, which just
displays as a text field.

83

00:04:50,436  -->  00:04:52,576
Then we've got a label
which displays as text.

84

00:04:52,576  -->  00:04:56,136
And then we've got two more inputs,
which display as two more text fields.

85

00:04:56,166  -->  00:05:00,336
The general sibling Combinator is
used to select siblings of a given

86

00:05:00,336  -->  00:05:02,226
element that matched the selector.

87

00:05:02,256  -->  00:05:05,676
So we'll do styles.css I'm going to
close this down here and what we're going

88

00:05:05,676  -->  00:05:11,222
to do is label squiggly input and what
this is selecting is any input elements

89

00:05:11,252  -->  00:05:13,532
that are siblings of a label element.

90

00:05:13,979  -->  00:05:17,756
So let me just add some padding,
for example, to these elements.

91

00:05:18,149  -->  00:05:22,109
Now refresh, and you can see
that these two here have changed.

92

00:05:22,612  -->  00:05:26,482
Earlier on I mentioned that, these
elements are all siblings because

93

00:05:26,482  -->  00:05:28,732
they share a parent and that is true.

94

00:05:29,092  -->  00:05:32,032
The general sibling combinator
though, only selects elements that

95

00:05:32,032  -->  00:05:34,252
come after the element we target.

96

00:05:34,582  -->  00:05:38,572
So here we're saying grab me any
inputs, that are siblings of a

97

00:05:38,572  -->  00:05:40,672
label and that come after the label.

98

00:05:41,172  -->  00:05:43,126
So that's why these two change there.

99

00:05:43,626  -->  00:05:46,316
Alright, let's take a look at
the final combinator, which is

100

00:05:46,316  -->  00:05:48,686
the adjacent sibling combinator.

101

00:05:48,716  -->  00:05:52,046
Here we've got the exact same
HTML, but the CSS file is empty

102

00:05:52,046  -->  00:05:54,837
so I'm going to close this sidebar
here and show you what that does.

103

00:05:54,897  -->  00:05:58,647
Oh, by the way, I should copy this
here and go in there so you can

104

00:05:58,647  -->  00:06:00,037
see that this is all unchanged.

105

00:06:00,407  -->  00:06:04,857
I am going to do label plus input and
then we're going to add the padding.

106

00:06:05,351  -->  00:06:08,591
Now you'll see that
only this, changes here.

107

00:06:08,891  -->  00:06:13,601
The plus select a sibling that
comes directly after this.

108

00:06:13,731  -->  00:06:16,431
In this case, the input that
comes directly after the label

109

00:06:16,581  -->  00:06:18,441
and they must be siblings.

110

00:06:18,951  -->  00:06:22,461
Okay, so this allows us to target
only one element that comes directly

111

00:06:22,461  -->  00:06:26,317
after or with the squiggly as we
learned earlier, we can target all the

112

00:06:26,317  -->  00:06:28,297
elements that come after another one.

113

00:06:29,394  -->  00:06:31,194
So I know that this is a lot to take in.

114

00:06:31,194  -->  00:06:35,244
We've learned about the descendant
combinator, the direct child

115

00:06:35,244  -->  00:06:39,274
combinator, as well as the sibling
and adjacent sibling combinators.

116

00:06:39,294  -->  00:06:42,594
You don't have to remember
everything by heart, but just

117

00:06:42,594  -->  00:06:46,134
remember that they do exist later
on when you're working on a project.

118

00:06:46,344  -->  00:06:50,384
At some point you might think, ah, I
could do with the targeting these elements

119

00:06:50,384  -->  00:06:53,889
specifically and you're going to be able
to do that a bit more easily with these.

120

00:06:54,249  -->  00:06:57,189
However, they're not used that often.

121

00:06:57,399  -->  00:07:02,529
It's much more common to put classes into
elements and target those directly rather

122

00:07:02,529  -->  00:07:05,349
than do complex combinator selections.

123

00:07:05,629  -->  00:07:06,039
Okay!

124

00:07:06,039  -->  00:07:07,539
Thank you for joining me in this video.

125

00:07:07,569  -->  00:07:09,929
I hope you've enjoyed it and
I'll see you in the next one.