Jonas: 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 lectures,
and therefore multiple CSS rules
apply to the exact same element,
and I call that conflicting selectors.
And 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 of one 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, alright?
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 idea 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 keywords.
And the important keywords
is basically just a hack that you can use
as the last resort to resolve conflicts in your CSS.
But this should usually not be used.
So as I mentioned,
it should only be as a 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 not 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, alright?
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 conflict.
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 will 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 we'll 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 one in the very first position.
And here in the class we have a one in the second position.
And here in the element we have a two,
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 inspect this element here.
Then you 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 happened 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 one, right?
Now, if we turned 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 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.
All 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 selected 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 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'll like 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,
so 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.
And 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 will then see you in the next video.