3

Quero adicionar background a linha de uma tabela em que uma das colunas o seu valor seja: Valor 1. Tentei com o pseudo-classe contains e pelo innerHTML, mas todos sem sucesso.

Código:

table tr td [innerHTML="Valor 1"]{
  background: red;
}

table tr td: contains('Valor 1'){
  background: red;
}
<table>
    <tr>
        <td>Valor 1</td>
    </tr>
    <tr>
        <td>Valor 2</td>
    </tr>
    <tr>
        <td>Valor 3</td>
    </tr>
</table>

  • Como eu poderia usar um selector CSS pra selecionar a linha pelo texto da coluna?
  • De uma maneira mais genérica, como poderia selecionar um elemento pelo seu conteúdo?

2 Respostas 2

3

Pelos seletores que vejo na documentação, não dá pra fazer isso. Mas dá pra selecionar via atributos e valores de atributos, então se você colocar o texto em um atributo é possível sim.

Fiz no JSFiddle pra você ver.

div[atributo_texto="teste"]{
  background-color:red;
}
<div id="divTeste" atributo_texto="teste">
teste
</div>

<div id="divTeste2" atributo_texto="batata">
batata
</div>

O mais perto de seletor de conteúdo que vejo na documentação é o :empty, que seleciona elementos vazios

1
  • Eu vi essa resposta um pouco depois, valeu :)
    – Marconi
    28/03/2017 às 12:06
2

Complemento o @Artur somente com CSS não é possível fazer isso, de acordo com a documentação. Uma alternativa é usar Jquery, que pode ser feito assim:

$("table tr td").filter(function (){
  return $(this).text() == "Valor 1";
}).css("background", "red");

Em uma das respostas dessa pergunta, diz o seguinte:

Há uma base muito conceitual para explicar por que isso não foi implementado. É uma combinação de basicamente 3 aspectos:

  1. O conteúdo textual de um elemento é efetivamente filho desse elemento
  2. Não é possível segmentar o conteúdo de texto diretamente
  3. CSS não permite a ascensão com seletores

Estes 3 juntos significam que pelo tempo que você tem o conteúdo de texto que você não pode subir de volta para o elemento pai, e você não pode estilizar o texto atual. Isto é provavelmente significativo, uma vez que descendente só permite um acompanhamento singular do contexto. Ascendente ou outros seletores envolvendo outros eixos introduzem a necessidade de soluções mais complexas de percurso ou similares que complicariam muito a aplicação de CSS ao DOM.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .