CSS selector for empty or whitespace

Question

We have a selector :empty that can match an element when it is completely empty:

<p></p> 

But I have a condition where it might be empty, or it might contain line breaks or blank spaces:

<p>    </p> 

I found a solution for Firefox, :-moz-only-whitespace:

:empty { width: 300px; height: 15px; background: blue; }  :-moz-only-whitespace { width: 300px; height: 15px; background: orange; }

<p></p>  <p>    </p>  <p>This is paragraph three.</p>

Is there a similar solution for other browsers?

PS: In JSFiddle

Answer 1

Lots of people missing the point of this question, which I've addressed in the following exposition, but for those just looking for the answer, I'm mirroring the last paragraph here:

Selectors 4 now redefines :empty to include elements that contain only whitespace. This was originally proposed as a separate pseudo-class :blank but was recently retconned into :empty after it was determined that it was safe to do so without too many sites depending on the original behavior. Browsers will need to update their implementations of :empty in order to conform to Selectors 4. If you need to support older browsers, you will have to go through the hassle of marking elements containing only whitespace or pruning the whitespace before or after the fact.

---

While the question depicts a <p> element containing a handful of regular space characters, which seems like an oversight, it is far more common to see markup where elements contain only whitespace in the form of indentation and blank lines, such as:

<ul class="items">   <li class="item">     <div>       <!-- Some complex structure of elements -->     </div>   </li>   <li class="item">   </li> <!-- Empty, except for a single line break and              indentation preceding the end tag --> </ul> 

Some elements, like <li> in the above example as well as <p>, have optional end tags, which can cause unintended side effects in DOM processing as well in the presence of inter-element whitespace. For example, the following two <ul> elements don't produce equivalent node trees, in particular the first one does not result in a li:empty in Selectors level 3:

li:empty::before { content: '(empty)'; font-style: italic; color: #999; }

<ul>    <li>  </ul>  <ul>    <li></li>  </ul>

Given that HTML considers inter-element whitespace to be transparent by design, it's not unreasonable to want to target such elements with CSS without having to resort to modifying the HTML or the application generating it (especially if you end up having to implement and test a special case just to do so). To that end, Selectors 4 now redefines :empty to include elements that contain only whitespace. This was originally proposed as a separate pseudo-class :blank but was recently retconned into :empty after it was determined that it was safe to do so without too many sites depending on the original behavior. Browsers will need to update their implementations of :empty in order to conform to Selectors 4. If you need to support older browsers, you will have to go through the hassle of marking elements containing only whitespace or pruning the whitespace before or after the fact.