add css content text in 'empty' divs

Question

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.

Firework

Answer 1

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)

Realty

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 :) – Firework

That is confusing. Updated the answer to warn about the order. – Realty