CSS Selector to Hide Text Node But Not Other Child Elements

Question

With CSS, how would I select the text This Text . I wish to remove/hide it.

I can't alter the HTML itself, only change the CSS.

<h2 class="hello">
      This Text
     <span class="mark">05/03/2017 3:29 PM EDT</span>
 </h2>

Answer 1

If you just intend to hide the text, do something like this

.hello {
  font-size: 0;
}

.mark {
  font-size: 30px;
}

<h2 class="hello">
      This Text
     <span class="mark">05/03/2017 3:29 PM EDT</span>
 </h2>

Answer 2

Here's another idea, using visibility, which won't override any font-size styling applied elsewhere.

The slight potential downside of this method is that it changes .hello to relative positioning, which may override some layout you've applied to it.

I think this is less likely than overriding font-size, though.

.hello {
    visibility: hidden;
    position: relative;
}

.hello .mark {
    visibility: visible;
    position: absolute;
    left: 0;
}

<h2 class="hello">
    This Text
    <span class="mark">05/03/2017 3:29 PM EDT</span>
</h2>

Answer 3

The only way I can think of would be to override the span inside after hiding the outer div. Something like this:

.hello .mark {
  visibility: visible;
}

.hello {
  visibility: hidden;
}

<h2 class="hello">
  This Text
  <span class="mark">05/03/2017 3:29 PM EDT</span>
</h2>

Answer 4

Both font-size: 0 or visibility: hidden can be used to "hide" the parent.

Combining those methods will have great benefits:

• visibility: hidden hides the text in a manner that it won't be copied to the clipboard when selected.
• font-size: 0 will take care of the space that would remain after manipulating the visibility. This could also be fixed by making the parent positioned relatively and the child absolutely + top: 0. However, messing with the positioning will probably cause problems - sooner or later.
• It can't be a bad idea to define the font size anyway.

.hello {
  visibility: hidden;
  font-size: 0;
}
.mark {
  visibility: visible;
  font-size: 1.5rem;
}

<h2 class="hello">
  This Text
  <span class="mark">05/03/2017 3:29 PM EDT</span>
</h2>

---

This combines Steven Moseley's and Mehul Mohan's answer.