9

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!

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
Dima Zagorodny
  • 91
  • 3
  • 4
    I don't think it's possible with CSS alone. But I voted up because I would love to see a CSS only solution. I can think of a very easy javascript, but that's not what you're asking for obviously. – ntgCleaner Sep 18 '14 at 18:29
  • I am 99,9% sure it's impossible to do it with only CSS. – Sergey6116 Sep 18 '14 at 18:35
  • 1
    It's currently impossible, I'm afraid; you'll need to either change the server's output/response or use JavaScript. – David Thomas Sep 18 '14 at 18:36
  • Do the divs you want to hide always contain ` `? – idmean Sep 18 '14 at 18:37
  • @wumm: "*the text is NOT dynamic and is static, it changes only once as the text is loaded from database.*" – David Thomas Sep 18 '14 at 18:38
  • as already commented, at first glance, it seems impossible. could we have a look at the "entire project" meaning the related css code you have. You never know sometimes you can find work arounds... – web-tiki Sep 18 '14 at 18:45
  • Isn't there something that doesn't check the content itself but the size of it? For example the length of the text? Not selecting a specific character or text? Something like changing the colour of comment depending on its length. The longer will be red, shorter would be green, just as an example. It also would help me. Thanks! – Dima Zagorodny Sep 19 '14 at 08:00

1 Answers1

2

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.

LcSalazar
  • 16,524
  • 3
  • 37
  • 69
  • There has been a proposal for a content selector, but it was dropped from the spec. See the 3rd answer: http://stackoverflow.com/questions/1520429/css-3-content-selector – idmean Sep 18 '14 at 18:52
  • Any size of "content" selector? Not checking the content itself, but just for how big it is, the length of it. Like using short comments and colour them green, and long comments making the red, regardless their content. It would also answer my question, thanks! – Dima Zagorodny Sep 19 '14 at 08:02