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.
- There is not data.
- 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
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!
Top comments (9)
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
scripttags, etc.In that case, you can make sure to put them above your placeholder element and use
:last-childinstead 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 anul, it may not work as well for all other cases.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.
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 :)
This is a great demonstration of ways to simplify logic using presentation!
I think you can eliminate the more complex
:not()selector, though...You can also use
display: revertto retain the element's original style.Thanks for sharing this!
I know that the :not isn’t truly necessary, but I generally prefer self-documenting code and it’s more explicit with it.
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.
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.
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
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.