Existe um seletor de CSS para elementos que contêm determinado texto?

Estou procurando um seletor de CSS para a seguinte tabela:

Peter    | male    | 34
Susanne  | female  | 12

Existe algum seletor para corresponder a todos os TDs que contêm "macho"?

Se eu li a especificação corretamente, não.

Você pode corresponder em um elemento, o nome de um atributo no elemento e o valor de um atributo nomeado em um elemento. Não vejo nada para corresponder conteúdo dentro de um elemento.

Usando jQuery:

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

Parece que eles estavam pensando sobre isso na especificação CSS3, mas não foi suficiente .

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

Você precisaria adicionar um atributo de dados às linhas chamadas data-gendercom a maleou femalevalue e usar o seletor de atributos:

HTML:

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

CSS:

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

Na verdade, existe uma base muito conceitual para o porquê disso não ter sido implementado. É uma combinação de basicamente três aspectos:

1. O conteúdo do texto de um elemento é efetivamente filho desse elemento
2. Você não pode segmentar diretamente o conteúdo do texto
3. CSS não permite ascensão com seletores

Esses três juntos significam que, quando você tiver o conteúdo do texto, não poderá voltar ao elemento que o contém e não poderá estilizar o texto atual. Provavelmente, isso é significativo, pois a descida permite apenas um rastreamento singular do contexto e da análise do estilo SAX. Os seletores ascendentes ou outros envolvendo outros eixos introduzem a necessidade de soluções transversais ou similares mais complexas que complicariam bastante a aplicação de CSS ao DOM.

Você pode definir o conteúdo como atributo de dados e, em seguida, usar seletores de atributo , conforme mostrado aqui:

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

Você também pode usar o jQuery para definir facilmente os atributos de conteúdo de dados:

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

Como o CSS não possui esse recurso, você precisará usar JavaScript para estilizar as células por conteúdo. Por exemplo, com XPath contains:

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

Em seguida, use o resultado da seguinte maneira:

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

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

Receio que isso não seja possível, porque o conteúdo não é um atributo nem é acessível através de uma pseudo classe. A lista completa de seletores CSS3 pode ser encontrada na especificação CSS3 .

Para aqueles que desejam fazer seleções de texto em CSS do Selenium, esse script pode ser útil.

O truque é selecionar o pai do elemento que você está procurando e procurar o filho que possui o texto:

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

Isso retornará o primeiro elemento se houver mais de um, pois sempre é um elemento, no meu caso.

Concordo que o atributo de dados (resposta do viajante) é como ele deve ser tratado, MAS, regras de CSS como:

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

muitas vezes pode ser muito mais fácil de configurar, especialmente com bibliotecas do lado do cliente, como angularjs, que podem ser tão simples quanto:

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

Apenas certifique-se de que o conteúdo seja apenas uma palavra! Ou você pode até mapear para diferentes nomes de classes CSS com:

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

Para completar, eis a abordagem de atributo de dados:

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

A resposta da @ voyager sobre o uso do data-*atributo (por exemplo, data-gender="female|male"é a abordagem mais eficaz e compatível com os padrões a partir de 2017:

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

Quase todos os objetivos podem ser alcançados, pois existem alguns seletores, embora limitados, orientados ao redor do texto. A :: first-letter é um pseudo-elemento que pode aplicar um estilo limitado à primeira letra de um elemento. Há também um pseudo-elemento :: first-line , além de obviamente selecionar a primeira linha de um elemento (como um parágrafo) também implica que é óbvio que o CSS pode ser usado para estender esse recurso existente para estilizar aspectos específicos de um textNode .

Até que essa defesa seja bem - sucedida e seja implementada, a próxima melhor coisa que eu poderia sugerir, quando aplicável, é explode/ splitwords usando um delimitador de espaço, produza cada palavra individual dentro de um spanelemento e, em seguida, se o objetivo da palavra / estilo for previsível, em combinação com : nth seletores :

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

Else se não previsível para, mais uma vez, a resposta uso da Voyager sobre o uso do data-*atributo. Um exemplo usando o PHP:

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

Se você estiver usando o Chimp / Webdriver.io , eles suportam muito mais seletores de CSS do que a especificação de CSS.

Isso, por exemplo, clicará na primeira âncora que contém as palavras "urso ruim":

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

A maioria das respostas aqui tenta oferecer uma alternativa a como escrever o código HTML para incluir mais dados, porque pelo menos até CSS3 você não pode selecionar um elemento pelo texto interno parcial. Mas isso pode ser feito, você só precisa adicionar um pouco de JavaScript baunilha, observe que feminino também contém masculino, ele será selecionado:

      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>

Acho que a opção de atributo é sua melhor aposta, se você não quiser usar javascript ou jquery.

Por exemplo, para estilizar todas as células da tabela com a palavra ready, no HTML, faça o seguinte:

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

Em seguida, em css:

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

Você também pode usar contentcom attr()e células de tabela de estilo que são ::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 ZeroWidthSpaceé usado para alterar a cor e pode ser adicionado usando JavaScript vanilla:

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

Embora a <td>tag s end possa ser omitida, isso pode fazer com que ela seja tratada como não vazia.

Se você não criar o DOM (por exemplo, em um script de usuário), poderá fazer o seguinte com 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>

Saída do console

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

Fazendo pequenos widgets de filtro como este:

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

A sintaxe desta pergunta se parece com a sintaxe do Robot Framework. Nesse caso, embora não exista um seletor de CSS que você possa usar contém, existe uma palavra-chave SeleniumLibrary que você pode usar. O elemento Esperar até que contenha .

Exemplo:

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