Applying CSS only to parent without touching the child - html

Question

How can I hide/remove the "Category:" text here without touching what is inside <span> </span>?
<h1 class="f_p f_700 f_size_50 w_color l_height50 mb_20">
Category:
<span>Men</span>
</h1>
Thanks in advance.

Answer 1

Edit: I missed the important detail below. As another answer might have noticed, trying something like display: none and display: initial isn't going to work.
How can I hide/remove the "Category:" text
The initial CSS keyword can be applied to children to reset styles. As the doc mentions, sometimes initial has unexpected results, check out its peers inherit, unset, and revert. To give an example using text color:
h1 {
color: red;
visibility: hidden;
}
h1 > span {
color: initial;
visibility: initial;
}
<h1 class="f_p f_700 f_size_50 w_color l_height50 mb_20">
Category:
<span>Men</span>
</h1>

Answer 2

You could change visibility to hidden or font-size to zero on parent and reset it on the child. Without attaching any styles to the child, it's not possible with css.

Answer 3

If it's possible to use JS, try this:
$("h1").contents().filter(function(){
return (this.nodeType == 3);
}).remove();
<h1>Category:<span>Men</span></h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Or, with CSS only:
h1 {
font-size: 0px;
visibility: hidden;
}
h1 span {
font-size: 36px;
visibility: initial;
}
<h1>Category:<span>Men</span></h1>