trying to hide specific text by css-CodePudding

hi I am currently trying to hide a specific text on my site

the code is look like this

<h1  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;
}

this code will hide all the texts included in that h1 code

If anyone help me that will be really nice thanks

CodePudding user response：

You need to create a class inside span tag and then use the class to specify that it needs to be hidden.

<span  style="user-select: auto;">Showing posts from </span>

.span-hide {
display: none;
}

CodePudding user response：

This should work

    <h1  style="user-select: auto;"> 
    <span class='hidden-text' style="user-select: auto;">Showing posts from </span>
    "[Category:]"
    <span style="user-select: auto;">action</span></h1>

    <style>
        .hidden-text{
            display: none;
        }
    </style>

CodePudding user response：

What you are doing wrong is telling the web to hide everything which has class page-header-title which will hide everything which has this class. If you want to hide that particular span field you have to give that span its different identification. Such as a class or an id.

<span  style="user-select: auto;">Showing posts from </span>

In css you can do

.non-visible-text{
display:none
}