CSS: не (: остання дитина): після вибору

369

У мене є список елементів, стилізованих так:

ul {
    list-style-type: none;
    text-align: center;
}

li {
    display: inline;
}

li:not(:last-child):after {
    content:' |';
}

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

Розгорніть фрагмент

Хтось знає, як CSS виділити всі, крім останнього елемента?

Ви можете ознайомитись із визначенням :not()селектора тут

css css-selectors pseudo-element

— Метт Кларксон
джерело

1

Така поведінка виявляється помилкою в Chrome 10. Це працює для мене у Firefox 3.5.

— дурі

6

Насправді просто запустив фрагмент 2018 року з останнім Chrome і працював так, як очікувалося.

— atoth

433

Якщо проблема з не селектором, ви можете встановити їх і змінити останній

li:after
{
  content: ' |';
}
li:last-child:after
{
  content: '';
}

або якщо ви можете використовувати раніше, не потрібно для останньої дитини

li+li:before
{
  content: '| ';
}

— імма
джерело

12

Це насправді єдиний спосіб змусити його працювати так само, як IE8 (вибачте, немає Iet7 для IE7 і раніше). li:not(:first-child):beforeце трохи страшніше для вирішення старих версій Internet Explorer.

— Сенді Гіффорд

240

Кожні речі здаються правильними. Ви можете використовувати наступний селектор css замість того, що ви використовували.

ul > li:not(:last-child):after

— Вівек
джерело

4

@ScottBeeson Це найкращий тент для сучасного веб-переглядача, але прийнята робота з відповідями зі старими браузерами. (Я згоден з вами, це має бути прийнятим)

— Артур

25

Ваш приклад як написаний для мене прекрасно працює в Chrome 11. Можливо, ваш браузер просто не підтримує :not()селектор?

Можливо, вам потрібно буде використовувати JavaScript або подібний для цього крос-браузера. jQuery реалізує : not () у своєму API вибору.

— Ліза Далі
джерело

8

Я вирішив це, зробивши li:not(:first-child):beforeі додавши вертикальну смугу раніше. Я працював із стабільною версією Chrome, яка, здається, не підтримує останню дитину. Будівництво канарців робить. Дякую за відповідь Тхо.

— Метт Кларксон

Здається, Chrome не підтримує його навіть у 2013 році?

— MikkoP

20

Приклад використання CSS

  ul li:not(:last-child){
        border-right: 1px solid rgba(153, 151, 151, 0.75);
    }

— Лорена Піта
джерело

20

Для мене це працює чудово

&:not(:last-child){
            text-transform: uppercase;
        }

— Ашад Насім
джерело

1

Ця відповідь може стосуватися SCSS, а не CSS.

— Кріс Уолш

10

Ваш зразок не працює в IE для мене, ви повинні вказати заголовок Doctype у своєму документі, щоб відобразити вашу сторінку стандартним способом в IE, щоб використовувати властивість CSS вмісту:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<html>

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

</html>

Другий спосіб - використовувати селектори CSS 3

li:not(:last-of-type):after
{
    content:           " |";
}

Але вам все одно потрібно вказати Doctype

І третій спосіб - використовувати JQuery з таким сценарієм, як наступний:

<script type="text/javascript" src="jquery-1.4.1.js"></script>
<link href="style2.css" rel="stylesheet" type="text/css">
</head>
<html>

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

<script type="text/javascript">
  $(document).ready(function () {
      $("li:not(:last)").append(" | ");
    });
</script>

Перевагою третього способу є те, що вам не потрібно вказувати doctype, а jQuery подбає про сумісність.

— Мартін Кунц
джерело

6

<! DOCTYPE html> - це новий стандарт HTML5.

— Метт Кларксон

1

Це дивовижний і сучасний спосіб впоратися з цим. Я боровся з: останньою дитиною, тоді я знайшов вашу відповідь. Цей ідеальний! : не (: останній за типом): після

— Фірз

1

Вийміть: перед останньою дитиною та: після і використовуйте

 ul li:not(last-child){
 content:' |';
}

Сподіваємось, це має спрацювати

— Джейлукманн
джерело

-2

Ви можете спробувати це, я знаю, це не відповіді, які ви шукаєте, але концепція однакова.

Де ви встановлюєте стилі для всіх дітей, а потім видаляєте їх з останньої дитини.

Знімок коду

li
  margin-right: 10px

  &:last-child
    margin-right: 0

Зображення

— Яшу Міттал
джерело

2

Привіт, чи можу я знати, що це за редактор? Це виглядає приємно.

— Занекат

Це невеликий шматок коду, і кожен бажаючий може легко запам'ятати і набрати його.

— Яшу Міттал