Зміна CSS для останнього <li>

Мені цікаво, чи є якийсь спосіб змінити атрибут CSS для останнього liу списку за допомогою CSS. Я розглядав питання використання :last-child, але це здається справді глючним, і я не можу змусити його працювати для мене. Я буду використовувати JavaScript, щоб зробити це, якщо це необхідно, але я хочу знати, чи може хтось придумати рішення в CSS.

:last-childце справді єдиний спосіб зробити це без зміни HTML-коду, але, припускаючи, що ви можете це зробити, основним варіантом є просто дати йому class="last-item", а потім:

li.last-item { /* ... */ }

Очевидно, що ви можете автоматизувати це на вибраній мовою динамічної генерації сторінок. Крім того, lastChildу W3C DOM є властивість JavaScript.

Ось приклад виконання того, що ви хочете в прототипі :

$$("ul").each(function(x) { $(x.lastChild).addClassName("last-item"); });

Або ще простіше:

$$("ul li:last-child").each(function(x) { x.addClassName("last-item"); });

У jQuery ви можете написати це ще компактніше:

$("ul li:last-child").addClass("last-item");

Також зауважте, що це повинно працювати без використання власне last-childселектора CSS - скоріше, використовується його реалізація на JavaScript - тому він повинен бути менш глюковим та надійнішим у браузерах.

Я зробив це з чистим CSS (мабуть, тому, що походжу з майбутнього - на 3 роки пізніше за всіх: P)

Припустимо, у нас є список:

<ul id="nav">
  <li><span>Category 1</span></li>
  <li><span>Category 2</span></li>
  <li><span>Category 3</span></li>
</ul>

Тоді ми можемо легко зробити текст останнього елемента червоним за допомогою:

ul#nav li:last-child span {
   color: Red;
}

Я зазвичай комбіную підходи CSS та JavaScript, так що він працює без JavaScript у всіх браузерах, крім IE6 / 7, і в IE6 / 7 з увімкненим (але не вимкненим) JavaScript, оскільки вони не підтримують :last-childпсевдо-клас.

$("li:last-child").addClass("last-child");

li:last-child,li.last-child{ /* ... */ }

Ви можете використовувати jQuery і зробити це таким чином

$("li:last-child").addClass("someClass");

Однією з альтернатив IE7 + та інших браузерів може бути використання :first-child замість них та інверсія ваших стилів.

Наприклад, якщо ви встановлюєте поле для кожного li:

ul li {
  margin-bottom: 1em;
}
ul li:last-child {
  margin-bottom: 0;
}

Ви можете замінити його таким:

ul li {
  margin-top: 1em;
}
ul li:first-child {
  margin-top: 0;
}

Це добре підійде для деяких інших випадків, таких як кордони.

Відповідно до sitepoint , :first-childглючить, але лише в тій мірі, що він буде обирати деякі кореневі елементи (тип документа або html), і може не змінювати стилі, якщо будуть вставлені інші елементи.

Відповідь 2015 р . : CSS останнього типу дозволяє стилізувати останній елемент.

ul li:last-of-type { color: red; }

Зазвичай я це роблю, створюючи файл htc (наприклад, last-child.htc):

<attach event="ondocumentready" handler="initializeBehaviours" />
<script type="text/javascript">
function initializeBehaviours() {
  this.lastChild.className += ' last-child';
}
</script>

І зателефонуйте йому з мого умовного css-файлу IE за допомогою:

ul { behavior: url("/javascripts/htc/last-child.htc"); }

Тоді як у моєму головному файлі css я отримав:

ul li:last-child,
ul li.last-child {
  /* some code */
}

Іншим рішенням (хоча і повільнішим), яке використовує існуючу розмітку css без визначення будь-якого класу .last-child, є бібліотека Dean Edwards ie7.js.

: last-child є CSS3 і не підтримує IE, в той час як: first-child є CSS2, я вважаю, що наступне є безпечним способом реалізації його за допомогою jquery

$('li').last().addClass('someClass');

$ ('li'). last (). addClass ('someClass');

якщо у вас кілька

Якщо ви знаєте, що у списку, який ви переглядаєте, є три лі, наприклад, ви можете зробити це:

li + li + li { /* Selects third to last li */
}

В IE6 ви можете використовувати вирази:

li {
    color: expression(this.previousSibling ? 'red' : 'green'); /* 'green' if last child */
}

Однак я б рекомендував використовувати спеціалізований клас або Javascript (а не вирази IE6), поки :last-childселектор не отримає кращу підтримку.