Modify A <strong> element, but only if it's contained within a particular span ID

I have开发者_Python百科 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?

Just prepend a #myWarning to your selector?

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

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

I think you want just the first such warning to be big and red?

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

Why are you using jQuery for that? Why not simply use CSS:

#myWarning strong { color: red; font-size: 400%; }