All language subtitles for 4. CSS Selectors

And welcome back.

In this video we're gonna talk all about selectors.

Let's go back to our home base here.

We can look at our styles.

So far we've only been selecting elements but most likely we need something more than this.

So let's go back to our example and look at what sort of selectors we can have.

Let's say for example that we want the style that we have for the big home header to also apply to our

p tag.

How can we do that.

Well we can do something like this save refresh awesome so that's a way of doing a selector and there's

actually a whole bunch of things that we can do with selectors and I create a for you a nice little

cheat sheet here that all attach after this lesson and it references to really good resources that I

recommend.

One is the CSX tricks that I've already mentioned and you can see over here all the selectors that they

have they're not as many as they had with properties.

And it's actually not as overwhelming as you think.

Probably about 30 percent of these are the ones that are abused.

Most of the time.

And we also have our good friend W three schools that lists a bunch of the selectors here.

So let's go over a few things and understand the main selectors that we have.

So I've list them off for you over here.

But I want to point your attention to this line cascading style sheets at the most basic level it indicates

you'll type.

It indicates that the order of C rules matter and that's something that we've already discussed before

you remember the p tags.

So the order matters because we know that the C Ss will read the last line and make sure that that color

is green so that's the most basic level.

But there's a few other things that we can do.

So let's look at the selectors.

The first one is class.

The class will do something like this so let's say we want to add a few more P tax here and refresh.

Okay perfect.

We love the way everything looks.

But ideally for the paragraphs we want the border to be a slightly different color.

So while we can do is we can add something called class.

So the class property we can give it any value we want whatever we want to call us.

Let's call it Web text.

So now we can copy and paste this class attribute to all the p tags and if I go back to my style let's

make this put it up a bit.

I can now add period web text and then from here you can see that it's highlighted green and we want

the border to be 5 pixels that should green save and refresh and look at that.

So class is a good way to select a group of elements and make sure that they all have the same s and

we can add multiple ones.

So this one can be active and this adds a second class which we can say has the text color red.

So if we save that save this as well and refresh you see over here that now this is Red classes very

very useful.

Let's look at the next one the next one is I.D. I.D. is similar to class except for you can use the

same I.D. only once.

So let's say that we want to group these p tags by wrapping them in a diff and you might remember this

from the Asian male section where we talked about this tag that is very very useful for CSX for occasions

like this where we want to wrap something so I can do I.D. equals Div 1 and if I save this I can now

go back here and for an I.D. You want to do a hash sign they have one and let's do background blue save

and refresh all right.

That looks absolutely hideous.

You know what I think this will look really really good if it was if it had a bit of a passage.

So again we remember G B.A. And if we want to blue if you remember is red green and blue.

So two fifty five and then we'll light opacity of let's say zero point two you save that refresh.

All right that looks a lot better but now let's say we copy this and we want to add a second section

now we would have to call this def too.

Again we want to make sure that the I.D. are different.

Otherwise we break the rule.

Now if I save this we'll have something new but no styles on this one.

We want to add a different style for Def too.

So again the selector of Def two will have let's say this one instead of blue has the background red

with opacity of point two.

Let's refresh and look at that.

Alex say a lot better than you used it.

OK.

Let's go back to a couple of the ones so this is a star.

So the star.

It's not used very often but it symbolizes all elements.

So if I do and usually you'll see stars of the top but if I do something like this I can say that we

wanted to align everything and say text the line and we want to do right by say that and refresh.

Now we see that this moved to their right but these didn't.

And the reason is because again something called specificity.

We're saying that yep I want everything to be right.

But then as we go down the CSX you'll see that we are saying H2 MP We want text line to be center.

So these elements instead of coming to the right get to the center.

So just to prove to you that that's correct.

If I comment this out I save and refresh.

You see everything moves to the right.

OK.

And let's refresh perfect the next one is the element and this something that we've already seen.

You can see over here we're selecting the element and then we're putting the property and values the

next one is the element comma element and that is just like we've done here before.

We want both H2 and P to have these properties.

The next one and this is a little bit tricky is element space element and this is a little bit different

in the top on because elements space element what it does.

I'll show you over here.

I saved this and I refresh and what just happened here.

You'll see that now the text the line of center does not apply to these paragraphs anymore.

And that's because this syntax of writing a selector means I want you to select all P's that are inside

H two.

So now even the H two is installed anymore because this says we only want the piece that are inside

H2 and you'll see that we have nothing inside H2 other than the text.

So if I do something like this poem though I like that.

OK perfect.

I say that and I refresh.

You'll see that home gnome is added with these dots let's look at the next one the next one is element

greater than element so this one is a little tricky.

So if I go like this and I refresh nothing's changed but this says that I want you to select all P's

all paragraphs that have parent of H to so to show you exactly what that means.

Let's add this on our new line so you can see better if now within this P if we do something like this

where we wrap this in a div like so and I refresh this.

The style didn't get applied because it only wants piece so paragraphs that are parents of H and this

piece of his parent or her parent is the div.

Mr. and Mrs. div if we put this back to the way it was and refresh you'll see that this time it works

because it's saying all peace inside of H2 which is the case hopefully you're still with me.

This is as hard as selectors get.

So once you know these ones honestly you've covered 90 percent and nothing else will scare you.

Let's look at one more element plus element.

So this one if I go element plus element and refresh what just happened this says select any p element

that is exactly after an H2 element.

So what does that mean.

Well we need to make it so that the P element is right after the H2 so if I go like this save and refresh

you'll see that now we have our styles applied.

Let's look at a few more and like I said these swans are probably the hardest.

These last ones are kind of fun.

OK so we have a hover so hover.

What that means is if I go over here and I put hover at the end this means that when I refresh.

Nothing happens but when I hover my mouse look at that it changes the style to what we just wrote down

over here.

This one's a pretty cool one especially four buttons.

The next one if we look over here is last child and first child that you might guess what that means.

So a good way to demonstrate this is you want to use web text so web text as if you remember is all

these little Laura medicines I can say in here the last child refresh and only the last child of each

web text and you'll see here that there's two of them because it is selecting the last child this one

and this one and then there's also a first child which as you can imagine if I refresh it's like the

first time.

And then finally I want to show you one last thing that I don't recommend but you might see it in some

code bases.

So I don't want you to be surprised when you come across it and that is this.

So I can add something like exclamation mark important here and you'll see again we get that nice highlighting

an important means.

Let's see what happens here I refresh and everything just turn pink.

Even though this pea over here says I want the color green important overrides any of the cascading

salvia rules and says hey I don't care what anybody else says the pea is pink and you can see here why

I don't recommend using this because although you know for sure that the p tags will be pink if somebody

else comes and starts working on your style sheet and maybe this is hundreds of lines and they don't

know that the important tag is there they can be confused as to Hey How come nothing's turning green.

I can play all around with the color here and nothing's happening.

And again it breaks the rules of cascading style sheets so you don't really want to use it.

But again if you see it out in the wild you won't be surprised this way.

The last thing I want to leave you with is the idea of specificity if this is your first time running

into it.

It might get a little confusing and you do need a bit of time to get used to it.

But trust me you'll get there is just one of these things that everybody goes through and eventually

you'll have an aha moment.

Once the lectures win out in the Cascade it depends on three things.

So the first thing is specificity and I have a resource here that really explains it well a simple way

to think about this is how specific is your selector.

So this has the specificity score here.

This has a little bit higher because it's more detailed.

It's more nested.

And this one is higher.

This one is even higher.

And you can see that it keeps going higher and higher.

So the more specific something is the more likely it will win out and make sure that that is the style.

And there's actually a really fun specificity calculator.

It's really hard to say that word.

So if you click over here you can type in whatever you want so let's say for example is just one point.

But if I do lie that's two and if I do a lie that's even higher.

And if I do a two even higher but then I add an I.D. of food you see that I.D. are even higher.

And then if I add another class less to blue you'll see that the specificity increases and you'll see

over here that inline styles is actually the highest.

So if you remember that is putting a style directly into a section that will always win out over others

so you can play around with this and I will link to some of the resources that I have in the next section.

But again this is something that they'll be very specific wants to get to a certain problem.

You can figure it out but I hope that makes sense.

Let's go back over here to the last two things.

So the other thing was the importance importance is as I mentioned this exclamation mark important.

So that always depends on what kind of styles the cascade gets.

And then finally it is the sauce order.

And that is let's go back to our index file if we had a another style sheet here.

Let's say we're importing another style sheet.

And if you remember we have style to here that makes the H2 color blue.

If I put this in save and let's go back to our Web site and refresh this turns blue because our browser

reads this style sheet and then reads this one and because this one happens after this the later style

gets added.

So if I switch this over here and let's make sure that the H2 has its own style Celestia ish to color

red refresh you'll see that this style wins out OK I'm going to leave this out for you in the next section

you can play around with CSX and some of the selectors but this is the hardest it's going to get.

And once you remember these rules you're all set.

I'll see you in the next one.

By.