Chrome extension injecting css only on classes with specific content

Question

I know how to inject CSS into a webpage, and change a certain class, but what if I don't want to change all of that class?

For example, say I have a div:

<div class="content">
   <p> My favorite color is yellow </p>
</div>
<div class="content">
   <p> My favorite color is green </p>
</div>

I want to use content scripts to edit the CSS of the .content class, but only ones that contain the keyword, "green"

Would I have to use Javascript, if so, how would I do it?

Answer 1

If you're open to using jQuery you could use the :contains() selector.

Example

$(".content:contains('green')").css("color", "green");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <p>My favorite color is yellow</p>
</div>
<div class="content">
  <p>My favorite color is green</p>
</div>

Answer 2

Or make it very simple like below

var item = $('.content');
  for (var i = 0; i <= item.length; i++) {
   if ($(item[i]).text().indexOf("green")>= 0) {
         $(item[i]).css('color','red');
      }
  }