JSFiddle - React, Tailwind, and code Playground

by Laberwurschd

HTML

<table>
  <thead>
    <tr>
      <th>a</th>
      <th>b</th>
      <th>c</th>
      <th>d</th>
      <th>e</th>
      <th>f</th>
      <th>g</th>
      <th>h</th>
      <th>i</th>
      <th>j</th>
    </tr>
  </thead>
  <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>
</table>
<p><code>tbody .a:first-of-type</code> { <output></output> }</p>
<p><code>tbody .b:first-of-type</code> { <output></output> }</p>

CSS

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

tbody .b:first-of-type {
  color: red;
}

JavaScript

document.querySelectorAll("output")[0].textContent = "Node-List hat " +
  document.querySelectorAll("tbody .a:first-of-type").length +
  " Elemente.";
document.querySelectorAll("output")[1].textContent = "Node-List hat " +
  document.querySelectorAll("tbody .b:first-of-type").length +
  " Elemente.";