Jquery contains selects div too high up
<p>I'm sure this is a complete bonehead move on my side, but can't figure out what's happening here.</p>

<p>I'm trying to select a div with a specific word in it, but Jquery seems to select the div on the wrong level. If you run this you'll see what I mean:</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
      &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;

    &lt;script type="text/javascript"&gt;
        $(function () {
            $(".ms-my-profileDetails:contains('Birthday')").css("color", "red");
        });
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="ms-my-profileDetails"&gt;
        &lt;div&gt;
            Department : &lt;a href='http://Someurl'&gt;IT&lt;/a&gt;
        &lt;/div&gt;        
        &lt;br /&gt;
        &lt;div&gt;
            Birthday : &lt;a href='http://Someurl'&gt;1921-04-13&lt;/a&gt;
        &lt;/div&gt;
        &lt;br /&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>The result of the above contains matches the entire div of Birthday and Department    <code>&lt;div class="ms-my-profileDetails"&gt;</code> when I only want the Birthday Div.</p>

<p>Pls help.
Tx</p>
