CSS - Element ohne Text auswählen

Question

Gibt es eine Möglichkeit, ein Element auszuwählen, das keinen Text enthält?

Was es bedeutet:

Können sagen wir solche Elemente

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

Beide nicht Text haben haben, von denen aber nur eine ist leer und kann mit :empty ausgewählt werden. Ich möchte, dass beide ausgewählt werden, da sie keinen Text haben.

Auch könnten einige Elemente haben nur white-space Text, der von Tabbed kam HTML-Markup usw.

Ich weiß es ganz einfach ist, mit js zu tun. Aber ich suche nach CSS-Lösung, wenn es möglich ist. Ich mag js nicht für diese Art von Problemen.

Answer 1

Tatsächlich gibt für Elemente ohne Textknoten Kinder (oder Nachkommen) kein Selektor ist.

In Selectors Level 4 kann es möglich sein mit

.to-select:not(:has(:not(:empty))) 

oder to account for inter-element whitespace,

.to-select:not(:has(:not(:blank))) 

aber da :has() möglicherweise nicht vollständig in dem schnellen Profil zur Verfügung steht, können Sie nicht in der Lage sein, Verwenden Sie es in CSS auch einmal Selektoren Ebene 4 ist implementiert.

Mit JS ist Ihre beste Wette, leider. Der obige Selektor mit funktioniert heute in jQuery, aber selbst wenn :has() nativ implementiert ist, könnten Sie ihn für diesen speziellen Anwendungsfall nur in document.querySelectorAll() verwenden.

Answer 2

die Sie interessieren,

$(".to-select").filter(function(){ 
    return ($(this).text().trim() == "") 
}) 

Answer 3

Sie können in Ihrem CSS versuchen Sie dies:

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

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