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 web development

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

  • We build reliable cloud solutions with Infrastructure as code
  • We are experts in security, Linux and databases
  • We support your dev team to perform
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)