Hide "non-element" using css

Question

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.

giorgio · Accepted Answer · 2016-09-19 12:33:19Z

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

answered Sep 19, 2016 at 12:33

giorgio

10.2k2 gold badges30 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

drhirn Over a year ago

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.

giorgio Over a year ago

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...

drhirn Over a year ago

I'll file a bug at phabricator.wikimedia.org ;). Actually thought about javascript too. Suboptimal, as you say, but may be worth a try.

Community · Accepted Answer · 2017-05-23 12:16:21Z

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.

2 Comments

drhirn Over a year ago

Still the browser reserves space for the text. That's what I'm trying to prevent.

Aᴄʜᴇʀᴏɴғᴀɪʟ Over a year ago

@drhirn in that case you'll need to set it's display to none. You'll have to put it into a separate <span> tag to accomodate for that. Look at @giorgio's answer if that's the functionality you need.

Collectives™ on Stack Overflow

Hide "non-element" using css

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related