1 00:00:02,050 --> 00:00:06,550 Whenever you want to be more specific about which style 2 00:00:06,550 --> 00:00:09,280 should be applied to which elements, 3 00:00:09,280 --> 00:00:12,620 you use select Selectors or Combinators. 4 00:00:12,620 --> 00:00:14,630 We learned about some Selectors already, 5 00:00:14,630 --> 00:00:16,460 Combinators is a new topic. 6 00:00:16,460 --> 00:00:18,390 Let's explore both in theory now, 7 00:00:18,390 --> 00:00:21,360 and let's get started with our Selectors. 8 00:00:21,360 --> 00:00:24,423 We know two types of Selectors already. 9 00:00:25,300 --> 00:00:28,250 The first one is the so-called Type Selector, 10 00:00:28,250 --> 00:00:30,060 we used it throughout our project. 11 00:00:30,060 --> 00:00:34,240 You can just refer to a specific element type, and then add 12 00:00:34,240 --> 00:00:37,770 your CSS rules, therefore these rules will be applied 13 00:00:37,770 --> 00:00:40,090 to this specific element type. 14 00:00:40,090 --> 00:00:45,090 For example, a paragraph, an h2 element, anything like this. 15 00:00:45,110 --> 00:00:48,600 We also had a look at the ID Selector. 16 00:00:48,600 --> 00:00:51,960 The ID Selector was created by adding an attribute, 17 00:00:51,960 --> 00:00:55,950 the ID attribute and the ID name in the HTML file, 18 00:00:55,950 --> 00:01:00,950 to an HTML element, and we can then refer to this ID in CSS 19 00:01:01,390 --> 00:01:05,260 with the hashtag and then the ID name that we created 20 00:01:05,260 --> 00:01:07,423 for this specific element. 21 00:01:08,700 --> 00:01:12,010 We also have two other core Selector types, 22 00:01:12,010 --> 00:01:14,854 one is the so-called Group Selector. 23 00:01:14,854 --> 00:01:17,520 The Group Selector allows us to well, 24 00:01:17,520 --> 00:01:20,410 group multiple element types together, 25 00:01:20,410 --> 00:01:23,440 where our specific CSS rules we define 26 00:01:23,440 --> 00:01:26,770 as part of the Selector will then be applied. 27 00:01:26,770 --> 00:01:29,170 Here we could for example, say we use the paragraph 28 00:01:29,170 --> 00:01:32,320 and the h2 element, and then we apply certain styles, 29 00:01:32,320 --> 00:01:35,020 to both of these element types. 30 00:01:35,020 --> 00:01:38,030 We have another core Selector type though, 31 00:01:38,030 --> 00:01:41,080 and this is the Class Selector. 32 00:01:41,080 --> 00:01:43,590 The Class Selector is quite similar 33 00:01:43,590 --> 00:01:45,750 to the ID Selector, in general. 34 00:01:45,750 --> 00:01:49,940 We also add the class as attribute to our HTML element, 35 00:01:49,940 --> 00:01:52,720 then we define a class name, and then in CSS, 36 00:01:52,720 --> 00:01:56,690 we refer to this specific class name with the dot notation, 37 00:01:56,690 --> 00:01:58,743 and then by adding this class name. 38 00:02:00,240 --> 00:02:02,970 The difference to the ID Selector is that, 39 00:02:02,970 --> 00:02:05,370 whilst the ID Selector is unique, 40 00:02:05,370 --> 00:02:09,210 so an ID should only be used once for a specific element, 41 00:02:09,210 --> 00:02:13,210 the Class Selector can be used for multiple elements. 42 00:02:13,210 --> 00:02:16,660 So with that, you can create specific classes of elements, 43 00:02:16,660 --> 00:02:20,790 so to say, which then have the specific styles applied, 44 00:02:20,790 --> 00:02:23,203 which you defined in your Class Selector. 45 00:02:24,690 --> 00:02:26,540 So these are Selectors, 46 00:02:26,540 --> 00:02:29,850 besides that we also have Combinators and we'll have a look 47 00:02:29,850 --> 00:02:32,460 at two core Combinators now, 48 00:02:32,460 --> 00:02:36,343 and Combinators are a combination of different Selectors. 49 00:02:37,430 --> 00:02:38,530 What does this mean? 50 00:02:38,530 --> 00:02:42,200 Well we have, for example, the Descendant Combinator, 51 00:02:42,200 --> 00:02:44,450 here referring to the List Selector, 52 00:02:44,450 --> 00:02:47,830 and the Paragraph Selector, just an example here of course. 53 00:02:47,830 --> 00:02:51,090 If you would use this Combinator in your CSS code, 54 00:02:51,090 --> 00:02:52,780 and then apply certain rules to it, 55 00:02:52,780 --> 00:02:56,810 then the rules defined here would be applied to all 56 00:02:56,810 --> 00:03:00,610 paragraphs which have a List item as ancestor, 57 00:03:00,610 --> 00:03:03,470 not as parent, but as ancestor. 58 00:03:03,470 --> 00:03:06,050 That's again one of the reasons why we talked 59 00:03:06,050 --> 00:03:08,870 about the parent, child, ancestor descendants, 60 00:03:08,870 --> 00:03:11,430 so all these different combinations and these relationships 61 00:03:11,430 --> 00:03:14,930 we have between our elements in HTML. 62 00:03:14,930 --> 00:03:17,990 Here it becomes important because with this logic, 63 00:03:17,990 --> 00:03:20,270 we can target specific elements, 64 00:03:20,270 --> 00:03:22,623 and apply certain styles to these. 65 00:03:23,560 --> 00:03:25,360 Besides the Descendant Combinator, 66 00:03:25,360 --> 00:03:27,660 we also have a Child Combinator, 67 00:03:27,660 --> 00:03:29,750 written basically in the same way, 68 00:03:29,750 --> 00:03:32,640 with the difference here that we don't add the space, 69 00:03:32,640 --> 00:03:36,930 but we add this larger than sign, between the two elements. 70 00:03:36,930 --> 00:03:39,630 Here, I took the example of an h2 element, 71 00:03:39,630 --> 00:03:41,630 and the paragraph element, 72 00:03:41,630 --> 00:03:45,000 the result would be if you use this combination in CSS, 73 00:03:45,000 --> 00:03:48,670 that only paragraphs which are direct children of h2, 74 00:03:48,670 --> 00:03:51,630 would have the defined styles applied. 75 00:03:51,630 --> 00:03:54,020 So these are two core Combinators basically, 76 00:03:54,020 --> 00:03:57,190 one allowing us to style any descendants, 77 00:03:57,190 --> 00:04:00,530 the other one allowing us to apply styles to children. 78 00:04:00,530 --> 00:04:02,040 That's the theory of course, 79 00:04:02,040 --> 00:04:04,890 let's apply these concepts now in practice again, 80 00:04:04,890 --> 00:04:06,203 in our course project.