Gibt es einen CSS-Selektor für Elemente, die einen bestimmten Text enthalten?

Question

Ich bin auf der Suche nach einem CSS-Selektor für die folgende Tabelle:

Peter    | male    | 34
Susanne  | female  | 12

Gibt es einen Selektor für alle TDs, die "männlich" enthalten?

Answer 1

Sie könnten Inhalt als Datenattribut festlegen und dann Attributselektoren wie hier gezeigt:

/* Select every cell matching the word "male" */
td[data-content="male"] {
  color: red;
}

/* Select every cell starting on "p" case insensitive */
td[data-content^="p" i] {
  color: blue;
}

/* Select every cell containing "4" */
td[data-content*="4"] {
  color: green;
}

<table>
  <tr>
    <td data-content="Peter">Peter</td>
    <td data-content="male">male</td>
    <td data-content="34">34</td>
  </tr>
  <tr>
    <td data-content="Susanne">Susanne</td>
    <td data-content="female">female</td>
    <td data-content="14">14</td>
  </tr>
</table>

Sie können auch jQuery verwenden, um die Dateninhaltsattribute einfach festzulegen:

$(function(){
  $("td").each(function(){
    var $this = $(this);
    $this.attr("data-content", $this.text());
  });
});

Answer 2

Da CSS diese Funktion nicht hat, müssen Sie JavaScript verwenden, um Zellen nach Inhalt zu formatieren. Zum Beispiel mit XPaths contains :

var elms = document.evaluate( "//td[contains(., 'male')]", node, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null )

Verwenden Sie das Ergebnis dann wie folgt:

for ( var i=0 ; i < elms.snapshotLength; i++ ){
   elms.snapshotItem(i).style.background = "pink";
}

https://jsfiddle.net/gaby_de_wilde/o7bka7Ls/9/

Answer 3

Ab Januar 2021 gibt es etwas, das genau das tut :has() ... nur einen Haken: es wird noch von keinem Browser unterstützt

Beispiel: Der folgende Selektor findet nur Elemente, die direkt ein Kind enthalten:

a:has(> img)

Referenzen:

https://developer.mozilla.org/en-US/docs/Web/CSS/:has

https://caniuse.com/?search=has

Answer 4

Ich fürchte, das ist nicht möglich, denn der Inhalt ist weder ein Attribut noch ist er über eine Pseudoklasse zugänglich. Die vollständige Liste der CSS3-Selektoren ist zu finden unter die CSS3-Spezifikation .

Answer 5

Für diejenigen, die Selenium-CSS-Textauswahlen durchführen möchten, könnte dieses Skript von Nutzen sein.

Der Trick besteht darin, das übergeordnete Element des gesuchten Elements auszuwählen und dann nach dem untergeordneten Element zu suchen, das den Text enthält:

public static IWebElement FindByText(this IWebDriver driver, string text)
{
    var list = driver.FindElement(By.CssSelector("#RiskAddressList"));
    var element = ((IJavaScriptExecutor)driver).ExecuteScript(string.Format(" var x = $(arguments[0]).find(\":contains('{0}')\"); return x;", text), list);
    return ((System.Collections.ObjectModel.ReadOnlyCollection<IWebElement>)element)[0];
}

Dies wird das erste Element zurückgeben, wenn es mehr als ein Element gibt, da es in meinem Fall immer ein Element ist.