Read more

CSS has a well-supported :empty selector

Dominik Schöler
September 09, 2015Software engineer at makandra GmbH

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

Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more Show archive.org snapshot

(How to prevent whitespace in HAML) Show archive.org snapshot

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 Show archive.org snapshot .

Posted by Dominik Schöler to makandra dev (2015-09-09 09:38)