<button id="eq2">eq(2)</button>
<button id="eq-3">eq(-3)</button>

<p>Lorem ipsum dolor. (index 0, index -4)</p>
<p>Lorem ipsum dolor. (index 1, index -3)</p>
<p>Lorem ipsum dolor. (index 2, index -2)</p>
<p>Lorem ipsum dolor. (index 3, index -1)</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
body {
    margin: 20px;
    font-size: 18px;
}

button {
    padding: 10px;
    margin-right: 8px;
    margin-bottom: 18px;
    background-color: tomato;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 16px;
}
$(document).ready(function() {

    $("#eq2").click(function() {
        $("p").eq(2).css("background-color", "yellow");
    });
  
    $("#eq-3").click(function() {
        $("p").eq(-3).css("background-color", "red");
    });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.