[CSS] The :empty CSS pseudo-class

April 30, 2022

:empty

The :empty CSS pseudo-class represents any element that has no children.

Usage

This pseudo-class is useful in some cases such as when there’s no data is passed to a list:

export default function App() {
  return (
    <div>
      <h1>Data</h1>
      <ul>
        {data.map((item) => (
          <li>{item}</li>
        ))}
      </ul>
    </div>
  );
}

// style.css

ul:empty::after {
  content: 'No data to show';
  color: red;
}

1. When ‘data’ list is available

2. When there’s no data

Get no result text from a prop

<ul noResultText="blablalblabl bla bal">
  ...
</ul>

// style.css

ul:empty::after {
  content: attr(noResultText);
  color: red;
}

Reference

https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

• ← Strip HTML tags from markup and memoize it with weakMap()
• [Git] Check number of changes from current branch →