1
00:00:05,260 --> 00:00:10,500
So still a little bit more to know about selectors through my band stuff here and this is not like super

2
00:00:10,500 --> 00:00:14,440
divans but is definitely taking it to the next steps you need to make sure that you understand your

3
00:00:14,440 --> 00:00:15,260
success.

4
00:00:15,430 --> 00:00:18,510
And this is going to go hand-in-hand with that.

5
00:00:18,780 --> 00:00:24,670
So what I've done is laid out a basic document here where I've got two paragraph tags a paragraph paragraph

6
00:00:25,050 --> 00:00:32,660
all then I started aged a very basic div container here is no classroom thing applied to a very basic

7
00:00:32,660 --> 00:00:36,930
div container and within there there are four paragraph tags.

8
00:00:37,100 --> 00:00:40,910
And I created one with a class of pair of fourth pair.

9
00:00:41,090 --> 00:00:44,950
Fourth paragraph but I close a DIV tag and I've got some.

10
00:00:45,310 --> 00:00:48,630
And an order list in the bunch different list items.

11
00:00:48,820 --> 00:00:54,460
Another div the ID box and some other stuff down here show so we can see the difference in some of these

12
00:00:54,460 --> 00:00:56,240
advanced selectors.

13
00:00:56,290 --> 00:01:00,400
So make a lot more sense when you actually see it displayed in a browser.

14
00:01:01,000 --> 00:01:07,960
So then our top of their javascript appeared a query we've got a top that always starts out the same

15
00:01:07,960 --> 00:01:09,480
as it always does.

16
00:01:09,970 --> 00:01:12,160
And I want to show you first.

17
00:01:12,180 --> 00:01:17,520
Let's go ahead and do a sign and

18
00:01:20,340 --> 00:01:21,280
quote.

19
00:01:21,320 --> 00:01:32,000
So we're going to say anything that is within the day can use the greater than symbol Diptera is kind

20
00:01:32,000 --> 00:01:38,140
of the parent of the paragraph text so don't just apply whatever style to do to just a paragraph tag

21
00:01:38,140 --> 00:01:38,570
here.

22
00:01:38,610 --> 00:01:42,310
It has to be contained within a parent item of Div.

23
00:01:42,310 --> 00:01:51,520
So I've got that and I continue on same arm apply some CSSA to it and within their and volunteer just

24
00:01:51,520 --> 00:01:55,360
go ahead and make this something that's obvious like we've done in the past.

25
00:01:57,790 --> 00:02:07,560
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

26
00:02:07,700 --> 00:02:16,420
a little solid blue or it's good and close that out.

27
00:02:16,460 --> 00:02:16,790
All right.

28
00:02:16,800 --> 00:02:19,910
So save this document and we're going to take a look what it's going to do.

29
00:02:20,040 --> 00:02:20,230
Now.

30
00:02:20,250 --> 00:02:26,740
Should because it's saying it is a paragraph with a parent of div is going to give that border to it.

31
00:02:26,740 --> 00:02:33,890
So these two should not show up with the board around but these paragraph text should say that's come

32
00:02:33,900 --> 00:02:39,720
back to or document refresh and there you can see because those first two paragraph tags were not in

33
00:02:39,720 --> 00:02:47,790
a div tag without a parent of these pair of tags we're a parent of the text so the blue border to them

34
00:02:48,660 --> 00:02:52,710
and said apply anything to these on order list here because there's nothing going on with that those

35
00:02:52,710 --> 00:02:56,540
are not paragraph tags those are on ordered lists.

36
00:02:57,270 --> 00:03:00,590
All right so that is the first of the advanced selectors here.

37
00:03:00,600 --> 00:03:04,230
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

38
00:03:04,230 --> 00:03:06,050
still see if you want to.

39
00:03:06,080 --> 00:03:10,540
Now I want to do is kind of the same things I want to copy and paste it into here.

40
00:03:10,610 --> 00:03:19,080
And what I can say is anything but it is a parent of the div that is a paragraph tag and is given the

41
00:03:19,080 --> 00:03:26,100
class of fourth paragraph say creative one that was the class down here.

42
00:03:26,220 --> 00:03:31,590
Fourth paragraph will give the border of two pixels solid blue.

43
00:03:31,650 --> 00:03:33,860
It's now I say that when I refresh.

44
00:03:33,930 --> 00:03:41,780
You should see just this one class being given that blue border off of that makes sense so far.

45
00:03:41,860 --> 00:03:47,020
We're dealing with parents and children basically here of things within the DIV tag.

46
00:03:47,030 --> 00:03:52,600
Now if I had another paragraph with that fourth period class added to it it would not show up we did

47
00:03:52,600 --> 00:03:59,990
not have was not surrounded by a DIV tag so the school hadn't come about one ounce.

48
00:04:00,050 --> 00:04:01,130
It was called down.

49
00:04:01,160 --> 00:04:06,120
Do another one here and this time we're going to say we're going to go ahead and add a

50
00:04:10,440 --> 00:04:14,040
dad here you can see I've got this idea box.

51
00:04:14,090 --> 00:04:21,930
So this time I want to he say anything that's part of the I.D. of Box.

52
00:04:22,660 --> 00:04:25,740
Box.

53
00:04:26,090 --> 00:04:30,770
And plus there and isn't an order of list.

54
00:04:30,780 --> 00:04:33,450
Let's go ahead and give it that border.

55
00:04:33,450 --> 00:04:38,340
So again we're dealing with kind of parent children or here we're using saying that is part of an I.D.

56
00:04:38,400 --> 00:04:40,310
and isn't an ordered list.

57
00:04:40,670 --> 00:04:43,410
So I say that come back and hit refresh.

58
00:04:43,440 --> 00:04:51,210
You can see that this unordered list was not touched because it was not part of that box I.D. but this

59
00:04:51,210 --> 00:04:53,040
one was to go back and take a look at the code.

60
00:04:53,040 --> 00:05:00,840
Real quick here you can see my first on order list was now part of any kind of I.D. but the one below

61
00:05:00,840 --> 00:05:06,120
it here DVD box did have an on order list within it.

62
00:05:06,120 --> 00:05:11,670
So you can see again the power of Jake queery and how it works really hand-in-hand with CSSA and some

63
00:05:11,670 --> 00:05:13,620
of the advance let your things she can do with it.