特定のコンテンツを持つクラスにのみCSSを挿入するChrome拡張機能

Question

CSSをウェブページに挿入して特定のクラスを変更する方法はわかっていますが、そのクラスをすべて変更したくない場合はどうすればよいですか？

例えば、私はdiv要素を持っていると言う：キーワードが含まれている唯一のものは、私は.contentクラスのCSSを編集するコンテンツのスクリプトを使用したい

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

、しかし、"green"

は私が考えJavascriptを使用する必要があります。もしそうなら、どうすればいいですか？

Answer 1

jQueryを使用している場合は:contains() selectorを使用できます。

例

$(".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

など、それは非常にシンプルに以下

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