1
00:00:00,630 --> 00:00:04,510
In this video we're going to talk about a few other ways of selecting elements.

2
00:00:04,590 --> 00:00:07,530
Aside from the three main ones that we've seen so far.

3
00:00:08,070 --> 00:00:11,790
And just to recap those three are the elements selector

4
00:00:14,790 --> 00:00:27,450
the class and the ID selector so element would look like Ally class with like Dot low and ID is with

5
00:00:27,450 --> 00:00:36,420
the art or hash symbol and whatever we put inside will target an ID or a class or all elements of a

6
00:00:36,420 --> 00:00:37,780
type.

7
00:00:37,800 --> 00:00:42,290
So those are three possible ways of selecting elements but there are a lot more.

8
00:00:42,660 --> 00:00:46,560
And we're going to focus on five here and these five are ones that I think are the most important the

9
00:00:46,560 --> 00:00:47,310
most common.

10
00:00:47,460 --> 00:00:49,020
But there are a lot more.

11
00:00:49,230 --> 00:00:54,300
In fact there is this article that I linked to and the description on Tutt's Plus it's a free article

12
00:00:54,300 --> 00:00:54,330
.

13
00:00:54,330 --> 00:00:55,350
It's really great.

14
00:00:55,350 --> 00:01:00,990
It's called the 30 CSSA selectors you must memorize and before you panic you do not need to memorize

15
00:01:00,990 --> 00:01:01,710
these.

16
00:01:01,920 --> 00:01:05,700
You will naturally memorize the more important ones and the ones that we use all the time.

17
00:01:05,910 --> 00:01:11,520
But the point of this article is to say that there are at least 30 good ones that you should know about

18
00:01:11,520 --> 00:01:11,850
.

19
00:01:11,910 --> 00:01:17,030
Not to mention if these are the only 30 that you need to memorize that's still quite a bit.

20
00:01:17,130 --> 00:01:20,980
And there are a lot more that this article would suggests you don't need to know about.

21
00:01:21,120 --> 00:01:23,590
So the point is there's a lot of different ways of doing this.

22
00:01:23,610 --> 00:01:28,680
This article it highlights 30 of them and I'm just going to go through five or six of the more important

23
00:01:28,680 --> 00:01:29,270
ones.

24
00:01:29,460 --> 00:01:31,300
So I recommend that you give this a read through.

25
00:01:31,320 --> 00:01:36,960
There's going to be an exercise in the next video that encompasses a lot of what's covered in this article

26
00:01:36,960 --> 00:01:40,340
as well as what we cover over here and our text editor.

27
00:01:40,770 --> 00:01:43,060
So I have some basic HMO.

28
00:01:43,470 --> 00:01:45,920
I'm not going to go through the process of creating the file.

29
00:01:45,960 --> 00:01:51,510
This is not one that you need necessarily to code along with but it's a basic edged him out looks like

30
00:01:51,510 --> 00:01:55,190
this where we have an H1.

31
00:01:55,650 --> 00:01:57,860
We have a link that goes to Google.

32
00:01:57,960 --> 00:02:00,190
We have a UL with three allies.

33
00:02:00,600 --> 00:02:07,350
Then we have an H for and then another you will with three allies and then another four and then one

34
00:02:07,350 --> 00:02:14,460
more you will with three allies but each ally now has a link and the first one also goes to Google like

35
00:02:14,460 --> 00:02:15,860
this link up here.

36
00:02:16,180 --> 00:02:19,540
Then the other one goes to Facebook and the last one goes to read it.

37
00:02:19,590 --> 00:02:20,650
So simple markup.

38
00:02:20,970 --> 00:02:23,520
And then I have a style sheet included called selectors.

39
00:02:23,540 --> 00:02:30,510
SS So in here we're going to fill out RC SS So the very first one that we're going to talk about is

40
00:02:30,510 --> 00:02:38,360
called D-Star selector and it's with with an asterisk and it will select everything on the page.

41
00:02:38,730 --> 00:02:43,930
So this is not something that you actually want to do all that often but it looks like this.

42
00:02:44,080 --> 00:02:47,930
And then whatever we do will actually apply to every single element.

43
00:02:48,750 --> 00:02:57,690
So I'm going to give everything an element of one pixel solid light gray and you can see when I do that

44
00:02:58,260 --> 00:03:02,800
every single element on the page the body H-1 every link.

45
00:03:02,960 --> 00:03:06,800
Ally in H for all get border around.

46
00:03:07,080 --> 00:03:11,260
So this isn't something you need to do a lot but you will see it occasionally.

47
00:03:11,550 --> 00:03:17,970
The next one is the descendants Lechter and this one you'll use and see all the time.

48
00:03:18,030 --> 00:03:24,390
So the way that the descendant selector works is that it takes two or more tag names or two or more

49
00:03:24,390 --> 00:03:27,150
selectors and you chain them together.

50
00:03:27,150 --> 00:03:36,270
So give you an example if I want to select all of the anchor tags that are inside of an ally only the

51
00:03:36,270 --> 00:03:41,350
anchor tags inside of an ally not the the anchor tag appear that just on its own.

52
00:03:41,580 --> 00:03:45,860
I want to select all anchor tags that are descendants of an ally.

53
00:03:46,170 --> 00:03:53,340
So to do that the syntax looks like Ally space and then anchor tag.

54
00:03:53,970 --> 00:03:59,590
So this will select everything that is an age tag inside of an ally and we could keep going with this

55
00:03:59,590 --> 00:03:59,610
.

56
00:03:59,610 --> 00:04:05,640
If we had more so I could also rewrite this like this every anchor tag that's inside of an ally that's

57
00:04:05,700 --> 00:04:10,680
inside of a UL which is what we have here but that's redundant in our case.

58
00:04:11,460 --> 00:04:16,440
And I could also say every anchor tangere everything with the class Hello.

59
00:04:16,560 --> 00:04:20,070
Inside of an ally but we don't have any markup that matches that.

60
00:04:20,070 --> 00:04:22,120
So every anchor tag inside of an ally.

61
00:04:22,350 --> 00:04:28,720
And let's just give it a color of red and we refresh.

62
00:04:29,100 --> 00:04:32,460
And you can see those three anchor tags are red.

63
00:04:32,490 --> 00:04:34,690
This one is unchanged.

64
00:04:35,580 --> 00:04:38,400
Next up is the adjacent selector.

65
00:04:38,970 --> 00:04:44,490
So with the adjacent selector will do is it will like let us select elements that come after another

66
00:04:44,490 --> 00:04:44,980
element.

67
00:04:45,030 --> 00:04:49,910
So not nested inside like this is an ally nested in a well.

68
00:04:50,100 --> 00:04:52,200
It allows us to select a sibling.

69
00:04:52,350 --> 00:05:01,140
So we're going to select all ULS that come after an H for and by after we mean just on the same level

70
00:05:01,140 --> 00:05:01,200
.

71
00:05:01,200 --> 00:05:07,380
So not indented not inside the fork but directly after just as a sibling on the same level of an H for

72
00:05:07,380 --> 00:05:07,970
it.

73
00:05:07,980 --> 00:05:11,410
So that's called the adjacent selector and it looks like this.

74
00:05:11,670 --> 00:05:16,780
We're going to say age four plus you will.

75
00:05:16,890 --> 00:05:21,920
So without the plus this would be all us inside and age 4 but with the plus.

76
00:05:21,960 --> 00:05:24,810
It just is us that are adjacent to an age 4.

77
00:05:24,990 --> 00:05:33,330
And I'm just going to give a border let's do four pixel solid red and we should see these two UL's that

78
00:05:33,330 --> 00:05:34,080
are adjacent.

79
00:05:34,080 --> 00:05:40,740
They come after this age four on the same level have a red border.

80
00:05:40,920 --> 00:05:45,390
So one more that I want to show this and this is also a really important one is called the attribute

81
00:05:45,390 --> 00:05:46,170
selector.

82
00:05:46,410 --> 00:05:51,270
And so the attribute selector is a way to select elements based off of any attribute.

83
00:05:51,660 --> 00:05:56,620
So in our case we're going to do a selection based off of the H ref attribute.

84
00:05:56,970 --> 00:06:01,920
We're going to check we're going to turn all the links to Google where H.F. is Google dot com.

85
00:06:01,920 --> 00:06:07,350
We're going to make them one color but you could also use this to select all images of a particular

86
00:06:07,350 --> 00:06:15,210
source or all inputs of a particular type like all checkboxes or all password fields or something.

87
00:06:15,210 --> 00:06:23,250
So the syntax we type anchor tag and then square braces and then inside we're going to type the attribute

88
00:06:23,250 --> 00:06:24,290
that we're looking for.

89
00:06:24,540 --> 00:06:32,850
So Tref equals and then we're going to do the links to Google.

90
00:06:32,850 --> 00:06:40,470
So this will select every anchor tag with HGF equal to this and then we're just going to give it a color

91
00:06:40,650 --> 00:06:41,580
lets give it a background

92
00:06:44,240 --> 00:06:44,760
blue

93
00:06:48,240 --> 00:06:50,530
and you can see these two links.

94
00:06:50,520 --> 00:06:53,650
This first one goes to Google and the second one goes to Google.

95
00:06:53,820 --> 00:06:54,750
So they are blue.

96
00:06:54,870 --> 00:06:57,270
But the other two links don't go to Google.

97
00:06:57,270 --> 00:06:59,340
They go to Facebook and to read it.

98
00:06:59,340 --> 00:07:01,030
So they are unchanged.

99
00:07:01,800 --> 00:07:10,680
So you might also and you will actually see this one a lot or will have an input type equals text if

100
00:07:10,680 --> 00:07:18,600
you want it to style all text inputs differently or if you want it to style all checkboxes one way because

101
00:07:19,110 --> 00:07:26,370
all inputs even though there are so many different inputs color to color inputs and file pictures and

102
00:07:26,370 --> 00:07:30,170
password and emails and submit buttons they are all an input tag.

103
00:07:30,420 --> 00:07:34,460
So just to select by input is going to give us all different types of inputs.

104
00:07:34,500 --> 00:07:37,580
So we often select by type.

105
00:07:37,620 --> 00:07:42,680
So let's go back to our Google ref selector.

106
00:07:43,650 --> 00:07:48,170
So there's one more that I want to talk about here which is called End of type and the way the end of

107
00:07:48,270 --> 00:07:51,710
type works is it takes a number like three or five.

108
00:07:51,930 --> 00:07:55,710
And then it selects every end of a specific element.

109
00:07:55,710 --> 00:08:06,540
So if I want to select every fifth div or every second ally or the fifth the tenth paragraph on a page

110
00:08:06,570 --> 00:08:08,390
I could use and of type.

111
00:08:08,400 --> 00:08:15,120
So in this case Drona select the final UL and do something to the final.

112
00:08:15,130 --> 00:08:17,570
Well the third one.

113
00:08:18,210 --> 00:08:29,550
Let's say I want to give it a different border or different background I'll select Well colon and of

114
00:08:30,030 --> 00:08:33,410
type and then a number like three.

115
00:08:33,860 --> 00:08:35,750
And then I'm going to say background.

116
00:08:36,080 --> 00:08:45,030
And let's give it obvious background like purple and you can see only the third you well turned purple

117
00:08:45,030 --> 00:08:47,400
.

118
00:08:47,400 --> 00:08:51,420
So this is useful if you want to select something down the page.

119
00:08:51,420 --> 00:08:59,700
One thing that I should note though is the way that this works is let's go to an ally and change a third

120
00:08:59,790 --> 00:09:00,370
lie.

121
00:09:00,480 --> 00:09:04,120
And before I do that I want you to imagine what you think is going to happen.

122
00:09:04,170 --> 00:09:08,160
So this is supposed to select the third ally.

123
00:09:08,400 --> 00:09:10,960
So that would be this one here I guess.

124
00:09:11,220 --> 00:09:15,170
But as it refresh you'll see it actually selects every third lie.

125
00:09:15,390 --> 00:09:19,620
So from every group of allies it's going to select the third one.

126
00:09:20,210 --> 00:09:24,370
And so if I had a bunch more.

127
00:09:26,520 --> 00:09:32,070
It's important to note that it's still only so like the third in a given group so it's not every third

128
00:09:32,070 --> 00:09:39,180
one as if it would select asparagus again and then asparagus again it's just in every group of them

129
00:09:39,210 --> 00:09:41,790
it's going to select the third one.

130
00:09:41,790 --> 00:09:48,690
There is however a way to get it to select an even number so I can select every other ally and make

131
00:09:48,690 --> 00:09:50,370
it purple like this