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

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

Peter    | male    | 34
Susanne  | female  | 12

Есть ли какой-либо селектор для соответствия всем TD, содержащим «мужской»?

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

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

Используя jQuery:

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

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

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

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

HTML:

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

CSS:

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

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

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

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

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

/* 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 нет этой функции, вам придется использовать JavaScript для стилизации ячеек по содержимому. Например с XPath contains:

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/

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

Для тех, кто хочет сделать выделение текста 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];
}

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

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

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

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

Практически большинство целей может быть достигнуто, поскольку есть некоторые, хотя и ограниченные селекторы, ориентированные на текст. :: первой буквой является псевдо-элементом , который может применить ограниченный стиль к первой букве элемента. Также есть :: первая линия кроме того, что выбор первой строки элемента (например, абзаца) также подразумевает, что очевидно, что 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>;
}

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

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

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

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

Я считаю, что вариант с атрибутом - ваш лучший выбор, если вы не хотите использовать javascript или jquery.

Например, чтобы оформить все ячейки таблицы словом «готово», в HTML сделайте следующее:

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

Тогда в css:

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

Вы также можете использовать 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 end может быть опущен , это может привести к тому, что он будет рассматриваться как непустой.

Если вы не создаете DOM самостоятельно (например, в сценарии пользователя), вы можете сделать следующее с чистым JS:

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>

Консольный вывод

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

Делать маленькие фильтрующие виджеты вот так:

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

Синтаксис этого вопроса выглядит как синтаксис Robot Framework. В этом случае, хотя нет никакого селектора css, который вы можете использовать для содержит, есть ключевое слово SeleniumLibrary, которое вы можете использовать вместо этого. Подождите , пока элемент не содержит .

Пример:

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