19

See this fiddle: http://jsfiddle.net/xanld/3yh28/

div:before {
    content: 'This div is empty';
}
div:empty {
    background:red;
}

I'd like to add css content to empty divs only. I can either use the :empty selector, but I need to use the :before selector in order to add content. Is it possible to use both?

Thanks.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
xanld
  • 977
  • 1
  • 11
  • 22

1 Answers1

37

Yes, you can use both - see updated fiddle: http://jsfiddle.net/3yh28/1/

div:empty:before {
   content: 'This div is empty';
}

Make sure it's :empty:before (not :before:empty), because you want to apply the pseudo-element :before on the element that matches div:empty.

By the way, :empty is CSS3 and not supported on old browsers (such as IE8, or about 40% of the browser market share)

sinelaw
  • 16,205
  • 3
  • 49
  • 80
  • Damnit. That's so simple, I thought I'd tried it. Infact what I think I'd tried was div:before:empty and not div:empty:before, and then just assumed that this syntax was invalid. Thanks :) – xanld Nov 14 '13 at 19:06
  • That **is** confusing. Updated the answer to warn about the order. – sinelaw Nov 14 '13 at 19:31