Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

CSS Selectors

Well done!

You have completed CSS Selectors!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

:only-child and :empty

4:58 with Guil Hernandez

Besides being able to target first and last child elements with pseudo-classes, the browser can also target only child elements and empty elements.

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 0:42
#52bab3 and we're gonna follow that with 0:46
a font-size property, where we'll set the value to 1.5em. 0:52
So let's save our style 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 pseudo 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