1
00:00:01,020 --> 00:00:06,030
So in this video we're going to focus on three CSSA selectors.

2
00:00:06,030 --> 00:00:08,490
Those are element ID in class.

3
00:00:08,610 --> 00:00:11,610
So there are way more options for selecting elements.

4
00:00:11,730 --> 00:00:15,630
We're going to learn about them later on we're just going to focus on these three to start.

5
00:00:15,960 --> 00:00:21,980
And when I say selector think back to this general rule that we talked about early on when it started

6
00:00:21,980 --> 00:00:28,370
CSSA a few videos ago where we have a selector and then curly braces and then some properties.

7
00:00:28,860 --> 00:00:32,660
So we're going to see a few different selectors that we can put right here.

8
00:00:33,030 --> 00:00:37,440
And the way that we're going to do that we're actually going to build a really simple to do list together

9
00:00:37,440 --> 00:00:38,340
.

10
00:00:38,340 --> 00:00:39,980
So I'm going to make a new file.

11
00:00:40,170 --> 00:00:44,580
I'm going to save it and I'm going to call it to do list that HMO

12
00:00:48,270 --> 00:00:51,740
once we have that then we go ahead and add the HMO.

13
00:00:52,530 --> 00:00:54,930
And the way that it's going to work it's going to be an H1

14
00:00:58,080 --> 00:01:01,550
and then we're going to have a well with allies.

15
00:01:02,010 --> 00:01:08,880
But in each ally we're going to have some text and we're going to have a little checkbox so see if you

16
00:01:08,880 --> 00:01:18,960
can remember how to do checkbox it's input type equals checkbox and then below that or after that we'll

17
00:01:18,960 --> 00:01:20,090
have our text.

18
00:01:20,220 --> 00:01:30,210
So we'll have walk rusty then I'm just going to duplicate this.

19
00:01:30,210 --> 00:01:39,020
So then we'll have three of them here walk Rusty just to buy groceries.

20
00:01:40,590 --> 00:01:41,490
And then lastly

21
00:01:45,150 --> 00:01:48,660
finish recording see assess Phidias.

22
00:01:48,960 --> 00:01:54,990
So if we open this up in a browser we're going to see a bland and styled version of our final product

23
00:01:55,440 --> 00:01:56,940
but the skeleton is there.

24
00:01:57,090 --> 00:02:01,520
We have our two do's and each one that's a little checkbox next to it.

25
00:02:02,650 --> 00:02:03,390
OK.

26
00:02:04,050 --> 00:02:08,590
So the next thing that we want to do is connect a style sheet.

27
00:02:09,060 --> 00:02:17,190
So to do that this time let's start by connecting a non-existing style sheet and then we'll go ahead

28
00:02:17,400 --> 00:02:18,480
and create a style sheet.

29
00:02:18,480 --> 00:02:23,970
So some people would call this error driven development where we write something that we know won't

30
00:02:23,970 --> 00:02:26,960
work and then we make it work afterwards.

31
00:02:26,970 --> 00:02:34,060
So I'm going to call this to do the assess introduce C see assess which doesn't exist.

32
00:02:34,670 --> 00:02:40,820
The next thing we're going to do is go ahead and make that file to Dewes that C assess.

33
00:02:40,920 --> 00:02:43,860
And this does need to be in the same place as to do a study.

34
00:02:43,860 --> 00:02:48,550
Tim I'll save that and just to make sure that it's connected.

35
00:02:48,660 --> 00:02:55,980
Let's do something like body background orange just and you know this is actually what I was talking

36
00:02:55,980 --> 00:02:57,870
about in the color video.

37
00:02:57,870 --> 00:03:01,380
This is one of the only times I would really use a color like orange.

38
00:03:01,380 --> 00:03:06,780
Aside from teaching I would just use it to make sure something is connected I just want a bright color

39
00:03:06,800 --> 00:03:06,870
.

40
00:03:06,930 --> 00:03:11,760
I want to see if this to use that C Ss is being referenced correctly here.

41
00:03:11,820 --> 00:03:12,920
So if we fresh.

42
00:03:13,170 --> 00:03:16,320
Okay great things are connected.

43
00:03:16,320 --> 00:03:23,580
So what we're going to do is go back to the slides here and talk about the elements selector first which

44
00:03:23,580 --> 00:03:27,180
is the one that we've actually devoted a lot of time to are ready.

45
00:03:27,180 --> 00:03:35,100
It's basically the type of attacks as you specify div or paragraph or body and then it will select all

46
00:03:35,100 --> 00:03:38,240
corresponding elements all instances that match that.

47
00:03:38,610 --> 00:03:46,620
So in this instance we have two divs and each div has two paragraphs and so we set all divs that background

48
00:03:46,620 --> 00:03:53,730
purple we get two purple device we set all paragraph to be COLOR YELLOW we get four yellow paragraphs

49
00:03:53,730 --> 00:03:54,900
.

50
00:03:55,140 --> 00:03:57,840
So that's what we're doing here when we select the body.

51
00:03:57,840 --> 00:04:08,190
We could also do it for all ALWIS and give them a order or let's chirp border of two pixels solid red

52
00:04:08,190 --> 00:04:10,320
.

53
00:04:10,910 --> 00:04:14,560
Now of course that works on all allies.

54
00:04:15,360 --> 00:04:15,970
OK.

55
00:04:16,380 --> 00:04:24,180
So the next thing that we might want to do is single out one ally or one H-1 or one instance of something

56
00:04:24,180 --> 00:04:24,850
.

57
00:04:24,870 --> 00:04:30,510
So in this example we're selecting the third lie and turning it yellow.

58
00:04:30,690 --> 00:04:37,020
And the way that we do that is actually by altering the team slightly and then using a hook that we

59
00:04:37,020 --> 00:04:41,800
add to the H T M L and R C Ss all refer back to it and turn it yellow.

60
00:04:42,180 --> 00:04:45,700
So the first step is to add that hook which is called an ID.

61
00:04:46,050 --> 00:04:52,420
And so the way that an idea works you add it as an attribute to any element ID equals.

62
00:04:52,440 --> 00:04:57,120
And then in quotes any name that you want it can be anything.

63
00:04:57,360 --> 00:05:03,860
And then what we do is refer to that later by writing Octa Thorpe or hash sign and then the name of

64
00:05:03,870 --> 00:05:08,420
the ID and that will select the of one element that matches that ID name.

65
00:05:08,820 --> 00:05:18,510
So as an example let's say that I want this final ally here to look slightly different.

66
00:05:19,080 --> 00:05:23,790
What I could do is go here Ally and let's give it an ID.

67
00:05:23,970 --> 00:05:25,860
And this can be any name at all.

68
00:05:25,950 --> 00:05:27,030
Let's just call this

69
00:05:29,620 --> 00:05:35,650
special and the reason I'm saying I'm calling it special it's not really a great name but it does show

70
00:05:35,650 --> 00:05:40,210
you that the point of using an ID is to single something out.

71
00:05:40,330 --> 00:05:46,490
It is a way to target one individual element and one note about an ID.

72
00:05:46,560 --> 00:05:49,300
It can only appear on a page one time.

73
00:05:49,480 --> 00:05:56,270
So if I do this and then try and give the ID special to two elements that's actually invalid HMO.

74
00:05:56,530 --> 00:05:58,920
So it's always supposed to be there one time on the page.

75
00:05:59,130 --> 00:06:02,640
It's purely used to single a single element out.

76
00:06:02,680 --> 00:06:09,280
We can however have multiple IDs on a page as long as they don't appear more than once.

77
00:06:09,590 --> 00:06:09,830
OK.

78
00:06:09,850 --> 00:06:12,180
So let's go with this special.

79
00:06:12,240 --> 00:06:17,180
Now let's make this let's take a look at it here.

80
00:06:17,350 --> 00:06:18,550
It's this last one here.

81
00:06:18,790 --> 00:06:20,390
Let's give it a background color.

82
00:06:20,650 --> 00:06:24,470
So to do that Id The name is special.

83
00:06:24,490 --> 00:06:32,670
We go to our CSSA file and we write special and we put an octave up in front of it and that just tells

84
00:06:32,950 --> 00:06:37,220
us that we're talking about an ID.

85
00:06:37,500 --> 00:06:48,020
So then all we do is write or C S S in here so let's do background color and let's make it yellow.

86
00:06:48,250 --> 00:06:54,730
Save the file refresh and you can see only this when it's yellow.

87
00:06:54,790 --> 00:06:56,770
So there's a few things I want to point out.

88
00:06:56,830 --> 00:06:59,890
The first is that this code is still working.

89
00:06:59,880 --> 00:07:01,760
It turns all allies.

90
00:07:01,930 --> 00:07:05,310
It gives them a red border including this one the final one.

91
00:07:05,650 --> 00:07:12,010
And then we're adding on top of that by adding a yellow background only to the last one based off of

92
00:07:12,000 --> 00:07:15,520
this hook that we added and called in ID.

93
00:07:15,580 --> 00:07:21,930
So to sum up an idea as a way to single out an element you can only use an ID once per page but we can

94
00:07:21,940 --> 00:07:24,480
have as many IDs as we want on a page.

95
00:07:24,730 --> 00:07:30,820
So IDs are great to single out individual elements but oftentimes we want to have multiple elements

96
00:07:30,810 --> 00:07:34,380
that look similar but we don't want all allies for instance.

97
00:07:34,450 --> 00:07:41,320
So let's say I wanted to style half of the Allies one way and half of them another way we could use

98
00:07:41,320 --> 00:07:43,410
a class to achieve that.

99
00:07:43,420 --> 00:07:48,970
So the way that a class works it's just like an ID except it's called a class and we can apply it to

100
00:07:49,020 --> 00:07:51,410
any number of elements on a page.

101
00:07:51,430 --> 00:07:57,850
So as you can see here we're applying a class called the highlight to the first paragraph and the third

102
00:07:57,850 --> 00:08:05,240
paragraph and then we refer to it in our success with a dot instead of an octave Thorpe.

103
00:08:05,250 --> 00:08:12,750
So again to contrast that here to select an ID we use the hash sign or the octave Thorpe here to select

104
00:08:12,750 --> 00:08:13,350
a class.

105
00:08:13,380 --> 00:08:14,540
We use dot.

106
00:08:14,710 --> 00:08:16,600
Otherwise they work the same way.

107
00:08:16,660 --> 00:08:19,030
So let's do an example.

108
00:08:19,230 --> 00:08:26,050
I'm going to add a class and the way that I want this to work we're going to pretend that these two

109
00:08:27,310 --> 00:08:28,390
are checked off.

110
00:08:28,480 --> 00:08:32,720
So I want there to be a line through the text.

111
00:08:32,760 --> 00:08:38,800
So when we look at buy groceries and walked resti there should be a strike through going through this

112
00:08:38,800 --> 00:08:40,810
text but not the last one.

113
00:08:40,840 --> 00:08:44,320
So the way that we do that or one way to do that is with the class.

114
00:08:44,400 --> 00:08:52,720
So on the fly I'm going to go ahead and add a class and it is going to call this completed and another

115
00:08:52,720 --> 00:08:58,050
one class equals completed and I'm going to save that and if I refresh.

116
00:08:58,170 --> 00:09:00,560
Nothing happens because I don't have any styles.

117
00:09:00,900 --> 00:09:09,580
So now I go to my C Ss and I right dot and then the name of the class completed curly braces and now

118
00:09:09,650 --> 00:09:10,850
style.

119
00:09:11,050 --> 00:09:18,030
So I'm going to introduce something new here which is called text decoration and text decoration is

120
00:09:18,040 --> 00:09:19,920
a way to add a line through.

121
00:09:20,080 --> 00:09:22,030
But there are a few things that you can do.

122
00:09:22,020 --> 00:09:28,710
You can add an underline and you can add a wavy underline Apparently I didn't know that a line through

123
00:09:29,200 --> 00:09:35,800
and an over line which is just like an underline except on top.

124
00:09:35,800 --> 00:09:40,560
So we're going to use line through and that should be it.

125
00:09:40,810 --> 00:09:42,060
So if I refresh.

126
00:09:42,120 --> 00:09:44,420
Keep your eye on these top two.

127
00:09:44,470 --> 00:09:46,400
We now get a line through.

128
00:09:46,840 --> 00:09:49,680
Great.

129
00:09:49,990 --> 00:09:56,340
One quick note while I'm here is that if I want these checkboxes to be checked when the page loads.

130
00:09:56,500 --> 00:10:01,420
So right now they're not checked and I have to manually check them but if I want the top two to be checked

131
00:10:02,470 --> 00:10:06,410
I can go here and add in an attribute called checked.

132
00:10:06,550 --> 00:10:10,370
And this works on checkbox inputs.

133
00:10:10,380 --> 00:10:15,580
So by doing that if I were fresh Now when the page loads they're checked.

134
00:10:15,750 --> 00:10:20,450
So let's not really see assess but it's important just to know that you can do that.

135
00:10:20,830 --> 00:10:21,100
OK.

136
00:10:21,100 --> 00:10:24,140
So let's wrap this up really quickly.

137
00:10:24,250 --> 00:10:28,680
We have the elements selector to select all of a given element.

138
00:10:28,720 --> 00:10:31,780
All ALWIS all divs all paragraphs.

139
00:10:32,120 --> 00:10:39,730
We have the ID selector which will select the one element with the matching ID and we always need to

140
00:10:39,730 --> 00:10:41,120
use an octave for that.

141
00:10:41,240 --> 00:10:42,590
Or a hash symbol.

142
00:10:42,970 --> 00:10:48,300
And then we have the class selector which is very similar to the ID selector except that we select based

143
00:10:48,310 --> 00:10:54,010
off of a class name and a class can occur as many times as we want on a given page unlike an ID which

144
00:10:54,000 --> 00:10:54,790
is only once