1 00:00:00,630 --> 00:00:03,350 Hello everyone and welcome back. 2 00:00:03,380 --> 00:00:07,380 In today's video we will learn about Combinator is in CSX. 3 00:00:08,100 --> 00:00:13,390 So far we have you seen that selectors to select elements for styling. 4 00:00:13,800 --> 00:00:20,670 As you can see we have used the human element paragraph bloodstains we have used need to add styles 5 00:00:21,090 --> 00:00:24,140 and we have used plus red states. 6 00:00:24,300 --> 00:00:26,550 These are all single selectors. 7 00:00:26,550 --> 00:00:31,720 Now let's learn how to combine these selectors so that we have to define lesser ideas. 8 00:00:31,740 --> 00:00:39,300 And plus this for this combining purpose we have combinations these commentators define the relationship 9 00:00:39,300 --> 00:00:41,150 between two selectors. 10 00:00:41,190 --> 00:00:45,520 These are the four competitors available and c assists. 11 00:00:45,540 --> 00:00:48,340 The first is the send in selector. 12 00:00:48,480 --> 00:00:51,220 It is represented by space. 13 00:00:51,390 --> 00:00:53,210 Then we have Jade selector. 14 00:00:53,220 --> 00:00:59,460 It is represented by graded unsigned then we have a disabled sibling selector. 15 00:00:59,470 --> 00:01:05,160 It is represented by let's say and then we have a general sibling selector. 16 00:01:05,170 --> 00:01:07,120 It is represented by Tilda. 17 00:01:07,540 --> 00:01:11,150 Let's try the first one which is descendants selector. 18 00:01:11,320 --> 00:01:18,700 There's a box to use this and then selector is selector a space select to be the the same. 19 00:01:18,710 --> 00:01:21,940 Then select the little select all the elements matching selected. 20 00:01:22,660 --> 00:01:25,560 Which are descendants of the elements matching selector. 21 00:01:26,080 --> 00:01:28,610 Let's try an example to understand this better. 22 00:01:29,040 --> 00:01:35,600 You have these extreme elements and you want to select all the paragraphs which are inside this article. 23 00:01:36,340 --> 00:01:39,620 So for that let's add some good here. 24 00:01:40,120 --> 00:01:44,530 So first we need to select all the articles so far that we can simply do this. 25 00:01:45,160 --> 00:01:50,130 And now what we want to do is we want to select all the paragraphs which are inside this article. 26 00:01:50,500 --> 00:01:57,610 So we could simply do a space on paragraph and this will select all the bag of dots which are inside 27 00:01:57,610 --> 00:01:59,360 this article element. 28 00:02:00,340 --> 00:02:08,790 Let's bring about going into the hugh led strategy needs and values say Font size 18 pixels. 29 00:02:09,440 --> 00:02:13,260 And as you can see the font size is reduced for all these. 30 00:02:13,880 --> 00:02:21,840 Let's try doing the background colour so let's say background colour and light yellow. 31 00:02:21,930 --> 00:02:22,980 Let's say good. 32 00:02:23,290 --> 00:02:31,150 As you can see are all these photographs are highlighted with light yellow colour and that's how our 33 00:02:31,660 --> 00:02:33,390 descendants electable. 34 00:02:33,580 --> 00:02:37,300 Now let's try the next Combinator which is J selector. 35 00:02:37,510 --> 00:02:44,980 So the syntax to use Jade selector is selecting a graded and unscientific to be this greater than sine 36 00:02:45,040 --> 00:02:46,550 is the change selector. 37 00:02:46,750 --> 00:02:48,770 It will select only the direct children. 38 00:02:48,910 --> 00:02:51,130 Let's try an example to understand it better. 39 00:02:51,670 --> 00:03:01,770 So going back here let's expand our code added up let's say these paragraphs were robbed in our div 40 00:03:10,040 --> 00:03:14,230 similarly say these two last paragraphs. 41 00:03:14,240 --> 00:03:14,960 All right. 42 00:03:15,470 --> 00:03:16,080 And then give 43 00:03:19,720 --> 00:03:22,870 let's save it. 44 00:03:23,650 --> 00:03:27,970 Let's bring a about editor here. 45 00:03:27,990 --> 00:03:28,300 All right. 46 00:03:28,390 --> 00:03:30,920 So let's come on this one. 47 00:03:31,650 --> 00:03:32,480 Let's save it. 48 00:03:33,080 --> 00:03:37,290 And as you can see the styling is and back to normal. 49 00:03:37,320 --> 00:03:41,390 Now let's try using this giant selector let's say. 50 00:03:41,390 --> 00:03:46,280 Article entitled It is represented by graded unsigned. 51 00:03:46,840 --> 00:03:47,850 So let's use that. 52 00:03:48,040 --> 00:03:49,630 So graded unsigned. 53 00:03:50,210 --> 00:03:52,450 We want to select all the paragraph tags. 54 00:03:52,690 --> 00:03:58,710 So let's do this let's try getting them back onto the first. 55 00:03:58,810 --> 00:04:01,560 Say like Google let's save it. 56 00:04:02,710 --> 00:04:10,620 And as you can see here the First Fourth Fifth and Sixth paragraphs are highlighted and here the first 57 00:04:10,620 --> 00:04:13,800 four paragraphs highlighted so we featured the code 58 00:04:17,330 --> 00:04:26,120 so inside the article we've got one two three and four paragraphs which are direct descendants of article. 59 00:04:26,870 --> 00:04:30,640 But these two paragraphs they are inside div. 60 00:04:30,770 --> 00:04:37,280 So there is the direct descendant of article and not these two paragraphs similarly over here. 61 00:04:37,300 --> 00:04:38,430 Have got one two three four. 62 00:04:38,440 --> 00:04:43,930 These starting four paragraphs as the direct descendant whereas these two are inside. 63 00:04:44,110 --> 00:04:49,420 Def similarly if I out this one in our div 64 00:04:53,340 --> 00:04:55,150 on let's just bring this here. 65 00:04:55,870 --> 00:04:59,680 Let's save it. 66 00:04:59,770 --> 00:05:06,980 And as you can see now even this one is not highlighted because now it is inside a div and it is not 67 00:05:07,040 --> 00:05:09,730 a direct descendant of the article element. 68 00:05:10,370 --> 00:05:11,860 That's all for today guys. 69 00:05:11,870 --> 00:05:16,550 We will talk about the next two communities in the next video if there's something that you did not 70 00:05:16,580 --> 00:05:17,620 understand. 71 00:05:17,720 --> 00:05:20,900 Feel free to double comment and we will discuss it. 72 00:05:20,900 --> 00:05:22,080 See you in the next video. 73 00:05:22,210 --> 00:05:23,100 By and.