All language subtitles for 091 Advanced CSS - Selector Priority.en_US

So here I've got a Code Ply again with no frameworks, so pure CSS, and we've got a h1 that has an id

of heading as well as a class of title and it just says Hello World.

Now over here there's many ways that I can change it's style,

right?

So I can say, for example, h1 color red, and if I hit run then of course it will turn red.

But if you accidentally try to change the same property twice,

say, for example, if I said now color is green, then the last CSS rule change will be the one that will

be carried out.

So if I hit run this is now going to be green instead of red.

So basically the process is, changes it red, and then it changes it

green. It's reading the code from top to bottom.

It's not very clever here.

So in this case the last CSS rule has priority over everything above it.

Now as we said before I can either use the h1 which is an HTML element selector to change the color

or I can use the class which is title to change the color.

So let's change it to yellow.

Now a class is more specific than an HTML element.

So, think about it, on your web page you're probably going to have more HTML elements than classes.

So, for example, if you had a whole bunch of paragraphs, they're probably all going to have different classes,

so it makes sense to make the class selectors have higher priority, because they are more specific.

So if I hit run now, you'll see that the Hello World is now yellow instead of red because this has a higher

priority. Now

finally, if I decided to change the color by using the id, so let's target that id, heading, and change the

color to blue and I hit run you'll see that this has the highest priority of all.

And our Hello World will display in blue rather than any other color.

And if we take a look at the Chrome Developer Tools over here, you can see that all our colors are being

applied but they're just being overridden by something with a higher priority.

So that means that if this color change wasn't applied in the id, so if we deleted this line of code, then it

would go to the next highest priority

CSS rule, which is the class,

and finally it would go to the h1.

So, knowing what we know about how specific CSS rules are, for example we know that inline styles are

more specific than say internal or external CSS styles,

so if we change the color here to,

I'm running out of colors here, orange, and we hit run,

you can see that this is even higher priority than the ids and that is overriding all of our external

stylesheet.

So it can get pretty confusing very quickly.

And also if you're writing a lot of CSS code, very often you're going to get into the situation where

you start writing conflicting rules like this bunch we've got over here.

So this ends up being a lot of code that's applied to the same thing, well applied three times basically,

and the last one standing gets carried through in the end.

But this is very inefficient and it's also very very bug prone.

So how can you prevent creating conflicting rules?

Well, the first thing to remember is, use ids very very sparingly.

Don't try and use it when you can use a class.

So, for example, in our case we've really only got ids for our sections, and, in part, that's because it

helps us with our navigation.

So just because you only have one of something isn't good enough to give it an id instead of a class.

So, for example, if I wanted to change the style of our copyright text, then even though we're only going

to have one copyright text on our page, it's not a good enough reason to use an id rather than using

a class.

A class is perfectly good enough in this case.

So use ids really really sparingly, and I tend to recommend to only use it really for those sections

and parts of your code that definitely need an id,

for example, if you're working with Bootstrap carousels or Bootstrap elements, then they do need an

id to target from the href. They need that navigational ability of the id, and that is a case where you

might consider using it, but always first consider using class instead of going straight to an id, even

if it only appears once.

The other thing to remember is that, when you're applying classes to your elements, to only use one class. I

know that it seems a little bit weird because we're using Bootstrap and Bootstrap loves it's multiple

classes, which irks a lot of people.

But in terms of the CSS classes that youre applying yourself, for example in this case the h1 has a

class of big-heading, and it wasn't something like big and heading and, I don't know, white, right, where

we have different styles for each of these classes and together they make up the big-heading.

This is really bad practice because it's very very easy to get into conflicts that way so try to keep

it specific and try to apply only a single custom class to each of your elements.

And the other thing is avoid inline styles at all costs.

This is really really bad

CSS coding practice.

There are no cases where your inline style can not be solved by using the external stylesheet.

So this is just pure laziness and it's really really bad practice.

So don't do that.

So those are just a few bits of good practice to incorporate into your workflow so that you avoid conflicts

and you have less problems debugging your code later on.