Re: [selectors] Is ::pseudo-element:empty valid?

> Hi,
>
> I'd like to match empty ::pseudo-elements, e.g.:
>
>   ::before:empty {
>     content: 'placeholder text while something asynchronously loads...';
>   }
>
> But ::before:empty doesn't seem to work for me.
I use this idiom in the app I'm working on, and it works well. Your 
problem is that you're trying to select on the empty status of the 
pseudo-element, when you really care about the empty status of the 
element itself, because that's where your async content will end up. The 
pseudo is just for displaying the async message.

The answer is to swap the order of the selectors, e.g.

div:empty::before {
   content: 'NO DATA'
}

Thanks,
Jon

Received on Tuesday, 25 November 2014 15:19:50 UTC