Edit in JSFiddle

Result
JavaScript
HTML
CSS

$(document).ready(function () {
                $("#myButton").click(function () {
                    var liNum = $("#number").val();
                    if (liNum != "") {
                        if ($("li")[liNum] != undefined) {
                            $(".css").removeClass("css");
                            $("li:eq(" + liNum + ")").addClass("css");
                        }
                        else {
                            alert("Enter valid position !!");
                        }
                    }
                    else {
                        alert("Please enter Position.");
                    }
                });

                $("#prevAll").click(function () {
                    if ($(".css")[0] != undefined)
                        $(".css").removeClass("css").prevAll().addClass("css");
                    else
                        alert("Please enter position and click Click Me. Then try to click NextAll button.");
                });
            });

 <html>
        <head>
        <title>prevAll</title>
        </head>
        <body>
        <b>List of Players :</b>
        <ul>
        <li>Ronaldinho</li>
        <li>Zinedine Zidane</li>
        <li>Maradona</li>
        <li>Pele</li>
        <li>Messi</li>
        <li>Ronaldo</li>
        </ul>
        <b>Enter li position to manipulate : </b><input type="text" id="number" /><br />
        <input type="button" id="myButton" value="Select" />
        <input type="button" id="prevAll" value="PrevAll" />
        <input type="button" id="reset" value="Reset" onclick="location.reload();" />
        </body>
        </html>

.css
          {
              color:Aqua;
              font-size:30px;
          }