Add First & Last Classes on a List

[email protected]

by Ryan Brackett

HTML

<ul class="list">
    <li><a href="#">Apple</a>
    </li>
    <li><a href="#">Banana</a>
    </li>
    <li><a href="#">Grape</a>
    </li>
    <li><a href="#">Strawberry</a>
    </li>
    <li><a href="#">Peach</a>
    </li>
    <li><a href="#">Pear</a>
    </li>
    <li><a href="#">Melon</a>
    </li>
</ul>

CSS

body {
    font-family: Arial;
}
li a {
    color: black;
    text-decoration: none;
}
li.first a {
    color: red;
    font-weight: bold;
}
li.last a {
    color: green;
    font-weight: bold;
}

JavaScript

// ADD FIRST AND LAST CLASSES ON A LIST
$('.list li')
    .eq(0).addClass('first').end()
    .eq(-1).addClass('last').end();