trying to hide specific text by css

Issue

I am currently trying to hide a specific text on my site. The code looks like this:

<h1 class="page-header-title" style="user-select: auto;"> == $0
   <span style="user-select: auto;">Showing posts from </span>
   "[Category:]"
   <span style="user-select: auto;">action</span>

I only want to hide the text "Showing posts from", but when I use this on css:

h1.page-header-title {
     display: none;
}

It will hide all the texts included the one in h1 code.

Solution

You don't need to add anything to the HTML for this.

You can select the first span element that is a direct child of the h1.

h1.page-header-title > span:first-child

This says 'find all the h1 elements with page-heade-title class. Then look at all its direct child elements and select the first span you come across'.

h1.page-header-title>span:first-child {
  display: none;
}

<h1 class="page-header-title" style="user-select: auto;"> == $0
  <span style="user-select: auto;">Showing posts from </span> "[Category:]"
  <span style="user-select: auto;">action</span>
</h1>

Answered By - A Haworth