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

Похоже, что это обсуждалось в спецификации CSS3, но в конечном итоге не включили.

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

В вашем коде используется jQuery для поиска всех ячеек таблицы (<td>), которые содержат текст "male". Вот как это работает:

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

• $('td') выбирает все элементы <td> на странице.
• :contains("male") — это фильтр, который оставляет только те элементы, которые содержат текст "male".

Таким образом, этот код вернет jQuery-объект со всеми ячейками таблицы, содержащими слово "male". Если вы хотите выполнить какие-то действия с найденными элементами, вы можете добавить методы jQuery после данного селектора. Например, чтобы изменить цвет текста на красный, можно использовать:

$('td:contains("male")').css('color', 'red');

Если потребуется уточнить ваш вопрос или задать дополнительные вопросы, не стесняйтесь!

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

Пример HTML:

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

Пример CSS:

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

Таким образом, вы сможете задавать стили для ячеек, основываясь на значении атрибута data-gender.

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

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

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

К сожалению, CSS не поддерживает такую функциональность, поэтому вам придется использовать JavaScript для стилизации ячеек таблицы в зависимости от их содержимого. Для этого можно воспользоваться XPath и его функцией contains. Вот пример кода:

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

Затем можно применить стили к найденным элементам следующим образом:

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

Этот код найдет все ячейки <td>, содержащие текст 'male', и изменит их фон на розовый. Для того чтобы протестировать этот код, вы можете использовать этот jsFiddle.