DEV Community

Cover image for CSS' only-child instead of Conditional Logic
bob.ts
bob.ts

Posted on • Updated on

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 />
}
Enter fullscreen mode Exit fullscreen mode

Angular

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

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

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>
Enter fullscreen mode Exit fullscreen mode

Using a simple CSS class .single ...

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

This CSS could be simplified to ...

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

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

Image description

MDN Documentation

:only-child

Can I Use




Data on support for the mdn-css__selectors__only-child feature across the major browsers from caniuse.com

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!

Top comments (8)

Collapse
 
darkwiiplayer profile image
𒎏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.

Collapse
 
rfornal profile image
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.

Collapse
 
oculus42 profile image
Samuel Rouse • Edited

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;
}
Enter fullscreen mode Exit fullscreen mode

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

Thanks for sharing this!

Collapse
 
rfornal profile image
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.

Collapse
 
moopet profile image
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.

Collapse
 
rfornal profile image
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.

Collapse
 
wizard798 profile image
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

Collapse
 
rfornal profile image
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.