So still a little bit more to know about selectors through my band stuff here and this is not like super
divans but is definitely taking it to the next steps you need to make sure that you understand your
success.
And this is going to go hand-in-hand with that.
So what I've done is laid out a basic document here where I've got two paragraph tags a paragraph paragraph
all then I started aged a very basic div container here is no classroom thing applied to a very basic
div container and within there there are four paragraph tags.
And I created one with a class of pair of fourth pair.
Fourth paragraph but I close a DIV tag and I've got some.
And an order list in the bunch different list items.
Another div the ID box and some other stuff down here show so we can see the difference in some of these
advanced selectors.
So make a lot more sense when you actually see it displayed in a browser.
So then our top of their javascript appeared a query we've got a top that always starts out the same
as it always does.
And I want to show you first.
Let's go ahead and do a sign and
quote.
So we're going to say anything that is within the day can use the greater than symbol Diptera is kind
of the parent of the paragraph text so don't just apply whatever style to do to just a paragraph tag
here.
It has to be contained within a parent item of Div.
So I've got that and I continue on same arm apply some CSSA to it and within their and volunteer just
go ahead and make this something that's obvious like we've done in the past.
Get with a class type of a border or give it a style border and I will say it's going to make this it's
a little solid blue or it's good and close that out.
All right.
So save this document and we're going to take a look what it's going to do.
Now.
Should because it's saying it is a paragraph with a parent of div is going to give that border to it.
So these two should not show up with the board around but these paragraph text should say that's come
back to or document refresh and there you can see because those first two paragraph tags were not in
a div tag without a parent of these pair of tags we're a parent of the text so the blue border to them
and said apply anything to these on order list here because there's nothing going on with that those
are not paragraph tags those are on ordered lists.
All right so that is the first of the advanced selectors here.
I'm going to go ahead and I was going to comment that out so we can kind of come back to that area and
still see if you want to.
Now I want to do is kind of the same things I want to copy and paste it into here.
And what I can say is anything but it is a parent of the div that is a paragraph tag and is given the
class of fourth paragraph say creative one that was the class down here.
Fourth paragraph will give the border of two pixels solid blue.
It's now I say that when I refresh.
You should see just this one class being given that blue border off of that makes sense so far.
We're dealing with parents and children basically here of things within the DIV tag.
Now if I had another paragraph with that fourth period class added to it it would not show up we did
not have was not surrounded by a DIV tag so the school hadn't come about one ounce.
It was called down.
Do another one here and this time we're going to say we're going to go ahead and add a
dad here you can see I've got this idea box.
So this time I want to he say anything that's part of the I.D. of Box.
Box.
And plus there and isn't an order of list.
Let's go ahead and give it that border.
So again we're dealing with kind of parent children or here we're using saying that is part of an I.D.
and isn't an ordered list.
So I say that come back and hit refresh.
You can see that this unordered list was not touched because it was not part of that box I.D. but this
one was to go back and take a look at the code.
Real quick here you can see my first on order list was now part of any kind of I.D. but the one below
it here DVD box did have an on order list within it.
So you can see again the power of Jake queery and how it works really hand-in-hand with CSSA and some
of the advance let your things she can do with it.