All language subtitles for 011 CSS -Theory #1 Conflicts Between Selectors_en

(Lecturer) Welcome back.

Now, as we keep progressing

through this CSS fundamentals section,

there are a couple of fundamental

and really important theoretical concepts

that you really need to understand

in order to eventually master CSS.

Therefore, this section contains five theory lectures,

and this one is the first one.

And it's all about what happens

when there are multiple CSS rules

that apply to the same elements.

So, as we have written our code until this point,

we have created a couple of situations

in which multiple CSS selectors,

and, therefore, multiple CSS rules,

apply to the exact same element.

And I call that conflicting selectors.

So let's now learn what happens

in situations like that.

So, here is an example

that is similar to the code

that we wrote in our project.

So it's the author paragraph

that we have somewhere in the code,

but here we have one ID called "author-text,"

and one class called "author."

And then, on the right side,

we have three rules

that are actually applied to this element.

So, as we can clearly see,

all of these three different selectors,

and, therefore, all of these three rules,

all select the same element.

And so now, the big question is,

which of these rules applies?

Well, the answer to that

is actually that all of them apply.

So, all rules

and all the properties that are in the rules

are applied to this element.

However, if we take a close look, we can see

that there are conflicting font-size declarations.

Right?

So in the first one,

it says the font size should be 18,

then 20 pixels,

and then 22 pixels.

So which of those is it gonna be?

Will it be 18,

20 or 22 pixels?

Well, let's learn what rules CSS applies

in order to resolve conflicting declarations

like this one.

So, when there are multiple declarations

for the exact same element,

such as we have here in our example,

then what matters are the selectors.

So the highest priority for now are the ID selectors.

So that means if there is any ID selector,

then that is the rule that is going to be applied.

Now, if there are multiple ID selectors,

then it is the last of those selectors

that gets applied.

Now, in reality,

it is actually a bit more complicated than this.

So, there are a lot of concepts involved

such as the cascade

and selector specificity,

but you don't need to know about these details for now

as a beginner.

So I think that the amount of information

that I will give you in this slide

should be enough for you to resolve your own conflicts

in your own CSS code.

All right.

But, anyway, in case there is no ID selector,

then the next in the priority

is a class or a pseudo-class selector.

And, again, if there are multiple ones of those,

then it is the last selector of those in the code

that gets applied.

Then, the next is the element selector.

So in case there is no ID selector

or no class selector,

then it is the element selector that gets applied.

And, again, if there are multiple,

it is the last one of those.

Finally, there's also something

called the universal selector,

but a bit more about that

in the next lecture.

What matters is that the universal selector

is the one with the lowest priority of all.

All right?

But now, going back to our example,

and taking into consideration

the rules that we have here,

we should now be able to resolve the conflict

that we have here.

So we have a class selector,

then we have an ID selector,

and then we have an element selector, right?

So, based on the rules that we just learned here,

it is the ID selector with the ID of "author-text"

that will decide the font size of this element.

So, for the conflicting font-size property,

it is this ID selector

that actually gets applied.

But keep in mind that the font style,

font family, and the color

from all the other selectors still applies, right?

So that's what I mentioned in the last slide.

So, if we have multiple rules,

so, multiple selectors that select the same element,

then all of those rules apply.

So these rules here

are only for resolving the conflicting properties,

such as the font size in this case,

because, again,

the font size is present

in all the three rules that are applying right now

to our author element.

All right.

And these are the most important rules

that you need to know

to resolve conflicting declarations.

But, just for the sake of completeness,

there are actually things

that have a higher priority

than the ID selector.

So one of those things is inline styles.

So, remember that we declare inline styles

by using the style attribute in HTML.

Now, since we shouldn't actually do this anyway,

this is not really important,

but you should still know

that these styles actually have priority

over the styles that are declared using an ID selector.

Then, with the highest priority,

we have declarations marked with the important keyword.

And the important keyword is basically just a hack

that you can use as a last resort

to resolve conflicts in your CSS.

But this should usually not be used.

So, as I mentioned,

it should only be as your last resort.

But what matters is that this really is the highest priority

that can exist.

Whenever we mark a declaration with important,

it is the one that will be applied.

Okay.

And with all that being said,

let's now jump back into our code

and actually see this in practice.

And let's create a very simple example

with this paragraph that is in the footer.

So, right now, here, we have added the ID of "copyright",

but let's now also add a class to it.

So just to create a kind of similar example

to what we had in the slide.

So, here I'm adding a class of "copyright."

So a class can have the exact same name as the ID.

That's not a problem at all.

And now I will do something

that we actually didn't do before,

which is to add another class.

So we can actually add multiple classes,

and all we have to do is to just add a space.

So I will also add the class of "text."

And so now this one has both the class of "copyright"

and of "text," all right?

So, we will be able to select the element

using both of them.

So, let's try to do that here.

At the end,

I will just add another comment here,

"resolving conflicts."

So let's try to add some different colors to this text.

So, here, I'm going to say, "copyright"

and set it to red,

then "copyright" the class,

set it here to blue.

Then the class of "text,"

set it to yellow here.

And, finally, I'm also going to select it using elements.

So I'll use the descendant selector here,

"footer," and then "p,"

so I will simply select the "p" element

that's inside of the footer.

But keep in mind that these are still elements.

And so here, I will apply the green color.

So, right now, we have these four rules,

and so these four selectors,

that are applying to that element.

So which color do you think the text will have?

Well,

let's see.

And, indeed, it is red.

And so that's because we have an ID selector here,

and the ID selector has a higher priority

than, for example, this one here,

or this one, or this one,

because these are class selectors

and these are element selectors.

Actually, VS Code helps us

resolving this conflict, by the way.

So if we hover over this, we have this hint,

which says, "Selector Specificity."

And so, there, we have a 1 in the very first position,

and here, in the class,

we have a 1 in the second position.

And here, in the element, we have a 2,

but that doesn't matter.

So it's just a number in the third position.

And so the first position is the one

that has the highest priority.

The second has the second-highest priority,

and then the elements.

Okay?

Now, again, there are some more rules here,

for example, the reason behind why there is a two,

but let's not focus on that for now.

All right?

What matters is that this is an ID

and therefore it is the red color that applies now.

We can also see that here,

in the inspector,

so in the dev tools.

So if I inspect this element here,

then you'll see that we need some more space here,

but what you also see

is that we have this "copyright" here.

So that's this one.

We also have this other one,

which comes from before

for the font size.

And so here, now, both of them apply.

And then we also have these other three.

So these three rules are also here.

And you see that all of them here

are basically crossed out, right?

So they have this strike through,

which means that they are not being applied.

Okay?

Now, what happens if this one here did not exist?

So, if we turned this one here off, basically.

So, that would be the same as deleting this code.

And so, what do you think would happen then?

So in that case, we have two class selectors

and one element selector.

So try to make your guess,

and then let's try to either remove this code

or to uncheck this box.

And,

yeah, the text turned yellow.

And the reason for that

is that now we have these two selectors

with the same hierarchy,

so with the same priority,

and then, in that situation,

it is the last one that applies.

And so, that is this one.

Right?

Now, if we turn that one off,

then of course it would be blue.

And, finally, only then,

if none of these three existed,

then the text would become green.

So I hope that made sense.

And let's actually analyze some more situations here.

So, for example,

this element here, I think it has a class,

or, actually, an ID.

So, yeah, it has an author ID.

And, of course, it also has this element selector,

which applies to all the paragraphs.

And so here, we have the conflicting font size.

and basically that's the example

that we studied in the slide, right?

So this one here is pretty obvious.

Then let's check out this h1 here,

because here we have a lot of rules that are applying,

but, in fact, they don't seem to be conflicting.

Or, actually, they are conflicting.

So here, the color is supposed to be this gray,

and then here it is supposed to be this blue.

So let's go up where this actually happens.

And so,

yeah, it is these three rules here that are applying.

Right?

But all of them are only element selectors.

So there's no IDs and no classes.

And so, therefore,

the reason why the color is actually blue and not gray

is because this selector here appears last in the code.

If we put this one first,

then you would see

that the text would indeed become gray.

Okay, but let's put that back.

Okay?

And now just one final example

with the links.

So let's move down here.

And remember also how we said in the slide,

how these pseudo classes actually also have priority

over elements.

And so, even if we put...

Like this, here.

So, if we select it, the anchors,

simply by doing this without any pseudo class,

let's say color red, once again,

then the reason why

this does not have any effect on the links

is because this one has a higher priority

because it does have the pseudo class in the selector,

and this one does not.

Right?

And so if we now select this here,

then you will see that both of these rules do apply,

but the color, as I just mentioned,

will of course come from this one.

And, again, that's because this one here

does have the pseudo class,

while this one is, very simply, a element selector.

Okay, and...

Yeah, this is what you need to know for now.

We will encounter some of these situations later on

as we go through the course,

and by then, I will explain a little bit more about this,

but for now,

this is all I wanted you to know about this topic,

which can be quite confusing for beginners

when they start writing their own CSS code,

and then the rules start conflicting,

and then they do not really understand what is happening.

So I think that this is important,

and so hopefully you liked this video and found it useful.

Oh, and just one final thing

that I actually wanted to show you

before I leave you with this,

is the "important" keyword.

So, remember how the "important" keyword

makes a declaration more important, basically,

than all the other ones.

So let's come back down here.

Inspect it.

And, of course, as we already saw,

this selector here,

this one, is the one with the lowest priority of all,

because it's just an element selector.

But if we now add the "important" keyword here, like this,

so, "!

important,"

then, all of a sudden, the text will become green.

Right?

So, just as you can see it here.

But, again, this is more of a hack

that you should not be using usually.

Just in case you really, really cannot figure out

what's happening in your code.

But even then, instead of using the "important" keyword,

what you should probably do

is to write simpler selectors.

So this is also an important rule

and an important takeaway

that you should take from this lecture.

So, always write your selectors as simple as possible,

and do not add too much nesting,

or don't add too many IDs

and classes

all in the same selector, okay?

So I will leave that here for you,

but I will comment it out

so that it does not apply.

Actually, we don't need any of this.

Let me put it back on,

and I will comment all of this.

Okay?

And with this,

I will leave you

and I will then see you in the next video.