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

November 16, 2024 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");

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table><trclass="ms-WPHeader"><tdcolspan="3"><divclass="ms-WPTitle"><span>Text-Social Notification Properties</span></div></td></tr></table><table><trclass="ms-WPHeader"><tdcolspan="3"><divclass="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_trtr{
    display : none;
}

<table><trclass="WPHeader"><tdcolspan="3"><divclass="WPTitle"><span>Text-Social Notification Properties</span></div></td></tr></table><table><trclass="WPHeader"><tdcolspan="3"><divclass="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.

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><metacharset="utf-8"><title>JS Bin</title></head><body><table><trclass = "ms-WPHeader"><tdcolspan ="3"><divclass = "ms-WPTitle"><span>
            Irrelevant text
          </span></div></td></tr><trclass = "ms-WPHeader"><tdcolspan ="3"><divclass = "ms-WPTitle"><span>
            A wild stegosaurus appears!
          </span></div></td></tr><trclass = "ms-WPHeader"><tdcolspan ="3"><divclass = "ms-WPTitle"><span>
            More irrelevant text
          </span></div></td></tr><trclass = "wrongClass"><tdcolspan ="3"><divclass = "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 stackoverflow Examples