kniffelig: passenden Selektor finden

[Felix Riesterer]

Liebe Mitlesende,

ich suche das jeweils erste Element, das zu einer bestimmten Klasse gehört:

<tbody>
  <tr>
    <td>1</td>
    <td>2</td>
    <td class="a">3</td>
    <td class="a">4</td>
    <td>5</td>
    <td class="a">6</td>
    <td class="b">7</td>
    <td>8</td>
    <td class="b">9</td>
    <td>10</td>
  </tr>
</tbody>

Ich habe folgendes versucht, was aber nicht greift:

tbody .a:first-of-type { font-weight: bold; }
tbody .b:first-of-type { color: red; }

Folgerichtig findet der FF auch mit JavaScript nichts:

document.querySelectorAll("tbody .a:first-of-type"); // leere NodeList

Fiddle dazu

Mit welchem Selektor erreiche ich mein Ziel?

Liebe Grüße

Felix Riesterer