How to hide div when its contents has 1 character using CSS only? [duplicate]

Question

I'm interested on showing a block of text when it's not a "&nbsp ;" (empty space), otherwise to hide it. I want to use CSS only. The code is:

<div>Some text here</div>
<div>&nbsp;</div>
<div>Another text here</div>

Removing the "&nbsp ;" is not a variant. (If you wanted to suggest me using :empty)

Please make attention that the div is global and may randomly placed as well, that's why I'm looking for answer that hides the div that only has 1 character. (or any other variants of it).

Just to make it clear, I can't change the html, it's loading the data from a database, therefore I need to use a CSS file to hide the div content/tag. If it helps somehow, then the text is NOT dynamic and is static, it changes only once as the text is loaded from database.

Thanks in advance!

Answer 1

That's not possible using only CSS. The CSS selectors matches HTML elements based on specific element's attributes (id, class, etc), or node structure conditions (such as child index position), but there's no selector based on content.

You can style specific parts of the element's text content (first-letter, etc), but never using a content to target it's parent.

The W3 Docs about CSS SELECTORS specifies the following as the possible element's rule selectors:

• Universal selector
• Type selectors
• Descendant selectors
• Child selectors
• Adjacent sibling selectors
• Attribute selectors
• ID selectors
• Pseudo-elements and pseudo-classes
• Pseudo-classes
• Pseudo-elements

Sorry, but there's no "content" selector yet!

As commented bellow by wumm, there's been some proposal's but none was implemented.
JQuery has implemented some "pseudo"s that come close to that, like :has or :contains, but even those would not fit your needs.