Posted over 2 years ago. Visible to the public. Repeats.

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:

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

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

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

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

Growing Rails Applications in Practice
Check out our new e-book:
Learn to structure large Ruby on Rails codebases with the tools you already know and love.

Author of this card:

Dominik Schöler
Last edit:
3 months 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 makandropedia