How to select a span with a text inside a div using CSS?

Question

The structure is like this(taken from browser), it is dynamically generated in share point Mysite. I do not have control over HTML. I need to hide the whole tr using css. The catch is that there are numerous similar tr structure in the page but with different text in span.Please suggest a way to hide only the tr with text Social Notification Properties

<tr class = "ms-WPHeader">
<td colspan ="3">
<div class = "ms-WPTitle">
<span>
Text -Social Notification Properties

I have tried this so far but failed.

td[class ~="ms-WPHeader"]+tr+td+div+span[Text ~="Newsfeed"]
{
 display:none;
 }

and this

.ms-WPHeader ~ .ms-WPTitle.span[Text ~="Newsfeed"]
{
display:none;
}

using this hides all the span which is obvious

.ms-WPTitle span
{
display:none;
}

Answer 1

You can use :contains to neglect the inability of CSS to select text node.

Below there are two tables in which the second table text is visible.

$(".ms-WPHeader:contains('Text-Social Notification Properties')").css("display", "none");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="ms-WPHeader">
    <td colspan="3">
      <div class="ms-WPTitle">
        <span>Text-Social Notification Properties</span>
      </div>
    </td>
  </tr>
</table>

<table>
  <tr class="ms-WPHeader">
    <td colspan="3">
      <div class="ms-WPTitle">
        <span>I am visible though</span>
      </div>
    </td>
  </tr>
</table>