Hide specific text from html using css-CodePudding

In the below code, I need to hide the 2nd tag and it's related content, how can I do that in Css

<div id="content-list">
  <b>Title:</b> some random text <br/>
  <b>Title2:</b> some random text 2 <br/>
</div>

With the below css I can only hide the 2nd b tag, but not able to hide the text.

div > b:nth-child(1) {
    display: none;
}

Note: HTML mockup can't be modified due to various reason.

CodePudding user response：

There is no way to reference a text node in CSS. However there are probably some hacky ways to accomplish this.

One way you could do this, if the layout supports it, would be to hide the title and anything adjacent to it using a large, negative number for margin-left.

.content-list > b:nth-of-type(2) {
  margin-left: -1000000px;
}

<div >
  <b>Title:</b> some random text <br />
  <b>Title 2:</b> some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text  <br />
  <b>Title 3:</b> some random text <br />
</div>

As you can see if you run the snippet, there are some issues. Mainly there will just be a blank like in the place where the text was. Plus any one using a text reader will still have access to it.

The only real solution will be either to fix your html or use JavaScript.

CodePudding user response：

"I can only hide the 2nd b tag, but not able to hide the text" That's because the text "some random text 2" is outside of the tags.

CodePudding user response：

Since you can't actually select text nodes directly, one work-around would be to set the font-size of the parent element to 0. Then reset the font-size for those desired b elements. In doing so, only the b elements should appear, and the adjacent text nodes should effectively be hidden.

div {
font-size: 0px
}

div > b:nth-child(1) {
    font-size: 16px
}

<div>
  <b>Title:</b> some random text <br/>
</div>

CodePudding user response：

An alternative solution is to change the original HTML to something more like this, which is highly recommended in terms of accessibility:

#content-list div:nth-child(2) {
    display: none;
}

<div id="content-list">
  <div>
    <h2>Title 1</h2>
    <span>some random text</span>
  </div>
  
  <div>
    <h2>Title 2</h2>
    <span>some random text</span>
  </div>
  
  <div>
    <h2>Title 3</h2>
    <span>some random text</span>
  </div>
</div>