JSFiddle - React, Tailwind, and code Playground

by NerfAnarchist

HTML

<table>
    <tr>
        <th class="first">1</th>
        <th>2</th>
        <th class="next">3</th>
        <th>4</th>
    </tr>
    <tr>
        <td class="first">1</td>
        <td>2</td>
        <td class="next">3</td>
        <td>4</td>
    </tr>
    <tr>
        <td class="first">1</td>
        <td>2</td>
        <td class="next">3</td>
        <td>4</td>
    </tr>
    <tr>
        <td class="first">1</td>
        <td>2</td>
        <td class="next">3</td>
        <td>4</td>
    </tr>
</table>

CSS

td {
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    padding: 5px;
}

th {
    border-right: 1px solid #000000;
    border-bottom: 2px solid #000000;
    padding: 5px;
}

.selected {
    background-color: #000000;
    color: #FFFFFF;
}

JavaScript

// get the next (skipping elements)
$(function () {
    $('.first').each(function () {
        $(this).nextAll('.next').first().addClass('selected');
    });
});