Можно ли нацелить самый последний элемент списка в CSS?

у меня создается меню страницы, которое будет похоже по структуре на следующий вложенный список:

<ul>
    <li>Page 1</li>
    <li>Page 2</li>
    <li>
        Page 3
        <ul>
            <li>Subpage 1</li>
            <li>Subpage 2</li> <!-- Can I target ONLY this element? -->
        </ul>
    </li>
</ul>

обратите внимание, что этот список является динамическим. количество элементов и количество уровней не предсказуемы. Таким образом, что-то вроде этого не будет достаточно гибким:

/* I know this does not have great browser support - just an example */
ul > li > ul > li:last-child {
    /* CSS here */
}

Я понимаю, что могу изменить свой код сервера, чтобы добавить класс к последнему элементу, но сначала я хотел бы знать, возможно ли это в CSS.

для того чтобы сделать дела более сложный, я хотел бы нацелить все основные браузеры вместе с IE 7+.

можно ли нацелить самый последний элемент списка с помощью CSS?

в принципе, мне это нужно Скрипка решено (через @Pumbaa80).

7
css html-lists

5 ответов

С помощью CSS3 путь (ИЕ9+)

если вы точно знаете, насколько глубок ваш последний пункт, вы можете повторить свои звонки в :last-child:

li:last-child li:last-child {
    color: red;
}

этот селектор псевдо-класса не поддерживается в IE до версии 9, согласно http://caniuse.com/#search=last-child. Конечно, если вы не знаете, насколько глубоким будет этот элемент списка, этот метод не очень полезен.

Путь JavaScript

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

var items = document.getElementById("mylist").getElementsByTagName("li"),
    _item = items[ items.length - 1 ];

_item.className == "" 
  ? _item.className = "last" 
  : _item.className += " last" ;

это необработанный JavaScript, который не требует дополнительных фреймворков или библиотек. Если вы используете популярную структуру, такую как jQuery, это может быть еще проще:

$("#mylist li:last").addClass("last");

Я бы не предложил вам использовать jQuery просто Для что-то вроде этого. Необработанный JavaScript будет намного быстрее и намного меньше раздуваться.

путь препроцессора

в зависимости от того, как построено навигационное меню, вы можете используйте серверный язык для идентификации последнего элемента списка и пометьте его как таковой. Например, мы могли бы выполнить следующее, используя DOMDocument класс в PHP:

$d = new DOMDocument();
$d->loadHTML( $html );

$a = $d->getElementsByTagName("li");
$l = $a->item( $a->length - 1 );

$c = $l->getAttribute("class");

empty( $c ) 
  ? $l->setAttribute("class", "last") 
  : $l->setAttribute("class", "last $c");

echo $d->saveHTML( $l );

это находит последний элемент списка в HTML и добавляет к нему новый класс "last". Преимущество этого заключается в том, что он не требует сложных и часто плохо поддерживаемых селекторов CSS3. Кроме того, он не требует добавления больших библиотек JavaScript для выполнения тривиальных вещей.

6

ты написал правильно:

li:last-child

Если вам нужно быть уверенным, что вы можете использовать javascript / jQuery для этого. Но тогда у вас может возникнуть проблема: "если у людей JS отключен?"... ни за что.

использовать li:last-child.

Edit:

если вы можете добавить по крайней мере класс на UL будет легко. В противном случае, если у вас есть только два списка:

ul ul li:last-child { /* code */ }

другой Edit:

http://jsfiddle.net/toroncino/4NXg2/

двойное решение, js и css.

редактировать снова:

Ваша Скрипка:http://jsfiddle.net/toroncino/NaJas/1/

$('ul').last().addClass('last');​
5

это невозможно. Ваше ограничение

количество элементов и количество уровней не предсказуемы.

означает, что селекторов CSS2 и даже селекторов CSS3 недостаточно:

Предположим, у вас есть селектор, который работает на глубине списка 2. Теперь добавление третьего уровня списка в этот элемент должно было бы аннулировать этот селектор, т. е. селектор должен был бы зависеть от дочерних элементов элемента. Таких селекторов еще не существует. и будет введен в CSS4, где это было бы решением вашей проблемы:

/* CSS4 */
li:last-child:not($li li) {
    /**/
}

переключатель $li li означает " an li что есть некоторые li потомок".

1

короче : нет. Ограничения, которые вы даете, делают решения CSS непрактичными из-за (очень) плохой поддержки "расширенного css" в IE7.

будет ли использование javascript вариантом в вашем случае? С jquery на ум приходит следующее:

$('ul li').last().css('color', 'red');

изменить: Это также обойдет вашу проблему "неизвестной глубины дерева", поскольку дочерние узлы последнего li автоматически будут ниже в списке соответствующих элементов, но дочерние узлы более ранних элементов li не будут :

  • 1-й элемент
  • 2-й элемент
  • 3-й элемент
    • 4-й элемент
  • 5-й элемент

edit: я обновил вашу скрипку здесьhttp://jsfiddle.net/NaJas/4/

1

вы можете использовать li: last-child в своем CSS

0