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

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

<code><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>
</code>

Обратите внимание, что этот список является динамическим.The number of items and number of levels are not predictable, Таким образом, что-то подобное не будет достаточно гибким:

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

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

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

Is it possible to target the very last list item using CSS?

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

 user12344455562102 мая 2012 г., 15:56
Кажется, людям трудно понять ваш вопрос. Я поднял JSFiddle, чтобы проиллюстрировать проблему:jsfiddle.net/NaJas
 Stephen Watkins02 мая 2012 г., 16:00
@ Pumbaa80 Спасибо. Я отредактирую свой вопрос, чтобы включить эту скрипку.

Ответы на вопрос(5)

& lt;, p & gt; Короче говоря: нет. Ограничения, которые вы даете, делают решения CSS непрактичными из-за (очень) слабой поддержки для "продвинутого CSS"; в IE7.

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

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

edit: This will also bypass your 'unknown tree depth' issue as child nodes of the last li would automatically be further down in the list of matching items but child nodes of earlier li items would not :

1st element 2nd element 3rd element 4th element 5th element

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

Решение Вопроса
The CSS3 Way (IE9+)

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

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

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

The JavaScript Way

Вы также можете настроить таргетинг на самый последний элемент списка с помощью 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");

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

The Preprocessor way

В зависимости от того, как построено ваше навигационное меню, вы можете использовать серверный язык, чтобы идентифицировать последний элемент списка и пометить его как таковой. Например, мы могли бы выполнить следующее, используя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 и добавляет новый класс & quot; last & quot; к этому. Преимущество этого состоит в том, что он не требует сложных и часто плохо поддерживаемых селекторов CSS3. Кроме того, для выполнения тривиальных задач не требуется добавления больших библиотек JavaScript.

 02 мая 2012 г., 18:19
хороший ответ! очень полные и хорошие варианты.
 Stephen Watkins02 мая 2012 г., 16:03
Это не будет достаточно гибким. Я обновил свой вопрос, чтобы включить пример Fiddle.
 02 мая 2012 г., 16:17
@ Стив, я понимаю. Я продолжу свое последнее решение, поскольку оно может повлиять на ваши варианты.
 02 мая 2012 г., 16:05
@Steve Вы действительно не должны загружать в библиотеку 37 КБ только для чего-то вроде этого. Приведенные выше решения действительно достаточно гибки, и в настоящее время я работаю над примером предварительной обработки, который будет работать 100% времени.
 Stephen Watkins02 мая 2012 г., 16:12
Извините, я имел в виду, что ваше CSS-решение было недостаточно гибким (я просто не знаю, сколько может быть вложенных уровней - возможно, потребуетсяli:last-child li:last-child li:last-child). Ваши другие решения будут работать (я думаю).

The number of items and number of levels are not predictable.

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

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

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

Селектор$li li означает "li это имеет некоторыеli Потомок & Quot ;.

Вы отправили правильный путь:

li:last-child

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

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

Редактировать:

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

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

Другое Править:

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

Двойное решение, JS и CSS.

Изменить еще раз:

Твоя скрипка:http://jsfiddle.net/toroncino/NaJas/1/

$('ul').last().addClass('last');​
 02 мая 2012 г., 16:03
@Steve снова улучшился с помощью jsFiddle.
 02 мая 2012 г., 15:48
ты прочитал вопрос?
 02 мая 2012 г., 15:56
@Steve Можете ли вы добавить классы на UL? Я улучшил свой ответ.
 Stephen Watkins02 мая 2012 г., 15:55
Я имел в виду, что мне нужен ТОЛЬКО последний элемент li, а не просто последний элемент li самого внешнего вложенного уровня. С этим в мыслях,li:last-child не работает для меня (jsfiddle.net/h3Zzm).
 02 мая 2012 г., 15:52
Конечно, я ответил, что нет никакого способа ... или решения css: last-child или javascript ... нет ничего для старых браузеров или для браузеров с отключенным JavaScript ...

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

Ваш ответ на вопрос