Question

Please note that the following is an IE only issue (as usual…)

I have the following HTML code:

<input id="foo" type="checkbox" checked="checked" />
<label for="foo">
  <span>some foo text</span>
</label>

I have a CSS rule that is working perfectly:

#foo + label > span{  
    display: block;
    line-height: 1em;
    padding: 0.4em 1em;
    cursor: pointer;
    text-align:center;
    text-decoration:none;
}

I then have a CSS selector which match the same CSS selector which is not returning anything:

var textVal = $("#foo + label > span").text();

But for some reason if I use the following line, it is going to return the correct value:

var textVal = $("#foo + label").html() or .text()

I really want to select the label’s span, because I want to change the text of it and don’t want to append a new span everytime.

Thank you,

EDIT:

Interesting, if I do the following it works…

var label = $("#foo + label");
var textVal = $(">span",label).text();

Answer 1

Try the following:

var textVal = $("label[for='foo'] span").text();