Как стилизовать первый и последний li с помощью CSS или jQuery?

Как я могу стилизовать первый (верхний уровень) li и последний (верхний уровень) li с помощью CSS или jQuery?

Я использую CSS для установки первого стиля li , но он также стилизует первый li на каждом уровне средней школы ul , так как я могу заставить его стилизовать только li с Main 1 в нем и последний с Main 6 в нем?

Вот мой код:

<style>
ul li:first-child
{
width: 800px;
border:1px solid #fc5604; border-top-width:thin; (2px)
}
</style>

и HTML:

<div id="nav">
    <ul>
        <li><a href="#">Main 1</a>
            <ul>
                <li><a href="#">Sub 1a</a></li>
                <li><a href="#">Sub 1b</a></li>
                <li><a href="#">Sub 1c</a></li>
            </ul>
        </li>
        <li><a href="#">Main 2</a>
            <ul>
                <li><a href="#">Sub 2</a></li>
            </ul>
        </li>
        <li><a href="#">Main 3</a>
            <ul>
                <li><a href="#">Sub 3</a></li>
            </ul>
        </li>
        <li><a href="#">Main 4</a>
            <ul>
                <li><a href="#">Sub 4</a></li>
            </ul>
        </li>
        <li><a href="#">Main 5</a></li>
        <li><a href="#">Main 6</a>
            <ul>
                <li><a href="#">Sub 6</a></li>
            </ul>
        </li>
    </ul>   
</div>