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

Die Antwort von @voyager über die Verwendung von data-* Attribut (z.B. data-gender="female|male" ist die wirksamste und normenkonform Ansatz ab 2017:

[data-gender='male'] {background-color: #000; color: #ccc;}

So ziemlich die meisten Ziele puede erreicht werden, da es einige, wenn auch begrenzte, auf Text ausgerichtete Selektoren gibt. Die ::Anfangsbuchstabe ist eine Pseudo-Element die den ersten Buchstaben eines Elements in begrenztem Umfang stilisieren kann. Außerdem gibt es eine ::first-line Pseudo-Element neben der offensichtlichen Auswahl der ersten Zeile eines Elements (z. B. eines Absatzes) auch impliziert, dass es offensichtlich ist, dass CSS verwendet werden könnte, um diese bestehende Fähigkeit zur Gestaltung spezifischer Aspekte eines textNode zu erweitern.

Bis eine solche Lobbyarbeit erfolgreich ist y umgesetzt ist, ist das nächstbeste, was ich vorschlagen könnte, wenn es anwendbar ist explode / split Wörter mit einem Leerzeichen-Trennzeichen, Ausgabe jedes einzelnen Wortes innerhalb einer span Element und dann, wenn das Wort/Stilisierungsziel ist vorhersehbar Verwendung in Kombination mit :n-te Selektoren :

$p = explode(' ',$words);
foreach ($p as $key1 => $value1)
{
 echo '<span>'.$value1.'</span>;
}

Sonst wenn nicht vorhersehbar um noch einmal die Antwort von voyager über die Verwendung von data-* Attribut. Ein Beispiel mit PHP:

$p = explode(' ',$words);
foreach ($p as $key1 => $value1)
{
 echo '<span data-word="'.$value1.'">'.$value1.'</span>;
}

Answer 2

Ich finde, dass die Attribut-Option die beste Wahl ist, wenn Sie kein Javascript oder Jquery verwenden möchten.

Um z.B. alle Tabellenzellen mit dem Wort "ready" zu versehen, machen Sie in HTML folgendes:

 <td status*="ready">Ready</td>

Dann in css:

td[status*="ready"] {
        color: red;
    }

Answer 3

Wenn Sie auf den gewünschten Inhalt einen Stil anwenden möchten. Einfacher Trick.

    td { border: 1px solid black; }
    td:empty { background: lime; }
    td:empty::after { content: "male"; }

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

https://jsfiddle.net/hyda8kqz/

Answer 4

Kleine Filter-Widgets wie dieses zu erstellen:

    var searchField = document.querySelector('HOWEVER_YOU_MAY_FIND_IT')
    var faqEntries = document.querySelectorAll('WRAPPING_ELEMENT .entry')

    searchField.addEventListener('keyup', function (evt) {
        var testValue = evt.target.value.toLocaleLowerCase();
        var regExp = RegExp(testValue);

        faqEntries.forEach(function (entry) {
            var text = entry.textContent.toLocaleLowerCase();

            entry.classList.remove('show', 'hide');

            if (regExp.test(text)) {
                entry.classList.add('show')
            } else {
                entry.classList.add('hide')
            }
        })
    })

Answer 5

Die Syntax dieser Frage sieht aus wie die Syntax von Robot Framework. In diesem Fall gibt es zwar keinen CSS-Selektor, den Sie für "contains" verwenden können, aber es gibt ein SeleniumLibrary-Schlüsselwort, das Sie stattdessen verwenden können. Die Warten bis Element enthält .

Exemple :

Wait Until Element Contains  | ${element} | ${contains}
Wait Until Element Contains  |  td | male