Question

I have the following little jQuery hack to make any HTML that shows up in <strong>Warning</strong> appear big and red:

$("strong:contains('Warning')").css("color","red").css("font-size","400%");

It works beautifully. However, it makes everything big and red, and I really only want it to make Warnings big and red if they also appear in a span with the id myWarning. For example:

<span id="myWarning">
  <div align="left" class="tip">
    <strong>Warning</strong> (I want this to be big and red...)
  </div>
</span>

<strong>Warning</strong> (...but I don't want this to be big and red)

How can I enhance my jQuery hack to get it to only modify the CSS of the first “Warning” and not the second?

Answer 1

Just prepend a #myWarning to your selector?

$("#myWarning strong:contains('Warning')").css("color","red").css("font-size","400%");