CSS - select element without text inside

Question

Is there any way to select some element that have no text inside?

What it mean:

Lets say we've got such elements

<div class="to-select"></div> <-- this is empty
<div class="to-select"><span></span></div> <-- this is not empty, but dont have text

Both of them dont have text, however only one of them is empty and can be selected with :empty. I want both of them to be selected as they dont have text.

Also, some elements might have only white-space text that came from tabbed html markup etc.

I know it's quite easy to do with js. But I'm looking for css solution if it's possible. I dont like to use js for this kind of problems.

Answer 1

You may try this in your CSS:

.to-select:empty {
    <<your attributes>>   
}

.to-select *:empty {
    <<your attributes>>    
}