Esiste un selettore CSS per elementi contenenti determinati testi?

Sto cercando un selettore CSS per la seguente tabella:

Peter    | male    | 34
Susanne  | female  | 12

Esiste un selettore per abbinare tutti i TD contenenti "maschio"?

Se ho letto correttamente le specifiche , no.

È possibile abbinare un elemento, il nome di un attributo nell'elemento e il valore di un attributo denominato in un elemento. Tuttavia, non vedo nulla per la corrispondenza dei contenuti all'interno di un elemento.

Utilizzando jQuery:

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

Sembra che ci stessero pensando per le specifiche CSS3 ma non ha fatto il taglio .

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

Dovresti aggiungere un attributo di dati alle righe chiamate data-gendercon un valore maleo femalee utilizzare il selettore di attributi:

HTML:

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

CSS:

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

Esiste in realtà una base molto concettuale per cui questo non è stato implementato. È una combinazione sostanzialmente di 3 aspetti:

1. Il contenuto testuale di un elemento è effettivamente figlio di quell'elemento
2. Non puoi indirizzare direttamente il contenuto del testo
3. CSS non consente l'ascensione con i selettori

Questi 3 insieme significano che quando hai il contenuto del testo non puoi risalire all'elemento contenitore e non puoi dare uno stile al testo attuale. Ciò è probabilmente significativo poiché la discesa consente solo un tracciamento singolare del contesto e l'analisi dello stile SAX. I selettori ascendenti o di altro tipo che coinvolgono altri assi introducono la necessità di attraversamenti più complessi o soluzioni simili che complicherebbero notevolmente l'applicazione del CSS al DOM.

È possibile impostare il contenuto come attributo di dati e quindi utilizzare i selettori di attributo , come mostrato qui:

/* 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>

Puoi anche usare jQuery per impostare facilmente gli attributi del contenuto dei dati:

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

Poiché ai CSS manca questa funzione, dovrai utilizzare JavaScript per definire lo stile delle celle in base al contenuto. Ad esempio con XPath contains:

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

Quindi utilizzare il risultato in questo modo:

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

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

Temo che ciò non sia possibile, poiché il contenuto non è un attributo né è accessibile tramite una pseudo-classe. L'elenco completo dei selettori CSS3 è disponibile nella specifica CSS3 .

Per coloro che stanno cercando di fare selezioni di testo CSS Selenium, questo script potrebbe essere di qualche utilità.

Il trucco è selezionare il genitore dell'elemento che stai cercando, quindi cercare il figlio con il testo:

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];
}

Questo restituirà il primo elemento se ce n'è più di uno poiché è sempre un elemento, nel mio caso.

Sono d'accordo che l'attributo di dati (risposta del viaggiatore) è come dovrebbe essere gestito, MA, regole CSS come:

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

spesso può essere molto più facile da configurare, specialmente con librerie lato client come angularjs che potrebbero essere semplici come:

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

Assicurati solo che il contenuto sia solo una parola! Oppure puoi anche mappare a diversi nomi di classi CSS con:

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

Per completezza, ecco l'approccio degli attributi di dati:

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

La risposta di @ voyager sull'uso data-*dell'attributo (ad es. data-gender="female|male"è l' approccio più efficace e conforme agli standard a partire dal 2017:

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

Quasi tutti gli obiettivi possono essere raggiunti in quanto vi sono alcuni selettori, sebbene limitati, orientati al testo. Il :: first-letter è un elemento pseudo che può applicare stili limitata alla prima lettera di un elemento. C'è anche un :: prima linea pseudo-elemento oltre a selezionare ovviamente la prima riga di un elemento (come un paragrafo) implica anche che è ovvio che CSS potrebbe essere usato per estendere questa capacità esistente allo stile di aspetti specifici di un textNode .

Fino a quando tale patrocinio avrà successo e sarà implementata la prossima cosa migliore che potrei suggerire quando applicabile è explode/ splitparole usando un delimitatore di spazio, emettere ogni singola parola all'interno di un spanelemento e quindi se l'obiettivo di parola / stile è prevedibile, utilizzare in combinazione con : ennesimi selettori :

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

Altrimenti se non prevedibile , utilizzare nuovamente la risposta del viaggiatore sull'uso data-*dell'attributo. Un esempio usando PHP:

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

Se stai usando Chimp / Webdriver.io , supportano molti più selettori CSS rispetto alle specifiche CSS.

Questo, ad esempio, farà clic sulla prima ancora che contiene le parole "Orso cattivo":

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

La maggior parte delle risposte qui cerca di offrire un'alternativa a come scrivere il codice HTML per includere più dati perché almeno fino a CSS3 non è possibile selezionare un elemento tramite testo interno parziale. Ma può essere fatto, devi solo aggiungere un po 'di JavaScript vaniglia, nota che anche la femmina contiene maschio sarà selezionata:

      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>

Trovo l'opzione di attributo la migliore scommessa se non si desidera utilizzare javascript o jquery.

Ad esempio per dare uno stile a tutte le celle della tabella con la parola pronta, in HTML fare questo:

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

Quindi in CSS:

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

Si potrebbe anche usare contentcon attr()e celle di tabelle stile che sono ::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 ZeroWidthSpaceviene utilizzato per modificare il colore e può essere aggiunto utilizzando JavaScript vaniglia:

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

Sebbene il <td>tag s end possa essere omesso, ciò può comportare che non venga considerato vuoto.

Se non si crea il DOM da soli (ad es. In uno script utente) è possibile effettuare le seguenti operazioni con JS puro:

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>

Uscita console

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

Fare piccoli widget di filtro come questo:

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

La sintassi di questa domanda sembra la sintassi di Robot Framework. In questo caso, anche se non esiste un selettore CSS che è possibile utilizzare per contiene, esiste invece una parola chiave SeleniumLibrary che è possibile utilizzare. L' attesa fino a quando l'elemento contiene .

Esempio:

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