And welcome back.
In this video, we're going to 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 PAETEC.
How can we do that?
Well, we can do something like this.
I 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 created for you a nice little cheat sheet here that I'll attach after this lesson.
And it references to really good resources that I recommend.
One is the CSIS tricks that I've already mentioned.
And you can see over here all the selectors that they have there, 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 used most of the time.
And we also have our good friend, 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.
There you go, typo, it indicates that the order of CSFs 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 council 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.
We'll do something like this, so let's say we want to add a few more attacks here.
And refresh.
OK, perfect.
We love the way everything looks, but ideally for the paragraph's we want the border to be a slightly
different color.
So what 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 it, so let's call
it web text.
Now we can copy and paste.
This class attribute.
To all the Beatles.
And if I go back to my style, let's make this put it up a bit.
I can now add period subtext and then from here you can see that it's highlighted green and we want
the border to be five pixels that 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 styles 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.
So class is very, very useful.
Let's look at the next one.
Drag this over here, OK?
The next one is IDX.
I.D. is similar to class, except for you can use the same ID only once.
So let's say that we want to group these tags.
By wrapping them in a diff and you might remember this from the section where we talked about this tag
that is very, very useful for success for occasions like this, where we want to wrap something so
I can do ID equals div one.
And if I save this, I can now go back here.
And for an ID you want to do a hash, sign the IV one and let's do background.
Blue.
Save and fresh.
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 opacity.
So, again, we remember back and if we want to blue, if you remember, is red, green and blue.
So to 55.
And then we'll add capacity of, let's say, zero point two.
We 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 div two again.
We want to make sure that the IDs are different, otherwise we break the rules.
Now, if I save this, we'll have something new.
But no, in this one, we want to add a.
Different style for div two.
So, again, the selector of Div two will have, let's say this one instead of blue, has the background
red with opacity of point to let's refresh and look at that.
Alex looks a lot better than he used to.
OK, let's go back to a couple of other 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 at the top, but if I do something like this, I can say that
we wanted to align everything and say text a line and we want to do right.
If I say that and refresh now we see that this move to the right.
But this 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 CSIS, you'll see that we are saying a shoe and pee.
We want Texas 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 is 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 than the top one because elements base element.
What it does.
I'll show you over here, I save 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 pieces that are
inside H2.
So now even the H2 is installed anymore because this says we only want the piece that are inside H2
and you'll see that we have nothing inside to other than the text.
So if I do something like this.
Home, home, home.
No, I like that.
OK.
Perfect, I save that and I refresh, you'll see that home gnome is added.
With these stats, let's look at the next one, the next one is elements 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 two.
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 PE, if we do something like this where we've wrapped this in a div.
Like so and I refresh this, the style.
Didn't get applied because it only wants peace, so paragraphs that are parents of two and this piece
of his parent or her parent is the div Mr. and Mrs. Divx.
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 pipes inside of you, 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 and implement.
That is exactly after an H2 element.
So what does that mean?
Well, we need to make it so that the element.
Is.
Right after the two.
So if I go like this safe and refreshed, 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 for buttons.
The next one, if we look over here, his last child and first child, and you might guess what that
means.
So a good way to demonstrate this is we want to use Web text.
So Web text, as if you remember, is all these little lower Ambersons I can say in here, 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.
Selects the first items.
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 turned pink, even though this pea over here says, I want the color green
important overrides any of the cascading saltshaker rules and says, hey, I don't care what anybody
else says.
The P 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 stylesheets.
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 when selectors 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 of 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 to, let's say a, for example, is just one point, but if I do lie
that's too and if I do, I lie, that's even higher.
And if I do a lot even higher.
But then I add an idea of food.
I can see that IDs are even higher.
And then if I add another class list 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 will be very specific.
Once you 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 source order.
And that is let's go back to our index file.
If we had another stylesheet here, let's say we're importing another stylesheet.
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 website and refresh.
This turns blue because our browser reads this stylesheet and then reads this one, and because this
one happens after this, the later star gets added.
So if I switch this over here.
And I save refresh and let's make sure that the H2 has its own style, so less due to its color red
fresh.
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 CSFs 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.
Bye bye.