1 00:00:08,755 --> 00:00:13,150 Hi, today we're going to be talking about advanced selectors. 2 00:00:13,150 --> 00:00:16,101 Up until this point, when we've been writing our rules, 3 00:00:16,101 --> 00:00:19,004 we've been writing our rules for a specific type of tag. 4 00:00:19,004 --> 00:00:22,587 We've been saying h1 or p or h2. 5 00:00:22,587 --> 00:00:26,613 So we've really just focused on one thing that covers all the different elements of 6 00:00:26,613 --> 00:00:27,970 that type. 7 00:00:27,970 --> 00:00:31,550 But what if you don't want to style all of the links, just some of them? 8 00:00:31,550 --> 00:00:33,490 Or you don't want to style all of your lists, 9 00:00:33,490 --> 00:00:35,350 you just want to style some of them? 10 00:00:35,350 --> 00:00:38,450 Well, now we're going to talk about these type of advanced selectors 11 00:00:38,450 --> 00:00:40,070 that will let us do just that. 12 00:00:41,320 --> 00:00:45,270 CSS is going to give you so many options that in this lecture I'm going to try to 13 00:00:45,270 --> 00:00:49,280 cover as many as I can, but it's still going to be up to you to go off and 14 00:00:49,280 --> 00:00:51,560 look up some more on your own as you need them. 15 00:00:52,580 --> 00:00:56,200 So let's start with the CSS selectors that follow the DOM. 16 00:00:56,200 --> 00:00:59,240 If you remember the document object model 17 00:00:59,240 --> 00:01:03,910 is how the browser breaks up your page into a tree-like structure. 18 00:01:03,910 --> 00:01:08,710 So in this way, the browser actually knows if a paragraph comes directly after an h1 19 00:01:08,710 --> 00:01:13,100 tag or if two paragraphs are siblings in the same section. 20 00:01:13,100 --> 00:01:17,150 We're going to utilize that to style just certain parts of your page. 21 00:01:17,150 --> 00:01:21,910 So descendant selectors are a way to say, hey, if you're inside a nav tag, 22 00:01:21,910 --> 00:01:25,870 I want you to style all the links that are inside the nav tag. 23 00:01:25,870 --> 00:01:29,310 Instead of doing all of them, just those ones. 24 00:01:29,310 --> 00:01:33,530 If you wanna be even more specific, you can use the child selectors. 25 00:01:33,530 --> 00:01:36,500 This rule is very similar, except it says, 26 00:01:36,500 --> 00:01:40,930 all the a links need to be what we call direct descendants of the nav link. 27 00:01:40,930 --> 00:01:44,780 If you have a paragraph in there and you have some links in there, ignore that. 28 00:01:44,780 --> 00:01:46,680 They need to be directly underneath each other. 29 00:01:47,810 --> 00:01:50,250 The final one is adjacent sibling. 30 00:01:50,250 --> 00:01:53,060 That’s not one I actually use very much in my own coding, but 31 00:01:53,060 --> 00:01:55,690 I wanted to let you know what it is because there’s a really good chance 32 00:01:55,690 --> 00:01:58,630 you’ll see it if you’re looking at other people’s code. 33 00:01:58,630 --> 00:02:01,620 How the adjacent sibling works is that the elements must be 34 00:02:01,620 --> 00:02:05,150 what we call the same level and follow each other. 35 00:02:05,150 --> 00:02:07,480 So if you have a section that has an h1 and 36 00:02:07,480 --> 00:02:09,860 then an ordered list, they would be siblings. 37 00:02:09,860 --> 00:02:12,260 If you had an h1 and then some other things and 38 00:02:12,260 --> 00:02:15,310 that ordered list was inside a paragraph, it wouldn't work that way. 39 00:02:16,870 --> 00:02:20,480 Next, we're going to talk about what we call id selectors. 40 00:02:20,480 --> 00:02:24,390 ids are used to identify a single element in the DOM. 41 00:02:24,390 --> 00:02:26,570 The way ids work is that you would go in, and 42 00:02:26,570 --> 00:02:31,130 you would, in your HTML, say something along the lines of id equals header, or 43 00:02:31,130 --> 00:02:34,030 id equals footer is one they used to use a lot. 44 00:02:34,030 --> 00:02:37,440 Then in your style sheet, using the pound symbol, 45 00:02:37,440 --> 00:02:40,610 you can identify which ones that you want to style. 46 00:02:42,300 --> 00:02:44,670 So right now, there's a small movement, but 47 00:02:44,670 --> 00:02:48,670 it's growing a little bit, to move out of the use of id from CSS. 48 00:02:48,670 --> 00:02:52,005 They're saying there's really no point in using that because a lot 49 00:02:52,005 --> 00:02:55,790 of people just really use this id for JavaScript and things like that. 50 00:02:55,790 --> 00:02:58,680 But again, this is something you're going to be seeing a lot, so 51 00:02:58,680 --> 00:02:59,882 I want to introduce you to it. 52 00:02:59,882 --> 00:03:04,490 So let's see an example really quickly here just on the screen of how it works. 53 00:03:04,490 --> 00:03:09,770 In my HTML, I would go ahead and put in my source, my alt tag, 54 00:03:09,770 --> 00:03:12,610 but also id="mainLogo". 55 00:03:12,610 --> 00:03:17,970 Then, in my style sheet, using the # symbol along with the id name, 56 00:03:17,970 --> 00:03:21,670 the browser's going to know, oh, whenever I see one of those images, 57 00:03:21,670 --> 00:03:24,600 I wanna make sure I add this border and this margin. 58 00:03:27,130 --> 00:03:31,740 Class selectors are similar to ids, but the difference is, that classes can 59 00:03:31,740 --> 00:03:37,190 apply to a range of elements, not just one particular element in the DOM. 60 00:03:37,190 --> 00:03:40,775 So, think of thumbnail images or the social icon medias. 61 00:03:40,775 --> 00:03:43,065 It's this idea that, you know what, 62 00:03:43,065 --> 00:03:47,345 I wanna be able to style a big group of things all in the same way, 63 00:03:47,345 --> 00:03:49,905 but I don't want to necessarily style all of them that way. 64 00:03:49,905 --> 00:03:52,245 You don't want all of your images to be thumbnails, 65 00:03:52,245 --> 00:03:53,425 but you want a lot of them to be. 66 00:03:55,065 --> 00:03:57,705 You would write this code in a very similar manner. 67 00:03:57,705 --> 00:04:01,419 Over here in my HTML, I have class="thumb", class="thumb", 68 00:04:01,419 --> 00:04:02,750 class="thumb". 69 00:04:02,750 --> 00:04:07,240 And in my CSS, instead of using the #, you need to make sure you use the period or 70 00:04:07,240 --> 00:04:11,710 dot, along with the class name, and then you can give it any rules. 71 00:04:11,710 --> 00:04:16,250 And this way, the page is gonna go through and know that in addition to 72 00:04:16,250 --> 00:04:21,229 any styling you just put on images, you also want this styling for the thumbnails. 73 00:04:22,950 --> 00:04:26,020 So just to try to help you make it a little bit more clear, 74 00:04:26,020 --> 00:04:29,070 what's the difference between using classes and ids? 75 00:04:29,070 --> 00:04:31,570 Well first, you wanna make sure you know the syntax. 76 00:04:31,570 --> 00:04:35,050 The period is for classes, and the pound is for ids. 77 00:04:35,050 --> 00:04:38,220 You can't mess up on this, because the browser will not fix it for 78 00:04:38,220 --> 00:04:42,310 you if you put the wrong thing in front of your class or id name. 79 00:04:42,310 --> 00:04:45,550 You wanna remember that classes can be used multiple times. 80 00:04:45,550 --> 00:04:50,258 It makes sense in your HTML code to see class="thumb", class="thumb", 81 00:04:50,258 --> 00:04:54,880 class="thumb" because it's not supposed to be a specific part of the page. 82 00:04:54,880 --> 00:04:59,290 With ids, it should be unique, you should only see id equals, for 83 00:04:59,290 --> 00:05:02,650 instance, header, which we're not even using once. 84 00:05:02,650 --> 00:05:06,200 You should only see id="main section" once. 85 00:05:08,020 --> 00:05:11,270 So again, let's think of images and navigation bars. 86 00:05:11,270 --> 00:05:14,158 It's very common that you wanna format numerous, but 87 00:05:14,158 --> 00:05:16,270 not all the images the same way. 88 00:05:16,270 --> 00:05:18,730 And you would use classes for that. 89 00:05:18,730 --> 00:05:22,510 Where you might use an id is, I'm sure that you've been at some places where on 90 00:05:22,510 --> 00:05:25,070 the webpage, you see the navigation bar, and 91 00:05:25,070 --> 00:05:28,990 the page that you're currently on is styled just slightly differently. 92 00:05:28,990 --> 00:05:33,360 And that makes sense because you can only be at one page at a time, and 93 00:05:33,360 --> 00:05:35,260 that's why you might choose to use the id. 94 00:05:36,650 --> 00:05:40,240 So let's go ahead and go through a quick example using that navigation bar. 95 00:05:41,780 --> 00:05:43,660 So here's a sample HTML file, 96 00:05:43,660 --> 00:05:47,720 where all I've done is put in four links that don't even really go anywhere. 97 00:05:47,720 --> 00:05:49,870 I've commented out the style sheet just so 98 00:05:49,870 --> 00:05:53,030 you can see what it would look like without any styling. 99 00:05:53,030 --> 00:05:56,800 You can see, I've got my Home, Interests, Resume, Hobbies, and 100 00:05:56,800 --> 00:06:01,280 I have one additional link down here that I very badly called here. 101 00:06:01,280 --> 00:06:02,200 So let's go ahead and 102 00:06:02,200 --> 00:06:05,744 try adding a little bit of styling using these advanced selectors. 103 00:06:05,744 --> 00:06:07,120 Go over here. 104 00:06:07,120 --> 00:06:10,210 You can see that I've used the child element of, actually, 105 00:06:10,210 --> 00:06:14,820 just kind of the descendant of, hey, all the links that are in the navigation bar, 106 00:06:14,820 --> 00:06:17,952 I want to style differently, I wanna give them a different background color, 107 00:06:17,952 --> 00:06:20,260 a different width, things like that. 108 00:06:20,260 --> 00:06:25,090 In addition, anything that's class current, I want to make even different 109 00:06:25,090 --> 00:06:28,070 than any other link or anything else we've seen that way. 110 00:06:28,070 --> 00:06:31,240 So let's go ahead and uncomment the style sheet. 111 00:06:31,240 --> 00:06:31,740 Save it. 112 00:06:32,740 --> 00:06:35,580 Go from this to this. 113 00:06:35,580 --> 00:06:39,200 You can see that only the links that are inside my navigation bar are styled. 114 00:06:39,200 --> 00:06:40,740 This one was left the same. 115 00:06:40,740 --> 00:06:44,970 And the one where I have class="current" does look different from the others. 116 00:06:44,970 --> 00:06:48,560 So it's really simple to use these things, you just need to know about them. 117 00:06:48,560 --> 00:06:50,210 As your pages get more advanced, 118 00:06:50,210 --> 00:06:53,460 you're going to want to narrow the scope of some of the rules. 119 00:06:53,460 --> 00:06:55,070 We only wanna apply them to certain things. 120 00:06:55,070 --> 00:06:59,020 And one of the notations you can use for that is the dot. 121 00:06:59,020 --> 00:07:02,900 So in your style sheet, you would actually have p.main. 122 00:07:02,900 --> 00:07:07,760 This means go and find all the paragraphs that are using the class main. 123 00:07:07,760 --> 00:07:10,870 Or you might have header img.special. 124 00:07:10,870 --> 00:07:14,930 This would mean find all the images that have image classical special 125 00:07:14,930 --> 00:07:16,430 that belong in the header. 126 00:07:16,430 --> 00:07:20,150 It's just a way for you to really reduce what's being styled. 127 00:07:20,150 --> 00:07:23,640 On the same hand, you can also, what we call, expand the scope. 128 00:07:23,640 --> 00:07:26,740 So, let's say that there's some sort of styling you want to apply to both 129 00:07:26,740 --> 00:07:31,360 the header and the footer, or to the sections and the articles. 130 00:07:31,360 --> 00:07:32,400 Not a problem. 131 00:07:32,400 --> 00:07:34,020 What you do is you just write the element, 132 00:07:34,020 --> 00:07:37,700 and you include a comma right there to let it know. 133 00:07:37,700 --> 00:07:39,550 So just as a quick review. 134 00:07:39,550 --> 00:07:41,230 And this is something from much earlier. 135 00:07:41,230 --> 00:07:44,140 You need to think about what happens when there are multiple rules for 136 00:07:44,140 --> 00:07:45,350 the same selector. 137 00:07:45,350 --> 00:07:49,440 So you might have this one up here with the paragraph where it has certain 138 00:07:49,440 --> 00:07:53,770 qualities it wants to share between paragraphs h1, the id main, and 139 00:07:53,770 --> 00:07:55,070 the class special. 140 00:07:55,070 --> 00:07:57,740 But later, if you wanna have additional styling for 141 00:07:57,740 --> 00:08:01,500 a paragraph, as long as you put that somewhere below, 142 00:08:01,500 --> 00:08:05,050 it's going to override and combine with anything that's higher up. 143 00:08:05,050 --> 00:08:10,430 So unless a rule has the exclamation point important after it, it always 144 00:08:10,430 --> 00:08:14,770 just uses the last one it saw, along with the earlier ones that don't conflict. 145 00:08:15,950 --> 00:08:20,030 In addition to the element selectors and the different DOM relationship selectors, 146 00:08:20,030 --> 00:08:22,470 we also have a few more that I want to talk about briefly. 147 00:08:22,470 --> 00:08:25,620 The first one is the universal selector, which is the star or 148 00:08:25,620 --> 00:08:27,850 the Shift eight on your keyboard. 149 00:08:27,850 --> 00:08:28,940 What this one does is, 150 00:08:28,940 --> 00:08:32,340 it'll apply your styling to every single element on the page. 151 00:08:32,340 --> 00:08:33,630 It's absolutely crazy. 152 00:08:33,630 --> 00:08:34,540 I'm not gonna do it. 153 00:08:34,540 --> 00:08:38,190 I'm gonna let you do it, but go ahead and put in a star, and then the style, 154 00:08:38,190 --> 00:08:40,500 maybe border, around every element. 155 00:08:40,500 --> 00:08:42,380 It affects everything on your page. 156 00:08:42,380 --> 00:08:43,720 Sometimes, it's nice for debugging. 157 00:08:44,720 --> 00:08:47,340 The next one you might wanna think about using are what we call 158 00:08:47,340 --> 00:08:48,730 attribute selectors. 159 00:08:48,730 --> 00:08:53,450 Instead of going on the tags, you go on the attributes that go inside the tags. 160 00:08:53,450 --> 00:08:58,220 So in this case, it would go ahead and it would wanna style every link where you 161 00:08:58,220 --> 00:09:03,150 have href="info.html", and I'll do a quick example of that in just a second. 162 00:09:03,150 --> 00:09:06,940 But before I do that, I wanted to mention two more that we'll be looking at later, 163 00:09:06,940 --> 00:09:09,670 which are pseudo-classes and pseudo-elements. 164 00:09:09,670 --> 00:09:13,650 Just another level of distinguishing just certain things you wanna style 165 00:09:13,650 --> 00:09:14,740 on your page. 166 00:09:14,740 --> 00:09:18,790 But first, let's go ahead and look at using these attribute selectors. 167 00:09:18,790 --> 00:09:22,290 So the way that attribute selectors work is that they search the DOM for 168 00:09:22,290 --> 00:09:25,130 elements that have the attribute that you are looking for. 169 00:09:25,130 --> 00:09:29,960 So, for instance, you might wanna look all the images that use gif files or 170 00:09:29,960 --> 00:09:33,710 all the images that have empty alt text or maybe 171 00:09:33,710 --> 00:09:38,400 all the links that go to government sites or non-profit sites or educational sites. 172 00:09:38,400 --> 00:09:40,900 It's really easy for us to find those and go ahead and 173 00:09:40,900 --> 00:09:41,999 style them a little differently. 174 00:09:43,000 --> 00:09:45,780 How we do that is that we use operators to 175 00:09:45,780 --> 00:09:48,860 match the different parts of the alt text that you're looking for. 176 00:09:48,860 --> 00:09:53,420 So up here, in what we call the caret, it's going to match the beginning. 177 00:09:53,420 --> 00:09:58,050 So in this case, it would match all those links that start with http://umich, and 178 00:09:58,050 --> 00:10:00,440 it doesn't matter how it ends. 179 00:10:00,440 --> 00:10:04,004 The next one with the dollar sign is going to match the end exactly. 180 00:10:04,004 --> 00:10:07,754 It's going to find every file that ends in .png. 181 00:10:07,754 --> 00:10:11,096 We also have the wildcard, where you're going and 182 00:10:11,096 --> 00:10:17,190 saying if you see umich in any part of any hyper reference at all, apply this rule. 183 00:10:17,190 --> 00:10:20,530 So what we're going to look at is we're going to look at a file that has different 184 00:10:20,530 --> 00:10:25,180 links And each one has a different type of extension that we wanna style differently. 185 00:10:25,180 --> 00:10:25,720 All right. 186 00:10:25,720 --> 00:10:28,190 So what I have here is just a list of links. 187 00:10:28,190 --> 00:10:29,260 There's no classes. 188 00:10:29,260 --> 00:10:33,810 Nothing special about these, that goes to different university sites, organizations, 189 00:10:33,810 --> 00:10:37,680 government sites, and if you take a look, by default, it's just gonna show up as 190 00:10:37,680 --> 00:10:41,420 your traditional blue links with underlined, the text right there. 191 00:10:41,420 --> 00:10:44,490 But what I want to do is I want to go in and say, 192 00:10:44,490 --> 00:10:47,360 you know what, all the ones that end in .org? 193 00:10:47,360 --> 00:10:48,750 Make them one color. 194 00:10:48,750 --> 00:10:51,550 All the ones that are .edu, another color, and 195 00:10:51,550 --> 00:10:54,340 all the ones that end in .gov, a third color. 196 00:10:54,340 --> 00:10:55,671 Let's see what it looks like. 197 00:10:58,921 --> 00:11:03,120 Here, you can see that without me having to put in any information inside the tags 198 00:11:03,120 --> 00:11:07,150 themselves, the browser has colored them the proper color. 199 00:11:07,150 --> 00:11:11,260 Okay, I've just covered a lot of stuff in a very short video. 200 00:11:11,260 --> 00:11:14,090 You need to realize that these ideas are gonna merge together. 201 00:11:14,090 --> 00:11:15,310 You're gonna be using classes, 202 00:11:15,310 --> 00:11:19,190 you're gonna be using ids, you're gonna be using attributes. 203 00:11:19,190 --> 00:11:22,010 And the important thing I want you to know is that when you 204 00:11:22,010 --> 00:11:26,530 are adding all these things together, the order that you write classes and 205 00:11:26,530 --> 00:11:28,800 different ids in your text doesn't matter. 206 00:11:28,800 --> 00:11:32,630 It doesn't matter whether you have special early dark or dark early special. 207 00:11:32,630 --> 00:11:37,170 What really matters is the order that you write your rules in your style sheet. 208 00:11:37,170 --> 00:11:41,310 Browsers are always going to start to the top, and apply each rule. 209 00:11:41,310 --> 00:11:44,870 Now the good news from this lecture is that I want you to realize 210 00:11:44,870 --> 00:11:49,410 that with the power of classes and ids and this cascading style sheet is 211 00:11:49,410 --> 00:11:53,380 that this means you can use style sheets from other people to style your code. 212 00:11:53,380 --> 00:11:56,590 And you can just add a class that changes the one little attribute 213 00:11:56,590 --> 00:11:58,900 that maybe you didn't like about it. 214 00:11:58,900 --> 00:12:01,970 You can override these style sheets and make it your very own. 215 00:12:01,970 --> 00:12:05,830 Just make sure that you link your style sheet last. 216 00:12:05,830 --> 00:12:07,580 All right, we've covered a lot, and 217 00:12:07,580 --> 00:12:09,780 I'm hoping I didn't overwhelm you with the video. 218 00:12:09,780 --> 00:12:12,460 I just want you to remember that when we do type selectors and 219 00:12:12,460 --> 00:12:16,480 the kind of things that I'm gonna have you do in this class is that we usually 220 00:12:16,480 --> 00:12:20,380 are adding them to narrow the scope of where rules are applied. 221 00:12:20,380 --> 00:12:21,790 So we don't wanna style everything. 222 00:12:21,790 --> 00:12:24,390 We only wanna style certain things. 223 00:12:24,390 --> 00:12:28,490 An id is used to specify a specific element in a page, and 224 00:12:28,490 --> 00:12:33,160 classes are used to associate elements that really tend to have the similar look. 225 00:12:33,160 --> 00:12:36,910 So as we go on, I know I'm gonna have some code-with-me examples. 226 00:12:36,910 --> 00:12:39,390 I hope you'll stop, get out your laptop, and 227 00:12:39,390 --> 00:12:44,040 really code with me to get an idea of how powerful these different things can be. 228 00:12:44,040 --> 00:12:44,540 Thanks.