:first-child and :last-child

[NOISE] There's a lot more to CSS pseudo classes than the link and 0:00 user action pseudo classes we covered back in CSS basics. 0:05 CSS actually has a number of other helpful pseudo classes, 0:11 beginning with structural pseudo classes, that target elements according to 0:14 their position on the page and their relation to other elements. 0:18 This is where we'll really start to see the real power and 0:21 flexibility behind many of the more advanced CSS selectors. 0:24 So let's continue with pseudo classes by next taking a look at how to 0:27 target first and last child elements. 0:31 So first, we'll need to launch the new workspace for this lesson. 0:34 And as we can see when we click the preview button the page consists of 0:38 a simple list containing ten items. 0:42 Now if we take a look at the index dot html file we can see that the markup for 0:45 that list is an un-ordered list containing 10 list items. 0:51 So we can say that all 10 of these LI elements are children of this parent UL. 0:56 So now let's say we only want to target and style the first item in our list. 1:02 So item one. 1:09 Well, we can use the first child structural pseudo class to do just that. 1:10 So let's go back to our work space and 1:15 we'll bring up the style.css file right here in the CSS directory. 1:17 And let's create that first child selector by 1:23 first targeting an li element followed by the first child pseudo-class. 1:25 So we'll say :first-child. 1:31 So like I said, 1:38 this selector will target the list element that is the first child of its parent. 1:39 So in the rule, let's go ahead and give it a background property. 1:45 And we're going to set the value to #52. 1:51 BAB3 and we're gonna set the color to white all right. 1:56 So let's take a look. 2:01 We'll save our style.css file and 2:02 when we refresh the browser notice that the first list item in our unordered 2:06 list is the only one with that aqua green background color and the white text color. 2:11 So similar to the first child pseudo class, the last child pseudo class. 2:16 Allows us to target an element that's the last child of its parents. 2:22 So let's see how that works. 2:27 We'll go back to our style sheet and 2:28 let's change the first child selector to last child. 2:30 So now when we go back to our list and refresh the page. 2:36 Now we can see how the styles are applied to the very last list item only. 2:40 And it doesn't matter how many list items we add or remove from this unordered list, 2:45 the very last one will always have that background color and white text color. 2:50 So, that's why these first and 2:54 last child selectors can come in really handy when styling lists or navigations. 2:55 So, I'm gonna go back to our style sheet and 3:01 set this selector back to the first child pseudoclass. 3:03 I'm gonna go ahead and undo that. 3:07 So, when we take a look at it again, once again, 3:09 that first list item, takes on those color styles. 3:11 But now, let's say that we want to remove this unnecessary border here. 3:14 In the last list item, 3:19 well now we know that we can easily do that with a last child pseudo class. 3:21 No problem right? 3:25 So let's go back to our style sheet and 3:26 right beneath the first child selector we just wrote. 3:28 Let's type li colon last dash child. 3:32 And, we'll add a border property and set the value to none. 3:39 So now when we save our style sheet and 3:43 refresh the page we can see that the bottom border is now gone. 3:45 This is really great because instead of creating a separate class for 3:49 the first list item to add these colors. 3:53 We're creating a separate class to remove the border here in the last list item. 3:56 We can do this in a more efficient way with the first and 4:01 last child pseudo classes. 4:05 Now in a later lesson, we'll learn how to target any combination of these child 4:07 elements, with more specific structural pseudo classes. 4:12