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

Wenn Sie das DOM nicht selbst erstellen (z. B. in einem Benutzerskript), können Sie das Folgende mit reinem JS tun:

for ( td of document.querySelectorAll('td') ) {
  console.debug("text:", td, td.innerText)
  td.setAttribute('text', td.innerText)
}
for ( td of document.querySelectorAll('td[text="male"]') )
  console.debug("male:", td, td.innerText)

<table>
  <tr>
    <td>Peter</td>
    <td>male</td>
    <td>34</td>
  </tr>
  <tr>
    <td>Susanne</td>
    <td>female</td>
    <td>12</td>
  </tr>
</table>

Ausgabe auf der Konsole

text: <td> Peter
text: <td> male
text: <td> 34
text: <td> Susanne
text: <td> female
text: <td> 12
male: <td text="male"> male

Answer 2

Hervorragende Antworten, aber ich denke, ich kann etwas hinzufügen, das für mich in einem praktischen Szenario funktioniert hat: die Ausnutzung der aria-label Attribut für CSS.

Für die Leser, die es nicht wissen: aria-label ist ein Attribut, das in Verbindung mit anderen ähnlichen Attributen verwendet wird, um einem Screen-Reader mitzuteilen, was etwas ist, falls jemand mit einer Sehbehinderung Ihre Website nutzt. Viele Websites fügen diese Attribute zu Elementen mit Bildern oder Text als "Deskriptoren" hinzu.

Dies macht es sehr website-spezifisch, aber falls Ihr Element dieses Attribut enthält, ist es ziemlich einfach, dieses Element über den Inhalt des Attributs auszuwählen:

HTML:

<td aria-label="male">Male</td>
<td aria-label="female">Female</td>

CSS:

td[aria-label="male"] {
    outline: 1px dotted green;
}

Dies ist technisch gesehen das Gleiche wie die Lösung mit den Datenattributen, aber es funktioniert für Sie, wenn Sie nicht der Autor der Website sind, und es handelt sich nicht um eine ausgefallene Lösung, die speziell für diesen Anwendungsfall entwickelt wurde; sie ist an sich ziemlich verbreitet. Der einzige Nachteil ist, dass es keine Garantie dafür gibt, dass das von Ihnen gewünschte Element dieses Attribut auch hat.

Answer 3

Wenn Sie Folgendes verwenden Schimpanse / Webdriver.io sie Unterstützung einer Vielzahl von CSS-Selektoren als die CSS-Spezifikation.

So wird z. B. der erste Anker angeklickt, der die Worte "Böser Bär" enthält:

browser.click("a*=Bad Bear");

Answer 4

Die meisten Antworten hier versuchen, Alternativen anzubieten, wie man den HTML-Code schreiben kann, um mehr Daten einzuschließen, denn zumindest bis CSS3 kann man ein Element nicht durch einen teilweisen inneren Text auswählen. Aber es ist möglich, Sie müssen nur ein bisschen Vanilla JavaScript hinzufügen, beachten Sie, da weiblich auch männlich enthält, wird es ausgewählt werden:

      cells = document.querySelectorAll('td');
        console.log(cells);
      [].forEach.call(cells, function (el) {
        if(el.innerText.indexOf("male") !== -1){
        //el.click(); click or any other option
        console.log(el)
        }
    });

 <table>
      <tr>
        <td>Peter</td>
        <td>male</td>
        <td>34</td>
      </tr>
      <tr>
        <td>Susanne</td>
        <td>female</td>
        <td>14</td>
      </tr>
    </table>

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

Answer 5

Ich stimme zu das Datenattribut (Antwort von voyager) ist, wie es gehandhabt werden sollte, ABER, CSS-Regeln wie:

td.male { color: blue; }
td.female { color: pink; }

kann oft viel einfacher einzurichten sein, vor allem mit Client-seitigen Bibliotheken wie Angularjs, die so einfach sein können wie:

<td class="{{person.gender}}">

Achten Sie nur darauf, dass der Inhalt nur aus einem Wort besteht! Oder Sie könnten sogar verschiedene CSS-Klassennamen zuordnen mit:

<td ng-class="{'masculine': person.isMale(), 'feminine': person.isFemale()}">

Der Vollständigkeit halber hier der Ansatz für die Datenattribute:

<td data-gender="{{person.gender}}">