When would using the empty pseudo class be useful?

HTML & CSS
1

I just watched Understanding the :empty Pseudo-Class (Screencast)

Looks cool and all that, but I can’t for the life of me think of any scenario where I would want to style an empty element.
Anyone got any possible use cases?

2

http://webdesignernotebook.com/css/a-quick-note-about-the-empty-pseudo-class/

They have an example.

That seems to be stretching to find a good use for the :empty pseudo class, but whatever. I can’t think of anything…

3

Thanks, I guess that could come in useful at times.
Maybe @Russ_Weakley can stop in and provide more?

4

Perhaps when you use a table to display a monthly calendar and have those empty cells before the 1st of the month and after the end of the month.

5

Yes, that definately would be easier than adding a “nodate” class to the cells. Especially if the calendar is dynamically generated.

6

Hi Mittineague,

An interesting question. I have never used this selector in the real world.

I don’t mind the empty “td” example mentioned by RyanReese. I’ve never had a need for this but it could be useful.

One of the dangers with this selector is that it is potentially “stable”.

If there are character spaces inside an element then it will be classified as “not empty” and the "empty pseudo-class will not be applied.

This is fine if your data is being produced by an application, but if content is being done by hand, there is the possibility of issues.

Bottom line, if you wanted to target empty “p” elements or empty “td/th” elements, there is a
danger that there may be a space inside, and therefore they are not styled.

So, why show this selector at all? It is interesting, and there may be some edge case out there where it is really useful for someone :slight_smile:

Thanks
Russ

1 Like
7

Here is a little breadcrumb for thought: what about combining :empty with :not :smile:. Might have more uses then. Note, I’m not talking about <input>'s here since they are automatically recognized as :empty, but perhaps some other uses? Can anyone come up with any when combining with :not?

8

It’s very common to end up with empty containers in a CMS—for example, when a sloppy blogger leaves a few extra returns within or at the end of a blog post, resulting in a gap caused by empty <p></p> tags; or when you have a container in your HTML that may or may not be populated with content via PHP etc.

This comes up all the time in forums, including recently. E.g. What's the benefits between the two methods of displaying a ACF field

As long as the element has no whitespace (which can be arranged in some situations), the :empty pseudo class could be used to hide the useless element.

JS is another option for this, and can also handle the situations where there is whitespace, returns etc. between the tags.

9

Dudley Storey has a couple of interesting uses for the :empty selector.

I’d actually be hard pressed to find any other real-life uses though. The empty table-cells seem to be the prime candidate for its use.

10

Paul’s link shows an example of that. E.g.

td:not(:empty) { /* styles for filled cells */ }