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

Question

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

Peter    | male    | 34
Susanne  | female  | 12

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

Answer 1

Если я правильно прочитал спецификацию , нет.

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

Answer 2

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

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

Answer 3

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

:contains() CSS3 селектор http://www.w3.org/TR/css3-selectors/#content-selectors

Answer 4

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

HTML:

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

CSS:

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

Answer 5

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

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

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

Answer 6

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

/* 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());
  });
});

Answer 7

Поскольку в 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/

Answer 8

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

Answer 9

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

Хитрость заключается в том, чтобы выбрать родительский элемент для искомого элемента, а затем найти дочерний элемент с текстом:

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

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

Answer 10

Я согласен атрибут данных (ответ Вояджера) - это то, как он должен обрабатываться, НО, правила 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}}">