Выберите данные таблицы на основе значения в CSS [duplicate]

Использование jQuery:

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

Вы можете установить контент как атрибут данных, а затем использовать селектора атрибутов

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

Вы также может использовать jQuery, чтобы легко установить эти атрибуты содержимого данных

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

Согласен атрибут данных (ответ вояджера) заключается в том, как его следует обрабатывать, НО, правила CSS, такие как:

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

часто могут быть намного проще настроить , особенно с клиентскими библиотеками вроде angularjs, которые могут быть такими же простыми, как:

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

Просто убедитесь, что контент - это всего лишь одно слово! Или вы даже можете сопоставить разные имена классов CSS с помощью:

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

Для полноты, вот подход атрибутов данных:

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

Похоже, они думали об этом для спецификации CSS3, но не сделали разреза.

:contains() Селектор CSS3 http://www.w3.org/TR/ CSS3-селекторы / # контент-селекторы

Большинство ответов здесь предлагают альтернативу тому, как писать код 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>

Боюсь, это невозможно, потому что контент не является атрибутом и недоступен через псевдокласс. Полный список селекторов CSS3 можно найти в спецификации CSS3 .

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

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

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

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

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

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

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

На самом деле существует очень концептуальная основа того, почему это не было реализовано. Это комбинация в основном трех аспектов:

1. Текстовое содержимое элемента эффективно является дочерним элементом этого элемента
2. Вы не можете напрямую нацелить текстовое содержимое
3. CSS не допускает вознесения с помощью селекторов

Эти 3 вместе означают, что к тому моменту, когда у вас есть текстовое содержимое, вы не сможете вернуться к содержащему элементу, и вы не можете текст. Это, вероятно, значимо, поскольку спуск только позволяет синхронное отслеживание контекста и синтаксический анализ SAX. Восходящие или другие селекторы с участием других осей вносят потребность в более сложных обходах или аналогичных решениях, которые значительно усложнили бы применение CSS к DOM.

Вам нужно добавить атрибут данных в строки с именем data-gender со значением male или female и использовать селектор атрибутов:

HTML:

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

CSS:

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

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

Это, например, щелкнет по первому якорю, содержащему слова «Bad bear»:

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

Для тех, кто хочет сделать Selenium CSS text selections, этот скрипт может быть полезен.

Фокус в том, чтобы выбрать родителя элемента, который вы ищете, а затем выполнить поиск дочерний элемент, который имеет текст:

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

Это вернет первый элемент, если его больше одного, поскольку в моем случае это всегда один элемент.

Поскольку CSS не хватает этой функции, вам придется использовать javascript для стилей ячеек по контенту. Например, с xpath содержит

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

. Затем используйте результат следующим образом:

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

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