CSS' only-child instead of Conditional Logic

In many of the frontend frameworks that I work with, there are options for ternaries or if-branches injected into the HTML logic. This is logic I use a lot. One particular case is to show when there is no data.

I just stumbled on a CSS pattern that makes my life much easier: the :only-child pseudo-class.

React

In React, I would do "something" like this ...

{
  data.length === 0
    ? <div>Nothing to show.</div>
    : <TableWithRecords />
}

Angular

In Angular, I would do "something" like this ...

@if (data.length === 0) {
   <div>Nothing to show.</div>
} @else {
   <TableWithRecords />
}

Using CSS

To put it simply, I have two cases.

1. There is not data.
2. There is data.

<h2>No Data Showing</h2>
<ul>
  <li class="handle-no-data">Nothing to show.</li>
  <!-- <li>Data here</li> -->
</ul>

<h2>Data Showing</h2>
<ul>
  <li class="handle-no-data">Nothing to show.</li>
  <li>Data here</li>
</ul>

Using a simple CSS class .single ...

.handle-no-data:not(:only-child) {
  display: none;
}
.handle-no-data:only-child {
  display: flex;
}

This CSS could be simplified to ...

.handle-no-data {
  &:not(:only-child) {
    display: none;
  }
  &:only-child {
    display: flex;
  }
}

Here's the result of the code above ...

MDN Documentation

:only-child

Can I Use

Summary

As you can see, I would have to move the handling of the data to the table level, but the CSS is pretty straight forward to handle a "no data" scenario.

This is exciting!

Comments

[𒎏Wii 🏳️‍⚧️]

You can even use something like ul:not(:has(:first-child))::after { content: 'Nothing to show.' } and skip the placeholder element entirely.

In either case, one problem that can happen is having invisible elements inside the list, like script tags, etc.

In that case, you can make sure to put them above your placeholder element and use :last-child instead to only check for content below your placeholder.

Another way around this is to use :only-of-type(li) to only consider <li> elements, but while that works well for the example of an ul, it may not work as well for all other cases.

[bob.ts]

Interesting thought on not using the placeholder.

I'm not sure why my list would contain non-visible tags; this feels like an odd edge case. I'd love to see some practical examples.

[𒎏Wii 🏳️‍⚧️]

Scoped style sheets or template elements come to mind, maybe also script blocks, etc.

It's probably not very likely in your example specifically, but the concept itself is very generic so I can see cases where the same effect is desired in more complex scenarios where it might be a possibility :)

[Samuel Rouse]

This is a great demonstration of ways to simplify logic using presentation!

I think you can eliminate the more complex :not() selector, though...

.handle-no-data {
  display: none;
}

.handle-no-data:only-child {
  display: flex;
}

You can also use display: revert to retain the element's original style.

Thanks for sharing this!

[bob.ts]

I know that the :not isn’t truly necessary, but I generally prefer self-documenting code and it’s more explicit with it.

[Ben Sinclair]

I like this a lot, but I don't think I'd use it in the example you give. "Nothing to show here" isn't semantically a list item, so I'd still change the HTML instead.

Off the top of my head I can't think of a great use case but I know that's just me being pre-coffee, and it's a really good feature.

[bob.ts]

I don't know if there's a good way to do this and stay PURE to semantic HTML.

I can see myself using this on a table and having a row (tr) with a cell (td) that spans all the columns that says something like "No data." Is it semantically correct? No. But it's much easier to manage than having JavaScript conditionals implemented somewhere.

[Wizard]

Very interesting, great use case, but also needed more explanation of only child pusedo class, although it's name also suggest it workdone, but still...

Also I think you don't need that :Not cause even if there are multiple exists it'll be hidden, and when it's only one, it'll be shown

[bob.ts]

I’ll add a link to the MDN documentation.

I like to include the :not to be explicit. I know that it operates in the cascading pattern without it. I’d rather there not be any obscurity in my code.