CSS: не (: last-child): после селектора


370

У меня есть список элементов, которые оформлены так:

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>

Выходы One | Two | Three | Four | Five |вместоOne | Two | Three | Four | Five

Кто-нибудь знает, как CSS выбрать все, кроме последнего элемента?

Вы можете увидеть определение :not()селектора здесь


1
Такое поведение кажется ошибкой в ​​Chrome 10. У меня работает в Firefox 3.5.
Дури

6
На самом деле, в 2018 году только что запустил сниппет с последним Chrome и работал как положено.
18:13

Ответы:


433

Если это проблема с неселектором, вы можете установить их все и переопределить последний

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

или если вы можете использовать раньше, нет необходимости для последнего ребенка

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

12
На самом деле это единственный способ заставить его работать еще в IE8 (извините, нет читов для 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, которая, похоже, не поддерживает last-child. Канарская сборка делает. Спасибо за ответ
Мэтт Кларксон

Похоже, что Chrome не поддерживает его даже в 2013 году?
MikkoP



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>

Преимущество третьего способа заключается в том, что вам не нужно указывать тип документа, а jQuery позаботится о совместимости.


6
<! DOCTYPE html> - это новый стандарт HTML5.
Мэтт Кларксон

1
Это удивительный и современный способ справиться с этим. Я боролся с последним ребенком, потом я нашел твой ответ. Этот идеален! : not (: last-of-type): после
Firze

1

Удалить: до последнего ребенка и: после и использовать

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

Надеюсь, это должно работать


-2

Вы можете попробовать это, я знаю, это не ответы, которые вы ищете, но концепция та же самая.

Где вы устанавливаете стили для всех дочерних элементов, а затем удаляете их из последнего дочернего элемента.

Фрагмент кода

li
  margin-right: 10px

  &:last-child
    margin-right: 0

Образ

введите описание изображения здесь


2
Привет, могу я узнать, что это за редактор, пожалуйста? Это выглядит мило.
Zanecat

Это небольшой кусок кода, и любой может легко запомнить и напечатать его.
Яшу Миттал
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.