Gibt es eine CSS-Auswahl für Elemente, die bestimmten Text enthalten?

Ich suche einen 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?

Wenn ich die Spezifikation richtig gelesen habe , nein.

Sie können ein Element, den Namen eines Attributs im Element und den Wert eines benannten Attributs in einem Element abgleichen. Ich sehe jedoch nichts, um Inhalte innerhalb eines Elements abzugleichen.

Verwenden von jQuery:

$('td:contains("male")')

Sieht so aus, als hätten sie für die CSS3-Spezifikation darüber nachgedacht, aber es hat den Schnitt nicht geschafft .

:contains()CSS3-Selektor http://www.w3.org/TR/css3-selectors/#content-selectors

Sie müssten den data-gendermit a maleoder femalevalue aufgerufenen Zeilen ein Datenattribut hinzufügen und den Attributselektor verwenden:

HTML:

<td data-gender="male">...</td>

CSS:

td[data-gender="male"] { ... }

Es gibt tatsächlich eine sehr konzeptionelle Grundlage dafür, warum dies nicht implementiert wurde. Es ist eine Kombination von im Grunde 3 Aspekten:

1. Der Textinhalt eines Elements ist effektiv ein untergeordnetes Element dieses Elements
2. Sie können den Textinhalt nicht direkt ausrichten
3. CSS erlaubt keinen Aufstieg mit Selektoren

Diese 3 zusammen bedeuten, dass Sie zu dem Zeitpunkt, an dem Sie den Textinhalt haben, nicht mehr zum enthaltenen Element aufsteigen und den vorliegenden Text nicht formatieren können. Dies ist wahrscheinlich von Bedeutung, da der Abstieg nur eine singuläre Verfolgung des Kontexts und der Analyse im SAX-Stil ermöglicht. Aufsteigende oder andere Selektoren, an denen andere Achsen beteiligt sind, erfordern komplexere Durchquerungs- oder ähnliche Lösungen, die die Anwendung von CSS auf das DOM erheblich erschweren würden.

Sie können den Inhalt als Datenattribut festlegen und dann Attributselektoren verwenden , wie hier gezeigt:

/* Select every cell containing 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-conten="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());
  });
});

Da CSS diese Funktion nicht bietet, 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 dann das Ergebnis wie folgt:

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

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

Ich fürchte, dies ist nicht möglich, da der Inhalt weder ein Attribut ist noch über eine Pseudoklasse zugänglich ist. Die vollständige Liste der CSS3-Selektoren finden Sie in der CSS3-Spezifikation .

Für diejenigen, die Selenium CSS-Text auswählen möchten, kann 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 gibt das erste Element zurück, wenn es mehr als ein Element gibt, da es in meinem Fall immer ein Element ist.

Ich bin damit einverstanden, dass das Datenattribut (die Antwort des Reisenden) lautet, wie es behandelt werden soll, ABER CSS-Regeln wie:

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

kann oft viel einfacher einzurichten sein, insbesondere bei clientseitigen Bibliotheken wie anglejs, die so einfach sein können wie:

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

Stellen Sie einfach sicher, dass der Inhalt nur ein Wort ist! Oder Sie können sogar verschiedenen CSS-Klassennamen zuordnen mit:

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

Der Vollständigkeit halber ist hier der Datenattributansatz:

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

Antwort von @ voyager zur Verwendung von data-*Attributen (z. B. data-gender="female|male"der effektivste und standardkonformste Ansatz ab 2017:

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

Die meisten Ziele können erreicht werden, da es einige, wenn auch begrenzte Selektoren gibt, die sich an Text orientieren. Der :: first-letter ist ein Pseudo-Element , die begrenzte Styling mit dem ersten Buchstaben eines Elements anwenden kann. Es gibt auch ein :: First-Line -Pseudoelement, neben der offensichtlichen Auswahl der ersten Zeile eines Elements (z. B. eines Absatzes) impliziert dies auch, dass es offensichtlich ist, dass CSS verwendet werden könnte, um diese vorhandene Fähigkeit zu erweitern, um bestimmte Aspekte eines textNode zu formatieren .

Bis zur Befürwortung erfolgreich und ist die nächste beste Sache umgesetzt ich vorschlagen könnte , wenn anwendbar ist explode/ splitWorte einen Raum deliminator, Ausgang jedes einzelne Wort im Innern eines mit spanElemente und dann , wenn das Wort / Ziel Styling ist vorhersehbar Verwendung in Kombination mit : n Selektoren ::

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

Andernfalls, wenn dies nicht vorhersehbar ist , verwenden Sie erneut die Antwort des Voyagers zur Verwendung von data-*Attributen. Ein Beispiel mit PHP:

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

Wenn Sie Chimp / Webdriver.io verwenden , unterstützen sie viel mehr CSS-Selektoren als die CSS-Spezifikation.

Dies wird zum Beispiel auf den ersten Anker klicken, der die Worte "Bad Bear" enthält:

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

Die meisten Antworten hier versuchen, eine Alternative zum Schreiben des HTML-Codes anzubieten, um mehr Daten aufzunehmen, da Sie zumindest bis zu CSS3 kein Element durch partiellen inneren Text auswählen können. Aber es kann getan werden, Sie müssen nur ein bisschen Vanille-JavaScript hinzufügen, beachten Sie, da weiblich auch männlich enthält, wird es ausgewählt:

      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>

Ich finde die Attributoption die beste Wahl, wenn Sie kein Javascript oder keine Abfrage verwenden möchten.

Um beispielsweise alle Tabellenzellen mit dem Wort bereit zu formatieren, gehen Sie in HTML folgendermaßen vor:

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

Dann in CSS:

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

Sie können auch verwenden , contentmit attr()und Stil Tabellenzellen , die sind ::not :empty

th::after { content: attr(data-value) }
td::after { content: attr(data-value) }
td[data-value]:not(:empty) {
  color: fuchsia;
}

<table>
  <tr>
    <th data-value="Peter"></th>
    <td data-value="male">&#x0200B;</td>
    <td data-value="34"></td>
  </tr>
  <tr>
    <th data-value="Susanne"></th>
    <td data-value="female"></td>
    <td data-value="12"></td>
  </tr>
  <tr>
    <th data-value="Lucas"></th>
    <td data-value="male">&#x0200B;</td>
    <td data-value="41"></td>
  </tr>
</table>

A ZeroWidthSpacewird zum Ändern der Farbe verwendet und kann mit Vanille-JavaScript hinzugefügt werden:

const hombres = document.querySelectorAll('td[data-value="male"]');
hombres.forEach(hombre => hombre.innerHTML = '​');

Obwohl das <td>s-End-Tag möglicherweise weggelassen wird , kann dies dazu führen, dass es als nicht leer behandelt wird.

Wenn Sie das DOM nicht selbst erstellen (z. B. in einem Userscript), können Sie mit reinem JS Folgendes 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>

Konsolenausgabe

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

Kleine Filter-Widgets wie folgt ausführen:

    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')
            }
        })
    })

Die Syntax dieser Frage ähnelt der Robot Framework-Syntax. In diesem Fall gibt es, obwohl es keinen CSS-Selektor gibt, für den Sie enthalten können, ein SeleniumLibrary-Schlüsselwort, das Sie stattdessen verwenden können. Das Element Warten bis enthält .

Beispiel:

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