CODEWITHSUNDEEP
htmlcss
tearerrry
tearerrry

Reputation: 15

trying to hide specific text by css

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.

Upvotes: 0

Views: 166

Answers (4)

A Haworth
A Haworth

Reputation: 36656

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>

Upvotes: 0

Vishesh Goyal
Vishesh Goyal

Reputation: 59

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 class="non-visible-text" style="user-select: auto;">Showing posts from </span>

In css you can do

.non-visible-text{
display:none
}

Upvotes: 0

Muzammal Rasool
Muzammal Rasool

Reputation: 11

This should work

    <h1 class="page-header-title" 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>

Upvotes: 0

Martin
Martin

Reputation: 667

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

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

.span-hide {
display: none;
}

Upvotes: 1

Related Questions