:only-child and :empty

Besides being able to target first ,and last, child elements, with the first and 0:00 last child pseudo classes, we used in the previous lesson, the browser can 0:04 also target, only child elements, and empty elements, that have no content. 0:08 So let's explore some of the other structural pseudo classes,so first up, 0:13 with the only child, pseudo class ,we can target an element, 0:18 if it's the only child of a parent. 0:21 So let's go back to our work space, and in our style that's css file, 0:24 right below the last-child selector, let's write, 0:31 an only child selector, by typing colon followed by only-child. 0:36 Then we're gonna write a color property, and set the value to pound 0:42 #52bab3 and we're gonna follow that with 0:46 a font size property, where we'll set the value to 1.5 m. 0:52 So let's save our stop sheet, and go back to the browser, and once we 0:58 refresh the page, notice how that selector targets the entire unordered list, 1:03 because as we can see here in our index.html file, 1:08 the UL element is the only child of the body element. 1:12 But if you go back and add another element to the body,so for example, 1:18 right above the UL let's add an h1 element that reads, my list of items. 1:23 When we save our HTML file, and refresh the browser, 1:33 notice how the only-child selector no longer targets the unordered list, 1:36 because now it's no longer the only-child of the body element. 1:41 The h1 is now a sibling of the UL, 1:45 but now if there's ever another element on the page that does not have any siblings, 1:49 it will take on the styles and this only-child rule. 1:54 So for instance, let's go back,to our unordered list, and 1:58 let's add a span element to a second list item. 2:02 So right after the Item 2 text let's nest a span element, and this span element, 2:06 will contain an HTML character entity that will display a check mark. 2:12 So let's type ampersand, followed by the word check, and a semicolon, and let's go 2:16 ahead and copy the span element, and let's nest it inside another list item. 2:21 Let's say, Item 6, so let's go ahead and 2:25 copy and paste it in that, and now let's save our HTML file. 2:28 And back in the browser, when we refresh the page, we can see how the browser 2:32 targets the only-child span elements, we had just added inside those list items. 2:38 Because, as we can see here, they have no sibling elements, 2:43 they're the only-child inside their parent list item. 2:47 Now, to make our only child pseudo classes more specific, we can include 2:51 the element type we wanna target, so for example,to target just the span elements, 2:55 that are an only child, we can add the span type selector to our pseudo class. 3:01 And as we can see, this works exactly the same way. 3:07 Now, it's just a lot more specific, so, next if we need to target elements, 3:10 that have no child elements, or content what so ever, we can use 3:14 the empty structural pseudo class, to do just that, target an empty element. 3:18 So back in our style.css file, 3:23 let's create a new rule at the bottom of our file, and this time, 3:26 we're gonna use the empty pseudo class by writing colon followed by the word empty. 3:31 And then let's go ahead and 3:39 add a background color property, and set the value to our favorite color, tomato. 3:40 And let's save our style sheet, and 3:47 in our HTML file, as we can see there are currently no empty elements here, 3:49 they all have child elements, and content inside. 3:54 So let's go ahead and remove, the content from one of our list items. 3:57 So let's say Item 7, so I'm gonna select, and delete, the text 4:01 inside of that list item, and once we save our file and refresh the page, 4:06 notice how the only element that turns tomato red, is that empty list item. 4:11 And again, we can make the selector more specific by saying that we 4:16 only want to target, empty list item elements, so, 4:21 right before the empty pseudo class, we're going to add the LI selector. 4:24 So a good use case, for this empty pesudo class ,may be for a result field or 4:32 a box or element returns empty, with no content, and then we can for 4:37 example use it to warn, the user that no results were found, or returned. 4:41 Now I've also used the empty pseudo class, when auditing or 4:45 reviewing HTML code for the first time. 4:49 It's really handy for 4:51 making sure there are no empty, or unnecessary HTML tabs in your markup. 4:52