- :first-child and :last-child 4:15
- :first-child and :last-child Challenge 2 objectives
- :only-child and :empty 4:58
- Substring Matching Attribute Selectors - "Begins With" and "Ends With" 8:19
- Substring Matching Attribute Selectors - "Contains" 6:44
- Substring Matching Attribute Selectors Challenge 3 objectives
- Element States Pseudo-Classes 6:20
- Structural and Element States Pseudo-Classes Review 5 questions
Preview
Video Player
00:00
00:00
:only-child and :empty
4:58Besides 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