CODEWITHSUNDEEP
csscss-selectors
Nilzone-
Nilzone-

Reputation: 2786

Substring Matching within a paragraph using CSS

I have a <p>Example string</p> With some text inside. I want to use css to search for a word within that paragraph.

I know this is possible if you have e.g. <a href="test"></a> All you have to do then is:

a[href*="test"]{}

But when I try to do this with my paragraph I can't seem to get it to work. I've tried:

[p*="string"]{}

p[*="string"]{}

Upvotes: 2

Views: 141

Answers (2)

Mr. Alien
Mr. Alien

Reputation: 157314

The short answer is NO, this is not possible using CSS only, what you are using is element[attr=val] selector which only selects elements with that particular attribute with that specific values. You need to use jQuery or Javascript with a regex to track the pattern and apply styles to its elements.

On the other hand you can create custom attributes with a prefix of data- so for example you can do something like

<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

But again, this won't make sense here, you can simply assign the classes if you are aware what elements need to be changed.

Upvotes: 4

Kristian Vitozev
Kristian Vitozev

Reputation: 5971

You cannot this using CSS only, however you can check this blog post about how to achieve this using jQuery.

Basically you should use :contains selector:

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

Upvotes: 2

Related Questions