How to highlight text in chrome

Question

I would like to highlight some text in chrome but conditionnaly. The website is using this type of code for each element on the page and i would like to highlight those with a lenght lower than 1:00:00

<div class="entry_content">
<p>
"Title"
<br> 
<a href="a link" target="_blank">
<img src="alink.jpg" alt="name">
</a>
<br> Size: 11111111 bytes (111.11 MB), duration: 00:11:11, avg.birate: 111 kb/s
<br> Audio: aac, 16000 Hz, mono
<br> Video: h264, 320×240, 15 fps
</p>
</div>

PS: I know the number don't add up it's an example ;)

I would like if possible to do it in css with stylish but really dont know if it's possible and how to make condition in css.

Thank you for your help.

Answer 1

I can't see any way to use css to conditionally highlight an element based on its content. However, a simple bit of javascript could do it:

var divs = document.getElementsByClassName("entry_content");

for (var i = 0; i < divs.length; i++)
{
    if (/duration:\s00:/.test(divs[i].innerHTML))
    {
        divs[i].style.backgroundColor = "yellow";
    }
}

<div class="entry_content">
<p>
"One Hour Eleven Minutes"
<br> 
<a href="a link" target="_blank">
<img src="alink.jpg" alt="name">
</a>
<br> Size: 11111111 bytes (111.11 MB), duration: 01:11:11, avg.birate: 111 kb/s
<br> Audio: aac, 16000 Hz, mono
<br> Video: h264, 320×240, 15 fps
</p>
</div>
<div class="entry_content">
<p>
"Eleven Minutes"
<br> 
<a href="a link" target="_blank">
<img src="alink.jpg" alt="name">
</a>
<br> Size: 11111111 bytes (111.11 MB), duration: 00:11:11, avg.birate: 111 kb/s
<br> Audio: aac, 16000 Hz, mono
<br> Video: h264, 320×240, 15 fps
</p>
</div>
<div class="entry_content">
<p>
"Eleven Hours"
<br> 
<a href="a link" target="_blank">
<img src="alink.jpg" alt="name">
</a>
<br> Size: 11111111 bytes (111.11 MB), duration: 11:11:11, avg.birate: 111 kb/s
<br> Audio: aac, 16000 Hz, mono
<br> Video: h264, 320×240, 15 fps
</p>
</div>