:empty doesn't work if there's blank spaces?

Question

Trying to find a pseudo class that'll target a <div> like this:

<div class="nav-previous">
                            </div>

I've tried :blank and :empty but neither can detect it. Is it just not possible to do?

https://jsfiddle.net/q3o1y74k/3/

Answer 1

As the others mentioned, this isn't possible with CSS yet. You can check to see if there's only whitespace with JavaScript however. Here's a simple JS only solution, "empty" divs that match are blue, while divs that have text are red. Updated to add an empty class to the empty divs, which would allow you to target them easily with the selector .empty in your CSS.

The JS only "empty" comparison would look like this:

if(element.innerHTML.replace(/^\s*/, "").replace(/\s*$/, "") == "")

And if you're using jQuery it would be a bit easier:

if( $.trim( $(element).text() ) == "" ){

var navs = document.querySelectorAll(".nav-previous");
for( i=0; i < navs.length; i++ ){
  if(navs[i].innerHTML.replace(/^\s*/, "").replace(/\s*$/, "") == "") {
    navs[i].style.background = 'blue';
    navs[i].classList.add( 'empty' );
  } else {
    navs[i].style.background = 'red';
  }
}

.nav-previous {
 padding: 10px;
 border: 1px solid #000;
}

.nav-previous.empty {
  border: 5px solid green;
}

<div class="nav-previous">
                            </div>
<div class="nav-previous">Not Empty </div>