Posted over 5 years ago. Visible to the public. Repeats. Linked content.

CSS has a well-supported :empty selector

All browsers + IE9 know the CSS :empty selector. It lets you hide an element when it has no content, i.e. not even white space.

For instance, you have a badge displaying the number of unread messages in a red bubble with white text:

Copy
.unread-messages-bubble { background-color: red; border-radius: 10px; padding: 10px; color: white; }

To hide that bubble entirely when there are no new messages:

Copy
.unread-messages-bubble:empty { display: none; }

Note that the element must be completely empty for :empty to match.
See DevDocs.

makandra has been working exclusively with Ruby on Rails since 2007. Our laser focus on a single technology has made us a leader in this space.

Owner of this card:

Avatar
Dominik Schöler
Last edit:
over 3 years ago
by Dominik Schöler
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Dominik Schöler to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more