strange selector behavior in chrome

See jsfiddle here

The selector highlights all tables rather than the one it should be selecting. It only does this for the first list item. If I move selected="selected" to another list item, I don't have the issue. I don't see this issue in ff for ie.

Am I doing something wrong, or is this a new bug?

css

  li[selected="selected"] table
  {
    background:yellow;
  }

html

<li selected="selected">
        <a href="#">
            <table>
                <tr>
                    <td>
                        Row 1 - Col 1
                    </td>
                    <td class="second">
                        Row 1 - Col 2
                    </td>
                </tr>
            </table>
        </a开发者_Python百科>
    </li>
    <li>
        <a href="#">
            <table>
                <tr>
                    <td>
                        Row 2 - Col 1
                    </td>
                    <td class="second">
                        Row 2 - Col 2
                    </td>
                </tr>
            </table>
        </a>
    </li>
    <li>
        <a href="#">
            <table>
                <tr>
                    <td>
                        Row 3 - Col 1
                    </td>
                    <td class="second">
                        Row 3 - Col 2
                    </td>
                </tr>
            </table>
    </a>
    </li>

I think the answer is that selected is not a valid attribute for an <LI> tag. Chrome is (right or wrong) simply ignoring that element in your CSS.

If you used class instead, then you could select it correctly in all browsers: http://jsfiddle.net/SReUe/

Have you tried making your selector a little more specific?

EG: li[selected="selected"] table td