In this video we're going to talk about a few other ways of selecting elements.
Aside from the three main ones that we've seen so far.
And just to recap those three are the elements selector
the class and the ID selector so element would look like Ally class with like Dot low and ID is with
the art or hash symbol and whatever we put inside will target an ID or a class or all elements of a
type.
So those are three possible ways of selecting elements but there are a lot more.
And we're going to focus on five here and these five are ones that I think are the most important the
most common.
But there are a lot more.
In fact there is this article that I linked to and the description on Tutt's Plus it's a free article
.
It's really great.
It's called the 30 CSSA selectors you must memorize and before you panic you do not need to memorize
these.
You will naturally memorize the more important ones and the ones that we use all the time.
But the point of this article is to say that there are at least 30 good ones that you should know about
.
Not to mention if these are the only 30 that you need to memorize that's still quite a bit.
And there are a lot more that this article would suggests you don't need to know about.
So the point is there's a lot of different ways of doing this.
This article it highlights 30 of them and I'm just going to go through five or six of the more important
ones.
So I recommend that you give this a read through.
There's going to be an exercise in the next video that encompasses a lot of what's covered in this article
as well as what we cover over here and our text editor.
So I have some basic HMO.
I'm not going to go through the process of creating the file.
This is not one that you need necessarily to code along with but it's a basic edged him out looks like
this where we have an H1.
We have a link that goes to Google.
We have a UL with three allies.
Then we have an H for and then another you will with three allies and then another four and then one
more you will with three allies but each ally now has a link and the first one also goes to Google like
this link up here.
Then the other one goes to Facebook and the last one goes to read it.
So simple markup.
And then I have a style sheet included called selectors.
SS So in here we're going to fill out RC SS So the very first one that we're going to talk about is
called D-Star selector and it's with with an asterisk and it will select everything on the page.
So this is not something that you actually want to do all that often but it looks like this.
And then whatever we do will actually apply to every single element.
So I'm going to give everything an element of one pixel solid light gray and you can see when I do that
every single element on the page the body H-1 every link.
Ally in H for all get border around.
So this isn't something you need to do a lot but you will see it occasionally.
The next one is the descendants Lechter and this one you'll use and see all the time.
So the way that the descendant selector works is that it takes two or more tag names or two or more
selectors and you chain them together.
So give you an example if I want to select all of the anchor tags that are inside of an ally only the
anchor tags inside of an ally not the the anchor tag appear that just on its own.
I want to select all anchor tags that are descendants of an ally.
So to do that the syntax looks like Ally space and then anchor tag.
So this will select everything that is an age tag inside of an ally and we could keep going with this
.
If we had more so I could also rewrite this like this every anchor tag that's inside of an ally that's
inside of a UL which is what we have here but that's redundant in our case.
And I could also say every anchor tangere everything with the class Hello.
Inside of an ally but we don't have any markup that matches that.
So every anchor tag inside of an ally.
And let's just give it a color of red and we refresh.
And you can see those three anchor tags are red.
This one is unchanged.
Next up is the adjacent selector.
So with the adjacent selector will do is it will like let us select elements that come after another
element.
So not nested inside like this is an ally nested in a well.
It allows us to select a sibling.
So we're going to select all ULS that come after an H for and by after we mean just on the same level
.
So not indented not inside the fork but directly after just as a sibling on the same level of an H for
it.
So that's called the adjacent selector and it looks like this.
We're going to say age four plus you will.
So without the plus this would be all us inside and age 4 but with the plus.
It just is us that are adjacent to an age 4.
And I'm just going to give a border let's do four pixel solid red and we should see these two UL's that
are adjacent.
They come after this age four on the same level have a red border.
So one more that I want to show this and this is also a really important one is called the attribute
selector.
And so the attribute selector is a way to select elements based off of any attribute.
So in our case we're going to do a selection based off of the H ref attribute.
We're going to check we're going to turn all the links to Google where H.F. is Google dot com.
We're going to make them one color but you could also use this to select all images of a particular
source or all inputs of a particular type like all checkboxes or all password fields or something.
So the syntax we type anchor tag and then square braces and then inside we're going to type the attribute
that we're looking for.
So Tref equals and then we're going to do the links to Google.
So this will select every anchor tag with HGF equal to this and then we're just going to give it a color
lets give it a background
blue
and you can see these two links.
This first one goes to Google and the second one goes to Google.
So they are blue.
But the other two links don't go to Google.
They go to Facebook and to read it.
So they are unchanged.
So you might also and you will actually see this one a lot or will have an input type equals text if
you want it to style all text inputs differently or if you want it to style all checkboxes one way because
all inputs even though there are so many different inputs color to color inputs and file pictures and
password and emails and submit buttons they are all an input tag.
So just to select by input is going to give us all different types of inputs.
So we often select by type.
So let's go back to our Google ref selector.
So there's one more that I want to talk about here which is called End of type and the way the end of
type works is it takes a number like three or five.
And then it selects every end of a specific element.
So if I want to select every fifth div or every second ally or the fifth the tenth paragraph on a page
I could use and of type.
So in this case Drona select the final UL and do something to the final.
Well the third one.
Let's say I want to give it a different border or different background I'll select Well colon and of
type and then a number like three.
And then I'm going to say background.
And let's give it obvious background like purple and you can see only the third you well turned purple
.
So this is useful if you want to select something down the page.
One thing that I should note though is the way that this works is let's go to an ally and change a third
lie.
And before I do that I want you to imagine what you think is going to happen.
So this is supposed to select the third ally.
So that would be this one here I guess.
But as it refresh you'll see it actually selects every third lie.
So from every group of allies it's going to select the third one.
And so if I had a bunch more.
It's important to note that it's still only so like the third in a given group so it's not every third
one as if it would select asparagus again and then asparagus again it's just in every group of them
it's going to select the third one.
There is however a way to get it to select an even number so I can select every other ally and make
it purple like this