Есть ли селектор CSS для элементов, содержащих определенный текст?

Question

Я ищу селектор CSS для следующей таблицы:

Peter    | male    | 34
Susanne  | female  | 12

Существует ли какой-либо селектор для соответствия всем TD, содержащим "male"?

Answer 1

@ voyager ответ об использовании атрибута data-* (например, data-gender="female|male" - самый эффективный и соответствующий стандартам подход с 2017 года:

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

Почти все цели могут быть достигнуты , поскольку есть некоторые, хотя и ограниченные селекторы, ориентированные вокруг текста. :: first-letter - это псевдоэлемент , который может применять ограниченную стилизацию к первой букве элемента. Существует также псевдоэлемент :: first-line , кроме того, что выбор первой строки элемента (например, абзаца) также подразумевает, что очевидно, что CSS можно использовать для расширения этой существующей возможности до специфичные для стиля аспекты textNode.

До тех пор, пока такая адвокация не будет успешной, и будут реализованы. Следующее лучшее, что я могу предложить, когда это применимо, - explode / split слова с использованием разделителя пробелов, выводить каждое отдельное слово внутри span элемент и затем, если слово / стиль цели предсказуемо , используйте в сочетании с : n-ными селекторами :

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

Иначе если не предсказуемо , чтобы снова использовать ответ voyager об использовании атрибута data-*. Пример использования PHP:

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

Answer 2

Вы также можете использовать content с attr() и ячейками таблицы стилей, которые являются :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 используется для изменения цвета и может быть добавлен с помощью ванильного JavaScript:

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

Хотя конечный тег <td> s может быть опущен из-за этого он может рассматриваться как непустой.

Answer 3

Делаем маленькие виджеты фильтра, как это:

    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 4

Если вы используете Шимпанзе / Webdriver.io , они поддерживают намного больше селекторов CSS , чем спецификация CSS.

Например, кликнет первый якорь со словами «Плохой медведь»:

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

Answer 5

Большинство ответов здесь пытаются предложить альтернативу тому, как написать HTML-код, чтобы включить больше данных, потому что, по крайней мере, до CSS3 вы не можете выбрать элемент по частичному внутреннему тексту. Но это можно сделать, вам просто нужно добавить немного ванильного JavaScript, обратите внимание, так как женский также содержит мужской, он будет выбран:

      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>