Select last element using class name

Question

This seems like it should be pretty simple - but I have not been able to figure it out.

<tr>
    <td class="data-command">1</td>
    <td class="data-column data-column-text">2</td>
    <td class="data-column data-column-text">3</td>
    <td class="data-column data-column-numeric">4</td>
    <td class="data-column data-column-date">4</td>
    <td class="data-column data-column-numeric">4</td>
    <td class="data-command">5</td>
</tr>
<tr>
    <td class="data-column data-column-numeric">6</td>
    <td class="data-column data-column-text">7</td>
    <td class="data-column data-column-text">8</td>
    <td class="data-column data-column-text">8</td>
    <td class="data-column data-column-date">8</td>
    <td class="data-command">10</td>
</tr>

I would like to add padding to the first and last <td> in each <tr> with class data-column (so in the above example the columns with 2, 4, 6 and 9 would be selected).

At first, I tried using the :last-of-type and :first-of-type CSS selector:

.data-command:first-of-type { padding-right: 10px; }
.data-command:last-of-type { padding-left: 10px; }

However, this doesn't work because last-of-type cannot be used with a class.

Is there another way to accomplish this? I tried using jQuery but I couldn't get anything to work...

Update

There is a another piece of the puzzle that I left out. So the type of padding that I add to the first and last column is dependent on another class in the .

If the last .data-column is a .data-column-text or .data-column-date, add padding-right, otherwise, don't add any padding.

If the first .data-column is a .data-column-numeric, add padding-left, otherwise, don't add anything.

Answer 1

You can find .data-column in each tr and then use :first and :last DEMO

$('tr').each(function() {
  $(this).find('.data-column:first, .data-column:last').css('color', 'red')
})

Answer for UPDATE In that case you can check class with hasClass()

$('tr').each(function() {
  var first = $(this).find('.data-column:first');
  var last = $(this).find('.data-column:last')

  if (last.hasClass('data-column-text') || last.hasClass('data-column-date')) last.css('color', 'red');
  if (first.hasClass('data-column-numeric')) first.css('color', 'red');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="data-command">1</td>
    <td class="data-column data-column-text">2</td>
    <td class="data-column data-column-text">3</td>
    <td class="data-column data-column-numeric">4</td>
    <td class="data-column data-column-date">4</td>
    <td class="data-column data-column-numeric">4</td>
    <td class="data-command">5</td>
  </tr>
  <tr>
    <td class="data-column data-column-numeric">6</td>
    <td class="data-column data-column-text">7</td>
    <td class="data-column data-column-text">8</td>
    <td class="data-column data-column-text">8</td>
    <td class="data-column data-column-date">8</td>
    <td class="data-command">10</td>
  </tr>
</table>