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

Question

Я хочу, чтобы стиль последней / второй .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 .

Answer 1

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

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

<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;
}

Иначе, с вашим текущим html-кодом вы написали бы:

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

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

Answer 2

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

2 означает, что вы знаете, сколько из

после вашегов нашем случае это второй снизу.

Answer 3

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

Попробуйте:

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