Использование: последнего дочернего элемента с селектором класса

#css

Вопрос:

Я хочу оформить последний / второй .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. Я не верю, что есть способ, которым вы можете выбрать дочерний элемент класса с помощью этих селекторов псевдоклассов. Это всегда 4-й заголовок в списке или это всегда 2-й экземпляр class .heading, который вы хотите оформить? Если всегда 4-й, приведенный ниже ответ должен работать нормально, хотя вы также можете использовать n-й тип.

2. Вы усложняете себе жизнь, если не решите эту проблему на уровне разметки / семантики / html. Использование вложенных ul s позволит вам делать именно то, что вы хотите, с селекторами CSS2.

Ответ №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;
}

Я понимаю вашу мысль, но lis с классом «заголовок» не является вторым или последним дочерним элементом.

Ответ №2:

вы можете использовать ul li.heading:nth-of-type , он будет учитывать только класс заголовка в соответствии с вашим html css

 li.heading:nth-of-type(2){ background: black;}

или

 li.heading:last-of-type{ background: black;}

1. Это фактический ответ на вопрос OP «Я хочу оформить последний / второй .заголовок, как я могу это сделать». Другие ответы только объясняют, почему то, что он делает, не работает.

2. Это тоже не работает. Они выбирают 2-й или последний элемент li, ТОЛЬКО ЕСЛИ он ТАКЖЕ имеет класс .heading . Он не просто выбирает 2-й / последний элемент li.heading.

3. Это похоже на правильный ответ, но это не так. @bjscollura прав.

Ответ №3:

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

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

Ответ №4:

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

Попробуйте это:

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