CSS How to target element without a tag

Question

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.

You could use jQuery to add a span tag around it and then style that. — Sumner Evans, Feb 08 '15 at 22:24

score 9 · Accepted Answer · answered Feb 08 '15 at 22:25

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

yeah, it works with visibility only but not work with display property. +1. — Bhojendra Rauniyar, Feb 08 '15 at 22:27

CSS How to target element without a tag

1 Answers1