W3C home > Mailing lists > Public > www-style@w3.org > November 2014

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

From: Jonathan Rimmer <jon.rimmer@gmail.com>
Date: Tue, 25 Nov 2014 15:19:21 +0000
Message-ID: <54749DF9.8080009@gmail.com>
To: Dan Beam <dbeam@chromium.org>, "www-style@w3.org" <www-style@w3.org>

> 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

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:26 UTC