JSFiddle - React, Tailwind, and code Playground

nth-of-type with class

by Kyle Welsby

HTML

<div id="foot">
    <table id="nav">
      <tbody>
        <tr valign="top">
          <td class="b"><b>Previous</b></td>
          <td><b>1</b></td>
          <td><a href="#">2</a></td>
          <td><a href="#">3</a></td>
          <td><a href="#">4</a></td>
          <td><a href="#">5</a></td>
          <td><a href="#">6</a></td>
          <td><a href="#">7</a></td>
          <td><a href="#">8</a></td>
          <td><a href="#">9</a></td>
          <td><a href="#">10</a></td>
          <td class="b"><a href="#">Next</a></td>
        </tr>
      </tbody>
    </table>
  </div>

CSS

.b:nth-of-type(2){
    color: red;
}

JavaScript

var qs, jq, selector

// The selector
selector = "#foot td.b:nth-of-type(2)";

qs = document.querySelectorAll(selector);
console.log(qs.length);
// returns 0, should be 1