Использование: last-child с селектором классов

Я хочу создать последний/второй .heading.

<ul>
    <li class="heading">Hello world</li>
    <li>Hello world</li>
    <li>Hello world</li>
    <li class="heading">Hello world</li>
    <li>Hello world</li>
</ul>

Ни

ul li.heading:last-child {
    background: black;
}

ни

ul li.heading:nth-child(2) {
    background: black;
}

работает для меня. Почему и как я могу применять стили к этому <li>? Кажется, что селекторы псевдокласса не работают с селекторами классов. Что странно, поскольку я мог бы поклясться, что использовал его раньше.

Обновление: Ой, полностью забыл jsfiddle.

Ответ 1

Ваше выражение было следующим: "Я хочу создать последний/второй .heading".

Это означало бы, что вам нужно написать свой код следующим образом:

<ul>
    <li class="heading">Hello world</li>
    <li class="heading">Hello world</li>
    <li class="heading">Hello world</li>
    <li class="heading">Hello world</li>
    <li class="heading">Hello world</li>
</ul>

И CSS:

ul li.heading:last-child {
    background: black;
}
ul li.heading:nth-child(2) {
    background: black;
}

Else, с вашим текущим html-кодом, вы должны написать:

ul li.heading:nth-child(4) {
    background: black;
}
ul li.heading:nth-child(1) {
    background: black;
}

Я понимаю вашу мысль, но lis с классом "заголовок" - это не второй или последний ребенок.

Ответ 2

Это потому, что li.heading не является последним и не является вторым потомком. Это первый и четвертый дочерние элементы ul

Попробуйте:

  ul li.heading:nth-child(4) {
    background: black;
}

Ответ 3

ul li.heading:nth-last-child(2)

2 означает, что вы знаете, сколько из <li> после заголовка < li class= " > в нашем случае это второй снизу.