CSS' only-child instead of Conditional Logic
#webdev#css#development#frontend
bob.ts

bob.ts @rfornal

About: REAL, FUN, GEEK who is passionate about Front-End!

Location:
Columbus, OH, USA
Joined:
Dec 20, 2018

CSS' only-child instead of Conditional Logic

Publish Date: Oct 25 '24
14 9

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!

Comments 9 total

  • Samuel Rouse
    Samuel RouseOct 25, 2024

    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!

    • bob.ts
      bob.tsOct 25, 2024

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

  • Himanshu Sorathiya
    Himanshu Sorathiya Oct 25, 2024

    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
      bob.tsOct 25, 2024

      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.

  • 𒎏Wii 🏳️‍⚧️
    𒎏Wii 🏳️‍⚧️Oct 28, 2024

    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
      bob.tsOct 30, 2024

      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 🏳️‍⚧️
        𒎏Wii 🏳️‍⚧️Nov 2, 2024

        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 :)

  • Ben Sinclair
    Ben SinclairOct 30, 2024

    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
      bob.tsOct 30, 2024

      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.

Add comment