Applying last-child to element not working

Given I have the following tags:

<div id="div-one">
    <div class="div-two">some </div>
    <input type="hidden" value=""/>
    <div class="div-two">some </div>
    <input type="hidden" value=""/>
    <div class="div-two">some </div>
    <input type="hidden" value=""/>
</div>

When I try to apply a style to the last "div-two" element using this css syntax:

#div-one div.div-two:last-child  { border-bottom:solid 1px #999; }

It doesn't work unless I remove the hidden fields. Any suggestions as to why?

Here's a link to the jsfiddle: http://jsfiddle.net/67qYJ/1/
Using Google Chrome v12.0.742.100
It is NOT an option to place the hidden tags elsewhere

Applying last-child to element not working

2 Answers