Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,454 --> 00:00:02,810
(Lecturer) Welcome back.
2
00:00:02,810 --> 00:00:04,610
Now, as we keep progressing
3
00:00:04,610 --> 00:00:07,275
through this CSS fundamentals section,
4
00:00:07,275 --> 00:00:09,800
there are a couple of fundamental
5
00:00:09,800 --> 00:00:12,930
and really important theoretical concepts
6
00:00:12,930 --> 00:00:15,160
that you really need to understand
7
00:00:15,160 --> 00:00:18,660
in order to eventually master CSS.
8
00:00:18,660 --> 00:00:22,850
Therefore, this section contains five theory lectures,
9
00:00:22,850 --> 00:00:25,180
and this one is the first one.
10
00:00:25,180 --> 00:00:27,400
And it's all about what happens
11
00:00:27,400 --> 00:00:29,833
when there are multiple CSS rules
12
00:00:29,833 --> 00:00:32,810
that apply to the same elements.
13
00:00:32,810 --> 00:00:36,490
So, as we have written our code until this point,
14
00:00:36,490 --> 00:00:39,030
we have created a couple of situations
15
00:00:39,030 --> 00:00:41,870
in which multiple CSS selectors,
16
00:00:41,870 --> 00:00:45,000
and, therefore, multiple CSS rules,
17
00:00:45,000 --> 00:00:48,610
apply to the exact same element.
18
00:00:48,610 --> 00:00:51,820
And I call that conflicting selectors.
19
00:00:51,820 --> 00:00:53,840
So let's now learn what happens
20
00:00:53,840 --> 00:00:55,583
in situations like that.
21
00:00:57,530 --> 00:00:59,070
So, here is an example
22
00:00:59,070 --> 00:01:01,190
that is similar to the code
23
00:01:01,190 --> 00:01:02,990
that we wrote in our project.
24
00:01:02,990 --> 00:01:04,940
So it's the author paragraph
25
00:01:04,940 --> 00:01:07,030
that we have somewhere in the code,
26
00:01:07,030 --> 00:01:10,320
but here we have one ID called "author-text,"
27
00:01:10,320 --> 00:01:12,510
and one class called "author."
28
00:01:12,510 --> 00:01:14,590
And then, on the right side,
29
00:01:14,590 --> 00:01:16,310
we have three rules
30
00:01:16,310 --> 00:01:19,810
that are actually applied to this element.
31
00:01:19,810 --> 00:01:22,160
So, as we can clearly see,
32
00:01:22,160 --> 00:01:24,530
all of these three different selectors,
33
00:01:24,530 --> 00:01:27,420
and, therefore, all of these three rules,
34
00:01:27,420 --> 00:01:30,160
all select the same element.
35
00:01:30,160 --> 00:01:32,240
And so now, the big question is,
36
00:01:32,240 --> 00:01:35,080
which of these rules applies?
37
00:01:35,080 --> 00:01:36,710
Well, the answer to that
38
00:01:36,710 --> 00:01:39,930
is actually that all of them apply.
39
00:01:39,930 --> 00:01:41,330
So, all rules
40
00:01:41,330 --> 00:01:43,880
and all the properties that are in the rules
41
00:01:43,880 --> 00:01:46,570
are applied to this element.
42
00:01:46,570 --> 00:01:50,200
However, if we take a close look, we can see
43
00:01:50,200 --> 00:01:53,740
that there are conflicting font-size declarations.
44
00:01:53,740 --> 00:01:54,720
Right?
45
00:01:54,720 --> 00:01:55,650
So in the first one,
46
00:01:55,650 --> 00:01:58,550
it says the font size should be 18,
47
00:01:58,550 --> 00:02:00,130
then 20 pixels,
48
00:02:00,130 --> 00:02:02,350
and then 22 pixels.
49
00:02:02,350 --> 00:02:04,810
So which of those is it gonna be?
50
00:02:04,810 --> 00:02:06,150
Will it be 18,
51
00:02:06,150 --> 00:02:09,150
20 or 22 pixels?
52
00:02:09,150 --> 00:02:12,870
Well, let's learn what rules CSS applies
53
00:02:12,870 --> 00:02:15,820
in order to resolve conflicting declarations
54
00:02:15,820 --> 00:02:16,943
like this one.
55
00:02:20,290 --> 00:02:22,750
So, when there are multiple declarations
56
00:02:22,750 --> 00:02:25,200
for the exact same element,
57
00:02:25,200 --> 00:02:28,040
such as we have here in our example,
58
00:02:28,040 --> 00:02:31,310
then what matters are the selectors.
59
00:02:31,310 --> 00:02:36,310
So the highest priority for now are the ID selectors.
60
00:02:36,730 --> 00:02:39,850
So that means if there is any ID selector,
61
00:02:39,850 --> 00:02:43,160
then that is the rule that is going to be applied.
62
00:02:43,160 --> 00:02:45,920
Now, if there are multiple ID selectors,
63
00:02:45,920 --> 00:02:48,470
then it is the last of those selectors
64
00:02:48,470 --> 00:02:50,560
that gets applied.
65
00:02:50,560 --> 00:02:51,700
Now, in reality,
66
00:02:51,700 --> 00:02:54,900
it is actually a bit more complicated than this.
67
00:02:54,900 --> 00:02:57,310
So, there are a lot of concepts involved
68
00:02:57,310 --> 00:02:59,140
such as the cascade
69
00:02:59,140 --> 00:03:01,380
and selector specificity,
70
00:03:01,380 --> 00:03:04,160
but you don't need to know about these details for now
71
00:03:04,160 --> 00:03:05,610
as a beginner.
72
00:03:05,610 --> 00:03:07,850
So I think that the amount of information
73
00:03:07,850 --> 00:03:09,720
that I will give you in this slide
74
00:03:09,720 --> 00:03:13,250
should be enough for you to resolve your own conflicts
75
00:03:13,250 --> 00:03:14,883
in your own CSS code.
76
00:03:15,760 --> 00:03:16,593
All right.
77
00:03:16,593 --> 00:03:20,520
But, anyway, in case there is no ID selector,
78
00:03:20,520 --> 00:03:22,500
then the next in the priority
79
00:03:22,500 --> 00:03:26,380
is a class or a pseudo-class selector.
80
00:03:26,380 --> 00:03:29,680
And, again, if there are multiple ones of those,
81
00:03:29,680 --> 00:03:32,660
then it is the last selector of those in the code
82
00:03:32,660 --> 00:03:33,773
that gets applied.
83
00:03:34,660 --> 00:03:38,120
Then, the next is the element selector.
84
00:03:38,120 --> 00:03:41,060
So in case there is no ID selector
85
00:03:41,060 --> 00:03:42,940
or no class selector,
86
00:03:42,940 --> 00:03:46,280
then it is the element selector that gets applied.
87
00:03:46,280 --> 00:03:49,210
And, again, if there are multiple,
88
00:03:49,210 --> 00:03:51,220
it is the last one of those.
89
00:03:51,220 --> 00:03:52,960
Finally, there's also something
90
00:03:52,960 --> 00:03:55,280
called the universal selector,
91
00:03:55,280 --> 00:03:56,730
but a bit more about that
92
00:03:56,730 --> 00:03:58,150
in the next lecture.
93
00:03:58,150 --> 00:04:00,750
What matters is that the universal selector
94
00:04:00,750 --> 00:04:04,320
is the one with the lowest priority of all.
95
00:04:04,320 --> 00:04:05,610
All right?
96
00:04:05,610 --> 00:04:08,490
But now, going back to our example,
97
00:04:08,490 --> 00:04:10,400
and taking into consideration
98
00:04:10,400 --> 00:04:12,240
the rules that we have here,
99
00:04:12,240 --> 00:04:15,020
we should now be able to resolve the conflict
100
00:04:15,020 --> 00:04:16,940
that we have here.
101
00:04:16,940 --> 00:04:19,670
So we have a class selector,
102
00:04:19,670 --> 00:04:21,910
then we have an ID selector,
103
00:04:21,910 --> 00:04:25,840
and then we have an element selector, right?
104
00:04:25,840 --> 00:04:29,440
So, based on the rules that we just learned here,
105
00:04:29,440 --> 00:04:33,820
it is the ID selector with the ID of "author-text"
106
00:04:33,820 --> 00:04:38,010
that will decide the font size of this element.
107
00:04:38,010 --> 00:04:41,070
So, for the conflicting font-size property,
108
00:04:41,070 --> 00:04:43,200
it is this ID selector
109
00:04:43,200 --> 00:04:45,690
that actually gets applied.
110
00:04:45,690 --> 00:04:48,240
But keep in mind that the font style,
111
00:04:48,240 --> 00:04:50,600
font family, and the color
112
00:04:50,600 --> 00:04:54,470
from all the other selectors still applies, right?
113
00:04:54,470 --> 00:04:57,280
So that's what I mentioned in the last slide.
114
00:04:57,280 --> 00:04:59,610
So, if we have multiple rules,
115
00:04:59,610 --> 00:05:03,220
so, multiple selectors that select the same element,
116
00:05:03,220 --> 00:05:05,680
then all of those rules apply.
117
00:05:05,680 --> 00:05:06,800
So these rules here
118
00:05:06,800 --> 00:05:10,430
are only for resolving the conflicting properties,
119
00:05:10,430 --> 00:05:13,220
such as the font size in this case,
120
00:05:13,220 --> 00:05:14,660
because, again,
121
00:05:14,660 --> 00:05:16,320
the font size is present
122
00:05:16,320 --> 00:05:19,890
in all the three rules that are applying right now
123
00:05:19,890 --> 00:05:21,713
to our author element.
124
00:05:22,570 --> 00:05:23,440
All right.
125
00:05:23,440 --> 00:05:25,850
And these are the most important rules
126
00:05:25,850 --> 00:05:26,950
that you need to know
127
00:05:26,950 --> 00:05:29,660
to resolve conflicting declarations.
128
00:05:29,660 --> 00:05:32,980
But, just for the sake of completeness,
129
00:05:32,980 --> 00:05:34,000
there are actually things
130
00:05:34,000 --> 00:05:35,910
that have a higher priority
131
00:05:35,910 --> 00:05:37,790
than the ID selector.
132
00:05:37,790 --> 00:05:41,230
So one of those things is inline styles.
133
00:05:41,230 --> 00:05:44,410
So, remember that we declare inline styles
134
00:05:44,410 --> 00:05:47,750
by using the style attribute in HTML.
135
00:05:47,750 --> 00:05:50,340
Now, since we shouldn't actually do this anyway,
136
00:05:50,340 --> 00:05:52,140
this is not really important,
137
00:05:52,140 --> 00:05:53,840
but you should still know
138
00:05:53,840 --> 00:05:56,770
that these styles actually have priority
139
00:05:56,770 --> 00:06:01,160
over the styles that are declared using an ID selector.
140
00:06:01,160 --> 00:06:03,240
Then, with the highest priority,
141
00:06:03,240 --> 00:06:07,420
we have declarations marked with the important keyword.
142
00:06:07,420 --> 00:06:11,160
And the important keyword is basically just a hack
143
00:06:11,160 --> 00:06:13,420
that you can use as a last resort
144
00:06:13,420 --> 00:06:16,540
to resolve conflicts in your CSS.
145
00:06:16,540 --> 00:06:19,140
But this should usually not be used.
146
00:06:19,140 --> 00:06:20,430
So, as I mentioned,
147
00:06:20,430 --> 00:06:23,370
it should only be as your last resort.
148
00:06:23,370 --> 00:06:27,280
But what matters is that this really is the highest priority
149
00:06:27,280 --> 00:06:28,630
that can exist.
150
00:06:28,630 --> 00:06:31,780
Whenever we mark a declaration with important,
151
00:06:31,780 --> 00:06:34,680
it is the one that will be applied.
152
00:06:34,680 --> 00:06:35,513
Okay.
153
00:06:35,513 --> 00:06:37,560
And with all that being said,
154
00:06:37,560 --> 00:06:39,740
let's now jump back into our code
155
00:06:39,740 --> 00:06:41,923
and actually see this in practice.
156
00:06:43,580 --> 00:06:45,940
And let's create a very simple example
157
00:06:45,940 --> 00:06:48,493
with this paragraph that is in the footer.
158
00:06:49,460 --> 00:06:53,960
So, right now, here, we have added the ID of "copyright",
159
00:06:53,960 --> 00:06:57,190
but let's now also add a class to it.
160
00:06:57,190 --> 00:07:00,070
So just to create a kind of similar example
161
00:07:00,070 --> 00:07:02,900
to what we had in the slide.
162
00:07:02,900 --> 00:07:06,447
So, here I'm adding a class of "copyright."
163
00:07:07,810 --> 00:07:11,740
So a class can have the exact same name as the ID.
164
00:07:11,740 --> 00:07:14,020
That's not a problem at all.
165
00:07:14,020 --> 00:07:15,380
And now I will do something
166
00:07:15,380 --> 00:07:17,510
that we actually didn't do before,
167
00:07:17,510 --> 00:07:20,220
which is to add another class.
168
00:07:20,220 --> 00:07:22,930
So we can actually add multiple classes,
169
00:07:22,930 --> 00:07:26,193
and all we have to do is to just add a space.
170
00:07:27,120 --> 00:07:30,170
So I will also add the class of "text."
171
00:07:30,170 --> 00:07:33,920
And so now this one has both the class of "copyright"
172
00:07:33,920 --> 00:07:36,280
and of "text," all right?
173
00:07:36,280 --> 00:07:39,580
So, we will be able to select the element
174
00:07:39,580 --> 00:07:40,883
using both of them.
175
00:07:42,720 --> 00:07:45,720
So, let's try to do that here.
176
00:07:45,720 --> 00:07:46,873
At the end,
177
00:07:48,980 --> 00:07:50,833
I will just add another comment here,
178
00:07:51,887 --> 00:07:54,277
"resolving conflicts."
179
00:07:59,180 --> 00:08:03,893
So let's try to add some different colors to this text.
180
00:08:04,800 --> 00:08:07,303
So, here, I'm going to say, "copyright"
181
00:08:09,200 --> 00:08:11,323
and set it to red,
182
00:08:14,630 --> 00:08:17,353
then "copyright" the class,
183
00:08:19,580 --> 00:08:21,223
set it here to blue.
184
00:08:24,220 --> 00:08:26,227
Then the class of "text,"
185
00:08:27,640 --> 00:08:29,543
set it to yellow here.
186
00:08:31,090 --> 00:08:34,783
And, finally, I'm also going to select it using elements.
187
00:08:35,679 --> 00:08:37,886
So I'll use the descendant selector here,
188
00:08:37,886 --> 00:08:40,700
"footer," and then "p,"
189
00:08:40,700 --> 00:08:43,159
so I will simply select the "p" element
190
00:08:43,159 --> 00:08:45,440
that's inside of the footer.
191
00:08:45,440 --> 00:08:48,453
But keep in mind that these are still elements.
192
00:08:49,800 --> 00:08:53,550
And so here, I will apply the green color.
193
00:08:53,550 --> 00:08:57,770
So, right now, we have these four rules,
194
00:08:57,770 --> 00:08:59,360
and so these four selectors,
195
00:08:59,360 --> 00:09:02,070
that are applying to that element.
196
00:09:02,070 --> 00:09:04,593
So which color do you think the text will have?
197
00:09:05,820 --> 00:09:07,110
Well,
198
00:09:07,110 --> 00:09:08,570
let's see.
199
00:09:08,570 --> 00:09:11,430
And, indeed, it is red.
200
00:09:11,430 --> 00:09:15,060
And so that's because we have an ID selector here,
201
00:09:15,060 --> 00:09:18,560
and the ID selector has a higher priority
202
00:09:18,560 --> 00:09:20,820
than, for example, this one here,
203
00:09:20,820 --> 00:09:22,720
or this one, or this one,
204
00:09:22,720 --> 00:09:24,890
because these are class selectors
205
00:09:24,890 --> 00:09:27,340
and these are element selectors.
206
00:09:27,340 --> 00:09:29,560
Actually, VS Code helps us
207
00:09:29,560 --> 00:09:32,330
resolving this conflict, by the way.
208
00:09:32,330 --> 00:09:35,310
So if we hover over this, we have this hint,
209
00:09:35,310 --> 00:09:37,870
which says, "Selector Specificity."
210
00:09:37,870 --> 00:09:41,770
And so, there, we have a 1 in the very first position,
211
00:09:41,770 --> 00:09:43,330
and here, in the class,
212
00:09:43,330 --> 00:09:46,160
we have a 1 in the second position.
213
00:09:46,160 --> 00:09:49,890
And here, in the element, we have a 2,
214
00:09:49,890 --> 00:09:51,030
but that doesn't matter.
215
00:09:51,030 --> 00:09:53,420
So it's just a number in the third position.
216
00:09:53,420 --> 00:09:55,860
And so the first position is the one
217
00:09:55,860 --> 00:09:58,060
that has the highest priority.
218
00:09:58,060 --> 00:10:01,130
The second has the second-highest priority,
219
00:10:01,130 --> 00:10:02,920
and then the elements.
220
00:10:02,920 --> 00:10:03,760
Okay?
221
00:10:03,760 --> 00:10:06,150
Now, again, there are some more rules here,
222
00:10:06,150 --> 00:10:10,000
for example, the reason behind why there is a two,
223
00:10:10,000 --> 00:10:13,470
but let's not focus on that for now.
224
00:10:13,470 --> 00:10:14,480
All right?
225
00:10:14,480 --> 00:10:16,820
What matters is that this is an ID
226
00:10:16,820 --> 00:10:20,353
and therefore it is the red color that applies now.
227
00:10:21,640 --> 00:10:23,550
We can also see that here,
228
00:10:23,550 --> 00:10:25,420
in the inspector,
229
00:10:25,420 --> 00:10:27,250
so in the dev tools.
230
00:10:27,250 --> 00:10:29,163
So if I inspect this element here,
231
00:10:30,870 --> 00:10:33,483
then you'll see that we need some more space here,
232
00:10:34,520 --> 00:10:36,200
but what you also see
233
00:10:36,200 --> 00:10:39,420
is that we have this "copyright" here.
234
00:10:39,420 --> 00:10:41,310
So that's this one.
235
00:10:41,310 --> 00:10:42,530
We also have this other one,
236
00:10:42,530 --> 00:10:44,070
which comes from before
237
00:10:44,070 --> 00:10:45,760
for the font size.
238
00:10:45,760 --> 00:10:47,683
And so here, now, both of them apply.
239
00:10:49,170 --> 00:10:52,920
And then we also have these other three.
240
00:10:52,920 --> 00:10:55,380
So these three rules are also here.
241
00:10:55,380 --> 00:10:57,520
And you see that all of them here
242
00:10:57,520 --> 00:11:00,270
are basically crossed out, right?
243
00:11:00,270 --> 00:11:02,050
So they have this strike through,
244
00:11:02,050 --> 00:11:04,563
which means that they are not being applied.
245
00:11:05,880 --> 00:11:06,900
Okay?
246
00:11:06,900 --> 00:11:11,130
Now, what happens if this one here did not exist?
247
00:11:11,130 --> 00:11:14,133
So, if we turned this one here off, basically.
248
00:11:15,273 --> 00:11:17,820
So, that would be the same as deleting this code.
249
00:11:17,820 --> 00:11:20,820
And so, what do you think would happen then?
250
00:11:20,820 --> 00:11:23,720
So in that case, we have two class selectors
251
00:11:23,720 --> 00:11:26,010
and one element selector.
252
00:11:26,010 --> 00:11:28,600
So try to make your guess,
253
00:11:28,600 --> 00:11:31,830
and then let's try to either remove this code
254
00:11:31,830 --> 00:11:34,453
or to uncheck this box.
255
00:11:35,290 --> 00:11:36,173
And,
256
00:11:37,320 --> 00:11:39,980
yeah, the text turned yellow.
257
00:11:39,980 --> 00:11:41,170
And the reason for that
258
00:11:41,170 --> 00:11:43,850
is that now we have these two selectors
259
00:11:43,850 --> 00:11:45,740
with the same hierarchy,
260
00:11:45,740 --> 00:11:47,550
so with the same priority,
261
00:11:47,550 --> 00:11:49,090
and then, in that situation,
262
00:11:49,090 --> 00:11:51,380
it is the last one that applies.
263
00:11:51,380 --> 00:11:53,513
And so, that is this one.
264
00:11:55,760 --> 00:11:56,593
Right?
265
00:11:56,593 --> 00:11:57,950
Now, if we turn that one off,
266
00:11:57,950 --> 00:12:00,580
then of course it would be blue.
267
00:12:00,580 --> 00:12:02,930
And, finally, only then,
268
00:12:02,930 --> 00:12:05,260
if none of these three existed,
269
00:12:05,260 --> 00:12:07,363
then the text would become green.
270
00:12:08,910 --> 00:12:11,453
So I hope that made sense.
271
00:12:12,300 --> 00:12:16,120
And let's actually analyze some more situations here.
272
00:12:16,120 --> 00:12:18,690
So, for example,
273
00:12:18,690 --> 00:12:21,203
this element here, I think it has a class,
274
00:12:24,370 --> 00:12:25,823
or, actually, an ID.
275
00:12:27,540 --> 00:12:30,690
So, yeah, it has an author ID.
276
00:12:30,690 --> 00:12:34,510
And, of course, it also has this element selector,
277
00:12:34,510 --> 00:12:36,740
which applies to all the paragraphs.
278
00:12:36,740 --> 00:12:40,260
And so here, we have the conflicting font size.
279
00:12:40,260 --> 00:12:42,600
and basically that's the example
280
00:12:42,600 --> 00:12:45,840
that we studied in the slide, right?
281
00:12:45,840 --> 00:12:47,713
So this one here is pretty obvious.
282
00:12:48,800 --> 00:12:51,300
Then let's check out this h1 here,
283
00:12:51,300 --> 00:12:55,540
because here we have a lot of rules that are applying,
284
00:12:55,540 --> 00:12:59,600
but, in fact, they don't seem to be conflicting.
285
00:12:59,600 --> 00:13:02,340
Or, actually, they are conflicting.
286
00:13:02,340 --> 00:13:05,010
So here, the color is supposed to be this gray,
287
00:13:05,010 --> 00:13:08,170
and then here it is supposed to be this blue.
288
00:13:08,170 --> 00:13:10,733
So let's go up where this actually happens.
289
00:13:11,620 --> 00:13:13,170
And so,
290
00:13:13,170 --> 00:13:18,010
yeah, it is these three rules here that are applying.
291
00:13:18,010 --> 00:13:18,920
Right?
292
00:13:18,920 --> 00:13:21,670
But all of them are only element selectors.
293
00:13:21,670 --> 00:13:24,720
So there's no IDs and no classes.
294
00:13:24,720 --> 00:13:25,980
And so, therefore,
295
00:13:25,980 --> 00:13:30,260
the reason why the color is actually blue and not gray
296
00:13:30,260 --> 00:13:34,450
is because this selector here appears last in the code.
297
00:13:34,450 --> 00:13:36,293
If we put this one first,
298
00:13:37,960 --> 00:13:39,350
then you would see
299
00:13:39,350 --> 00:13:41,423
that the text would indeed become gray.
300
00:13:43,150 --> 00:13:46,003
Okay, but let's put that back.
301
00:13:47,600 --> 00:13:48,630
Okay?
302
00:13:48,630 --> 00:13:51,240
And now just one final example
303
00:13:51,240 --> 00:13:52,783
with the links.
304
00:13:53,800 --> 00:13:55,950
So let's move down here.
305
00:13:55,950 --> 00:13:59,300
And remember also how we said in the slide,
306
00:13:59,300 --> 00:14:03,310
how these pseudo classes actually also have priority
307
00:14:03,310 --> 00:14:05,210
over elements.
308
00:14:05,210 --> 00:14:07,890
And so, even if we put...
309
00:14:07,890 --> 00:14:09,593
Like this, here.
310
00:14:10,530 --> 00:14:13,260
So, if we select it, the anchors,
311
00:14:13,260 --> 00:14:17,473
simply by doing this without any pseudo class,
312
00:14:19,360 --> 00:14:22,390
let's say color red, once again,
313
00:14:22,390 --> 00:14:23,520
then the reason why
314
00:14:23,520 --> 00:14:26,480
this does not have any effect on the links
315
00:14:26,480 --> 00:14:29,320
is because this one has a higher priority
316
00:14:29,320 --> 00:14:34,057
because it does have the pseudo class in the selector,
317
00:14:34,057 --> 00:14:36,140
and this one does not.
318
00:14:36,140 --> 00:14:37,110
Right?
319
00:14:37,110 --> 00:14:40,150
And so if we now select this here,
320
00:14:40,150 --> 00:14:44,360
then you will see that both of these rules do apply,
321
00:14:44,360 --> 00:14:46,720
but the color, as I just mentioned,
322
00:14:46,720 --> 00:14:49,070
will of course come from this one.
323
00:14:49,070 --> 00:14:51,650
And, again, that's because this one here
324
00:14:51,650 --> 00:14:53,838
does have the pseudo class,
325
00:14:53,838 --> 00:14:58,520
while this one is, very simply, a element selector.
326
00:14:58,520 --> 00:15:00,140
Okay, and...
327
00:15:01,100 --> 00:15:04,330
Yeah, this is what you need to know for now.
328
00:15:04,330 --> 00:15:07,040
We will encounter some of these situations later on
329
00:15:07,040 --> 00:15:08,670
as we go through the course,
330
00:15:08,670 --> 00:15:12,030
and by then, I will explain a little bit more about this,
331
00:15:12,030 --> 00:15:12,863
but for now,
332
00:15:12,863 --> 00:15:15,930
this is all I wanted you to know about this topic,
333
00:15:15,930 --> 00:15:18,730
which can be quite confusing for beginners
334
00:15:18,730 --> 00:15:21,830
when they start writing their own CSS code,
335
00:15:21,830 --> 00:15:24,690
and then the rules start conflicting,
336
00:15:24,690 --> 00:15:28,160
and then they do not really understand what is happening.
337
00:15:28,160 --> 00:15:29,930
So I think that this is important,
338
00:15:29,930 --> 00:15:33,133
and so hopefully you liked this video and found it useful.
339
00:15:34,000 --> 00:15:36,630
Oh, and just one final thing
340
00:15:36,630 --> 00:15:38,170
that I actually wanted to show you
341
00:15:38,170 --> 00:15:40,140
before I leave you with this,
342
00:15:40,140 --> 00:15:42,230
is the "important" keyword.
343
00:15:42,230 --> 00:15:44,700
So, remember how the "important" keyword
344
00:15:44,700 --> 00:15:48,120
makes a declaration more important, basically,
345
00:15:48,120 --> 00:15:49,583
than all the other ones.
346
00:15:50,660 --> 00:15:53,780
So let's come back down here.
347
00:15:53,780 --> 00:15:54,743
Inspect it.
348
00:15:55,750 --> 00:15:58,480
And, of course, as we already saw,
349
00:15:58,480 --> 00:16:00,645
this selector here,
350
00:16:00,645 --> 00:16:04,690
this one, is the one with the lowest priority of all,
351
00:16:04,690 --> 00:16:07,330
because it's just an element selector.
352
00:16:07,330 --> 00:16:11,413
But if we now add the "important" keyword here, like this,
353
00:16:12,327 --> 00:16:13,160
so, "!
354
00:16:14,200 --> 00:16:15,240
important,"
355
00:16:15,240 --> 00:16:19,303
then, all of a sudden, the text will become green.
356
00:16:20,140 --> 00:16:21,080
Right?
357
00:16:21,080 --> 00:16:23,610
So, just as you can see it here.
358
00:16:23,610 --> 00:16:26,200
But, again, this is more of a hack
359
00:16:26,200 --> 00:16:29,240
that you should not be using usually.
360
00:16:29,240 --> 00:16:32,240
Just in case you really, really cannot figure out
361
00:16:32,240 --> 00:16:33,840
what's happening in your code.
362
00:16:33,840 --> 00:16:37,180
But even then, instead of using the "important" keyword,
363
00:16:37,180 --> 00:16:38,700
what you should probably do
364
00:16:38,700 --> 00:16:41,350
is to write simpler selectors.
365
00:16:41,350 --> 00:16:43,460
So this is also an important rule
366
00:16:43,460 --> 00:16:44,970
and an important takeaway
367
00:16:44,970 --> 00:16:47,180
that you should take from this lecture.
368
00:16:47,180 --> 00:16:50,850
So, always write your selectors as simple as possible,
369
00:16:50,850 --> 00:16:53,320
and do not add too much nesting,
370
00:16:53,320 --> 00:16:55,800
or don't add too many IDs
371
00:16:55,800 --> 00:16:56,800
and classes
372
00:16:56,800 --> 00:16:59,670
all in the same selector, okay?
373
00:16:59,670 --> 00:17:02,420
So I will leave that here for you,
374
00:17:02,420 --> 00:17:04,270
but I will comment it out
375
00:17:04,270 --> 00:17:06,022
so that it does not apply.
376
00:17:07,510 --> 00:17:10,060
Actually, we don't need any of this.
377
00:17:10,060 --> 00:17:12,250
Let me put it back on,
378
00:17:12,250 --> 00:17:14,173
and I will comment all of this.
379
00:17:15,609 --> 00:17:16,470
Okay?
380
00:17:16,470 --> 00:17:17,400
And with this,
381
00:17:17,400 --> 00:17:18,380
I will leave you
382
00:17:18,380 --> 00:17:21,393
and I will then see you in the next video.
26261
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.