JQuery: Aplicando efeito no primeiro e último elemento

Para facilitar o entendimento vamos utilizar uma tabela como exemplo. A ideia é aplicar uma cor de fundo na primeira e na última célula da tabela.

Para aplicar uma cor de fundo no primeiro elemento, usamos a função first()

Exemplo:
$(‘td’).first().css(‘background’, ‘red’);

Para aplicar uma cor de fundo no último elemento, usamos a função last()

Exemplo:
$(‘td’).last().css(‘background’, ‘red’);

Agora, para manter a cor de fundo da primeira e da última célula em forma de encadeamento de método, teremos que usar a função end(). Esta função guarda o elemento selecionado anteriormente.

Veja código completo:

<style type="type="text/css"">
table, td{
    border: 1px solid #000;
    text-align: center;
}
table{ width: 100%; }
td{ padding: 10px; }
</style>
 
<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

$('td').first().css('background', 'red').end().last().css('background', 'blue');