Кто-нибудь может объяснить, из-за чего не работает nth-child, last-child и т. д?

Question

Кто-нибудь может объяснить, из-за чего не работает nth-child, last-child и т. д?

Nikita Ermolenko Мастер (2442), закрыт 4 года назад

Вот пример кода:
HTML
Project Name Facebook Marketing
CSS
.work__text{
text-align: center;
}
.work__text i{
color:#f9afac;
font-size: 36px;
}
.work__text p{
color:#fff;
font-family: 'Nanum Gothic', sans-serif;
font-weight: bold;
}
.work_text :last-child {
font-size: 26px;
}

Короче, нужно, чтобы последний абзац взял размер шрифта 26px

Answer 1

Ошибка должно быть в HTML как-раз)

nth-child(число) захватывает элемент только если элемент находится именно под этим номером среди дочерних элементов его родителя.

Т. е.

p:nth-child(1) { color: red }

<div><p> тест </p></div>
<div><p> тест </p></div>
<div><p> тест </p></div>
<div><p> тест </p></div>

Такой код покрасит все параграфы, т. к. везде они 1-е у своего родителя.

Answer 2

Максим Искусственный Интеллект (198727) 4 года назад

Что-то типа.

.parent:last-child .work_text {
font-size: 26px;
}