I am working on updating the label text "E-mail" to say "User Name" in this HTML markup. The only tool I have access to for this task is jQuery.
<div class="foo" style="border:1px solid #444">
<span class="field-with-fancyplaceholder">
<label class="placeholder" for="pseudonym_session_unique_id" style="font-size: 13px;">
<span>Email</span>
</label>
<input id="pseudonym_session_unique_id" class="text" type="text" size="30" name="pseudonym_session[unique_id]">
</span>
<span class="field-with-fancyplaceholder">
<label class="placeholder" for="pseudonym_session_password" style="font-size: 13px;">
<span>Password</span>
</label>
<input id="pseudonym_session_password" class="text" type="password" size="30" name="pseudonym_session[password]">
</span>
</div>
During my attempt to change the label text, I encountered an issue.
$('label:nth-of-type(1)').addClass('bar');
$('.bar span').text('user name');
// because $('label:nth-of-type(1) span') doesn't work
This code selecting both labels and changing their text to "user name." How can I specifically target only the first label?