странное поведение селектора в chrome

Question

См. Jsfiddle здесь

Селектор выделяет все таблицы, а не ту, которую он должен выбирать. Это делается только для первого элемента списка. Если я перенесу selected = "selected" на другой элемент списка, у меня не возникнет проблемы. Я не вижу этой проблемы в ff для ie.

Я что-то не так делаю, или это новый баг?

1009 * 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>
    </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>

Answer 1

Я думаю, что ответ в том, что selected не является допустимым атрибутом для тега <LI>.Chrome (правильно или неправильно) просто игнорирует этот элемент в вашем CSS.

Если вы используете вместо него class, то вы можете выбрать его правильно во всех браузерах: http://jsfiddle.net/SReUe/

Answer 2

Вы пытались сделать свой селектор немного более конкретным?

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