CODEWITHSUNDEEP
csscss-selectors
Ian Vink
Ian Vink

Reputation: 68780

CSS Selector to Hide Text Node But Not Other Child Elements

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>

Upvotes: 2

Views: 397

Answers (4)

confusius
confusius

Reputation: 591

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.

Upvotes: 0

Steven Moseley
Steven Moseley

Reputation: 16345

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>

Upvotes: 2

Dryden Long
Dryden Long

Reputation: 10180

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>

Upvotes: 0

mehulmpt
mehulmpt

Reputation: 16587

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>

Upvotes: 4

Related Questions