0

Following code:

<li>
    <a href="...">bla</a>
    <span>blabla</span>
    hidethistext
</li>

How could I hide the "non-element" "hidethistext" with display:none using CSS without affecting everything else? Meaning, what would be the right selector? Tried using :not(..) but that seemed not the right approach.

drhirn
  • 65
  • 8

2 Answers2

1

You can't. With css you can only select elements. The :not selector is used to select an element that is not of class x, does not have id y or is not element z. But hidethistext is just a textnode, which cannot be selected. The only solution is to wrap it in a <span/> element with another class then the first span

giorgio
  • 10,111
  • 2
  • 28
  • 41
  • Seems you're right. Unfortunately, I'm not the one who produces the code, this is done by an application. I'm just here to make it look good ;). So I can't wrap it into a `span`. – drhirn Sep 19 '16 at 13:24
  • Or call the guy and ask him if he wants to wrap it in a span :p You can also use javascript to do it dynamically. Although that's a suboptimal solution... – giorgio Sep 19 '16 at 13:26
  • I'll file a bug at phabricator.wikimedia.org ;). Actually thought about javascript too. Suboptimal, as you say, but may be worth a try. – drhirn Sep 20 '16 at 13:26
1

You can use the visibility property since it can be overridden.

<li>
    <a href="...">bla</a>
    <span>blabla</span>
    hidethistext
</li>

CSS

/* hide all elements (including textnode "hidethistext" */
li {
  visibility: hidden;
}

/* set other elements to visible */
li span, li a {
  visibility: visible;
}

Example here on this jsfiddle.

Related SO question.

Community
  • 1
  • 1
Aᴄʜᴇʀᴏɴғᴀɪʟ
  • 2,957
  • 4
  • 24
  • 50
  • Still the browser reserves space for the text. That's what I'm trying to prevent. – drhirn Sep 19 '16 at 12:45
  • @drhirn in that case you'll need to set it's `display` to `none`. You'll have to put it into a separate `` tag to accomodate for that. Look at @giorgio's answer if that's the functionality you need. – Aᴄʜᴇʀᴏɴғᴀɪʟ Sep 19 '16 at 13:14