CSS – seleccionar elemento sin texto dentro

¿Hay alguna forma de seleccionar algún elemento que no tenga texto dentro?

Qué significa:

Digamos que tenemos tales elementos

<-- this is empty
<-- this is not empty, but dont have text

Ambos no tienen texto, sin embargo, solo uno de ellos está vacío y se puede seleccionar con :empty . Quiero que se seleccionen ambos ya que no tienen texto.

Además, es posible que algunos elementos tengan solo un espacio en blanco que provenga del marcado html tabulado, etc.

Sé que es bastante fácil de hacer con js. Pero estoy buscando solución css si es posible. No me gusta usar js para este tipo de problemas.

De hecho, no hay un selector para elementos sin nodos de texto (o descendientes).

En los selectores de nivel 4 puede ser posible con

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

o, para tener en cuenta el espacio en blanco entre elementos ,

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

pero dado que :has() puede no estar completamente disponible en el perfil rápido, es posible que no pueda usarlo en CSS incluso una vez que se haya implementado el nivel 4 de Selectores.

Usar JS es tu mejor apuesta, desafortunadamente. El selector anterior con :empty funcionará en jQuery hoy, pero incluso una vez :has() se implementa de forma nativa, para este caso de uso específico, solo podrá usarlo en document.querySelectorAll() en el mejor de los casos.

Puedes probar esto en tu CSS:

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

Prueba esto,

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