CSS nth-child выберите все, кроме последнего элемента, когда длина неизвестна

UPDATE: ссылка на скрипку, которую я опубликовал, теперь имеет рабочий код. :not(:last-child) и :nth-last-child(n + 2) оба работают отлично.

Я пытаюсь использовать nth-child или nth-last-child селектор для выбора каждого li на ul за исключением последнего. Улов, длина списка может варьироваться от 1 до 5 элементов. Я не смог найти любую документацию или примеры как это сделать.

вот HTML для ul:

<ul class="breadcrumbs">
    <li>
        <a href="/">Home</a>
    </li>
    <li>
        <a href="/categories/1">Articles</a>
    </li>
    <li>
        <a href="/categories/6">Specials</a>
    </li>
    <li class="current">
        <a href="/categories/6/articles/21">Song Lyrics</a>
    </li>
</ul>

вот мой текущий код:

ul > li:nth-last-child(-1n+4) > a:hover {
  color: red;
}

этот код по-прежнему выбирает последний элемент в списке. Я также пробовал код ниже, но это ничего не выбирает. Я попробовал несколько других комбинаций, но они либо не работали вообще, либо выбрали последний элемент.

ul > li:nth-child(1):nth-last-child(2) > a:hover {
  color: red;
}

вот скрипка.

8
css css-selectors

3 ответов

использовать :not(:last-child) для всех, кроме последнего.

http://jsfiddle.net/96nd71e3/1/

31

использовать :nth-last-of-type или :nth-last-child

http://jsfiddle.net/t0k8gp4d/

li:nth-last-of-type(n + 2) a {
    color: red;
}
<ul class="breadcrumbs">
    <li>
        <a href="/">Home</a>
    </li>
    <li>
        <a href="/categories/1">Articles</a>
    </li>
    <li>
        <a href="/categories/6">Specials</a>
    </li>
    <li class="current">
        <a href="/categories/6/articles/21">Song Lyrics</a>
    </li>
</ul>
4

вы можете использовать этот

<ul class="breadcrumbs">
    <li>
        <a href="/">Home</a>
    </li>
    <li>
        <a href="/categories/1">Articles</a>
    </li>
    <li>
        <a href="/categories/6">Specials</a>
    </li>
    <li class="current">
        <a href="/categories/6/articles/21">Song Lyrics</a>
    </li>
</ul>

в CSS

ul > li{
background:red;
}
ul > li:last-child{
background:black;
}

но если вам абсолютно необходимо изменить свой стиль вне основного элемента li, используйте это

ul > li{
background:black;
}
ul > li:not:last-child{
background:red;
}
0