CSS How to target element without a tag

I am trying to target text that is not wrapped in any specific tag or wrapper. I am pulling information from wordpress, using wordpress calls, so I won’t be able to edit what I am pulling in.

The HTML/PHP looks like this:

<div class="content-box">
  <?= $page[0]->post_content; ?>
</div>

The HTML outputs like this:

<div class="content-box">
<h1>Title Here</h1>
Here is some text I need to target
</div>

I need to hide (and manipulate with jQuery) the text in the content-box, though I can not add any HTML around it to wrap it.

What I’d like to do is initially hide the text and fadeIn() on hover. So how do I target that text with CSS?

it feels like I need to do something like this:

.content-box > *:not(h1){
  display:none;
}

but that doesn’t do it.


solution

It’s worth pointing out that you can hide the parent element using visibility: hidden and then display the h1 element with visibility: visible. Unfortunately, you can’t do this with the display property, though.

.content-box { visibility: hidden; }
h1 { visibility: visible; }
<div class="content-box">
  <h1>Title Here</h1>
  Here is some text I need to target
</div>

If you want to wrap the text node with a span, you could use:

$('.content-box').contents().filter(function () {
  return this.nodeType === 3;
}).wrap('<span></span>');

Example Here