JSFiddle - React, Tailwind, and code Playground

by swoogie

HTML

<table>
    <tr class='rows' ><td>1</td></tr>
    <tr class='rows'><td>2</td></tr>
    
    <tr class='hide'><td>3</td></tr>
    <tr class='hide'><td>4</td></tr>
    
    <tr class='rows'><td>5</td></tr>
    <tr class='rows'><td>6</td></tr>
    
    <tr class='rows'><td>7</td></tr>
    <tr class='rows'><td>8</td></tr>
    
    <tr class='rows'><td>9</td></tr>
    <tr class='rows'><td>10</td></tr>
    
    <tr class='rows'><td>11</td></tr>
    <tr class='rows'><td>12</td></tr>
</table>

CSS

table tr.rows:nth-last-child(4n-1), table tr.rows:nth-last-child(4n)  {
    background: #ccc;
}
table tr.rows:nth-child(1), table tr.rows:nth-child(2)  {
    background: white;
}
.hide{
    display:none;
    
}

JavaScript

console.log($("table tr.rows:nth-child(4n-1)"));