Как создать первый и последний ли с 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>

Ответы

Ответ 1

Вы должны использовать непосредственный селектор для детей:

ul > li:first-child

Это правило повлияет на <li>, которому сразу предшествует <ul>. Это должно относиться как к jQuery, так и к css. Не все браузеры могут использовать псевдо-классы (особенно last-child.

Ответ 2

Первый элемент довольно прост, и я вижу, что у вас уже есть :first-child вниз. :last-child делает то же самое, но имеет ограниченную поддержку в IE. Однако, если количество элементов списка фиксировано (что мне кажется), вы можете на самом деле нацелить последний элемент только с помощью CSS. Обратите внимание!

li + li + li +li + li + li { background:pink; }

Здесь сценарий: http://jsfiddle.net/jgRZQ/1/

Селектор + в основном нацелен на ближайшего следующего брата (если он соответствует вашему типу), поэтому это вопрос подсчета вашего пути до последнего. И да, это работает в IE7.:)

Ответ 3

Дайте имя класса для первого тега ul.

<div id="nav">
    <ul class="list">
        <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>...........
...................................

Затем вы можете использовать следующий CSS:

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

Ответ 4

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

Ответ 5

Если вы хотите использовать jQuery, вы можете использовать следующее:

$('#nav > ul li').first().css('background-color', 'red');
$('#nav > ul li').last().css('background-color', 'red');

^ должен делать трюк.