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

It is not possible to use lower-level elements to restrict a selector, only higher ones. You could use JavaScript with XPath to select your tr, then attach a style attribute directly to it; it can't be done in CSS. — Amadan, Jul 03 '15 at 10:04
hi @Dee i want share that if don't have your control over **making** HTML but you can add a class to the identical Tables you want to work with and just give that class the css Property then may b you achieve your goal easily — Himesh Aadeshara, Jul 03 '15 at 10:23
see what i have given sample try what i want to say with the code — Himesh Aadeshara, Jul 03 '15 at 10:31

score 4 · Accepted Answer · answered Jul 03 '15 at 10:08

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>

score 2 · Answer 2 · answered Jul 03 '15 at 10:03

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

answered Jul 03 '15 at 10:03

Gustaf Gunér

2,272
4
17
23

it is hiding the whole page – Deepika Jul 15 '15 at 12:30

score 2 · Answer 3 · answered Jul 03 '15 at 10:29

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.

score 1 · Answer 4 · answered Jul 03 '15 at 10:13

1

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.

answered Jul 03 '15 at 10:13

enguerranws

8,087
8
49
97

:contains() was removed from the spec a decade ago - you can see this by going to the latest version of the spec, which you can find a link to at the very top of the page. See also http://stackoverflow.com/questions/4781141/why-doesnt-the-selector-h3nth-child1containsa-work/4781167#4781167 – BoltClock Jul 03 '15 at 10:50

Amadan · Answer 5 · 2015-07-03T10:43:35.537

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')]"

thanks, but I solved it with jquery. Will book mark this for future use. — Deepika, Jul 03 '15 at 11:00

score 0 · Answer 6 · answered Jul 03 '15 at 10:02

0

You can use :nth-child() if the structure of your page doesn't change :

To hide the 1st tr with the class ms-WPHeader (Be carreful: this will hide every 1st tr in each table):

table tr.ms-WPHeader:nth-child(1) {//hide the 1st tr in table
    display: none;
}

JSFidlle: http://jsfiddle.net/ghorg12110/no891emk/

answered Jul 03 '15 at 10:02

Magicprog.fr

4,072
4
26
35

sadly the contents changes according to user preference. – Deepika Jul 03 '15 at 11:01
1

@Dee So you need to use JS or/and JQuery to perform that. a pure CSS solution doesn't exists (yet) – Magicprog.fr Jul 03 '15 at 11:02

score 0 · Answer 7 · answered Jul 08 '20 at 07:00

0

span is a webelement so you can select this using CSS Selector. and then you can do WebElement.getText() to retrieve the text. No need to use xpath for this.

answered Jul 08 '20 at 07:00

Annie

1
1

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

7 Answers7

Linked