Подстрока Соответствие в абзаце с использованием CSS

Question

У меня есть <p>Example string</p> С некоторым текстом внутри. Я хочу использовать css для поиска слова в этом абзаце.

Я знаю, что это возможно, если у вас есть, например. <a href="test"></a> Все, что вам нужно сделать, это:

a[href*="test"]{} 

Но когда я пытаюсь сделать это с моим пунктом я не могу заставить его работать. Я пробовал:

[p*="string"]{} 

p[*="string"]{} 

Answer 1

Короткий ответ НЕТ, это не представляется возможным с помощью CSS только, что вы используете element[attr=val] селектор, который выбирает только элементы с конкретным атрибутом с тем, что конкретными значениями. Вам нужно использовать jQuery или Javascript с регулярным выражением для отслеживания шаблона и применения стилей к его элементам.

С другой стороны, вы можете создать пользовательские атрибуты с префиксом data- так, например, вы можете сделать что-то вроде

<p data-custom="Holder Text">Want to change this</p> 
<p data-custom="Holder Text">Want to change this</p> 
<p data-custom="Holder Text 2">Dont Touch This</p> 

p[data-custom="Holder Text"] { 
    color: red; 
} 

Demo

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

Answer 2

Вы не можете использовать это только с помощью CSS, однако вы можете проверить this blog post о том, как достичь этого, используя jQuery.

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

$("p:contains('John')")