Besides being able to target first ,and last, child elements, with the first and

last child pseudo classes, we used in the previous lesson, the browser can

also target, only child elements, and empty elements, that have no content.

So let's explore some of the other structural pseudo classes,so first up,

with the only child, pseudo class ,we can target an element,

if it's the only child of a parent.

So let's go back to our work space, and in our style that's css file,

right below the last-child selector, let's write,

an only child selector, by typing colon followed by only-child.

Then we're gonna write a color property, and set the value to pound

#52bab3 and we're gonna follow that with

a font size property, where we'll set the value to 1.5 m.

So let's save our stop sheet, and go back to the browser, and once we

refresh the page, notice how that selector targets the entire unordered list,

because as we can see here in our index.html file,

the UL element is the only child of the body element.

But if you go back and add another element to the body,so for example,

right above the UL let's add an h1 element that reads, my list of items.

When we save our HTML file, and refresh the browser,

notice how the only-child selector no longer targets the unordered list,

because now it's no longer the only-child of the body element.

The h1 is now a sibling of the UL,

but now if there's ever another element on the page that does not have any siblings,

it will take on the styles and this only-child rule.

So for instance, let's go back,to our unordered list, and

let's add a span element to a second list item.

So right after the Item 2 text let's nest a span element, and this span element,

will contain an HTML character entity that will display a check mark.

So let's type ampersand, followed by the word check, and a semicolon, and let's go

ahead and copy the span element, and let's nest it inside another list item.

Let's say, Item 6, so let's go ahead and

copy and paste it in that, and now let's save our HTML file.

And back in the browser, when we refresh the page, we can see how the browser

targets the only-child span elements, we had just added inside those list items.

Because, as we can see here, they have no sibling elements,

they're the only-child inside their parent list item.

Now, to make our only child pseudo classes more specific, we can include

the element type we wanna target, so for example,to target just the span elements,

that are an only child, we can add the span type selector to our pseudo class.

And as we can see, this works exactly the same way.

Now, it's just a lot more specific, so, next if we need to target elements,

that have no child elements, or content what so ever, we can use

the empty structural pseudo class, to do just that, target an empty element.

So back in our style.css file,

let's create a new rule at the bottom of our file, and this time,

we're gonna use the empty pseudo class by writing colon followed by the word empty.

And then let's go ahead and

add a background color property, and set the value to our favorite color, tomato.

And let's save our style sheet, and

in our HTML file, as we can see there are currently no empty elements here,

they all have child elements, and content inside.

So let's go ahead and remove, the content from one of our list items.

So let's say Item 7, so I'm gonna select, and delete, the text

inside of that list item, and once we save our file and refresh the page,

notice how the only element that turns tomato red, is that empty list item.

And again, we can make the selector more specific by saying that we

only want to target, empty list item elements, so,

right before the empty pseudo class, we're going to add the LI selector.

So a good use case, for this empty pesudo class ,may be for a result field or

a box or element returns empty, with no content, and then we can for

example use it to warn, the user that no results were found, or returned.

Now I've also used the empty pseudo class, when auditing or

reviewing HTML code for the first time.

It's really handy for

making sure there are no empty, or unnecessary HTML tabs in your markup.