How To Select A Span With A Text Inside A Div Using Css?

May 27, 2023 Post a Comment

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

Solution 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>

Solution 2:

You can't select elements with a specific text inside via CSS. What you can do though is to via jQuery look for that element and then add a class to it, so that you then can select it via CSS.

$("span:contains('Social Notification Properties')").addClass('hide');

And then in CSS

.hide{
    display:none;
}

Solution 3:

this is what i still suggest that you can use like this

$('table').addClass("hide_this_tr");

.hide_this_tr tr{
    display : none;
}

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

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

As what i understand about what you want to achieve this is what my try is.

Baca Juga

Solution 4:

There's a specification for :contains('') pseudo-class, but I'm not able to make it work on any browser.

http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#content-selectors

But jQuery make this selector work as Gustaf said :

$("span:contains('Social Notification Properties')");

It's the only way to achieve this at the moment.

Solution 5:

Without using jQuery, plain JavaScript using XPath (as mentioned in comments):

var snapshot = document.evaluate(
  "//tr[contains(concat(' ', normalize-space(@class), ' '), ' ms-WPHeader ')][contains(.//span, 'saurus')]",
  document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null
);
for (var i = 0; i < snapshot.snapshotLength; i++) {
  snapshot.snapshotItem(i).classList.add("highlight");
}

.highlight {
  color: red;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <table>
    <tr class = "ms-WPHeader">
      <td colspan ="3">
        <div class = "ms-WPTitle">
          <span>
            Irrelevant text
          </span>
        </div>
      </td>
    </tr>
    <tr class = "ms-WPHeader">
      <td colspan ="3">
        <div class = "ms-WPTitle">
          <span>
            A wild stegosaurus appears!
          </span>
        </div>
      </td>
    </tr>
    <tr class = "ms-WPHeader">
      <td colspan ="3">
        <div class = "ms-WPTitle">
          <span>
            More irrelevant text
          </span>
        </div>
      </td>
    </tr>
    <tr class = "wrongClass">
      <td colspan ="3">
        <div class = "wrongClassTitle">
          <span>
            Brontosaurus in a wrong TR
          </span>
        </div>
      </td>
    </tr>
  </table>
</body>
</html>

The XPath for "having a class", simple in CSS, is a bit of a pain in XPath; but it can be simplified quite a bit if you know the exact class attribute (i.e. "there will be no other classes but ms-WPHeader there"):

"//tr[@class='ms-WPHeader'][contains(.//span, 'saurus')]"

Html5 Development