Почему не изменяется цвет последнего слова?

Question

[Hahaz]

<ul class="menu">
                <li><a href="#">Главная</a></li>
                <li><a href="#">О нас</a></li>
                <li><a href="#">Наши проекты</a></li>
                <li><a href="#">Цены на ремонт</a></li>
                <li><a href="#">Отзывы клиентов</a></li>
                <li><a href="#">Расчет стоимости</a></li>
                <li><a href="#">Контакты</a></li>
                <p class="set-question">Задать вопрос</p>
                <div class="svg-icons">
                <img src="img/Vector(4).svg" alt="">
                <img src="img/Vector(1)(1).svg" alt="">
                <img src="img/Vector(2)(1).svg" alt="">
                <img src="img/Vector(3)(1).svg" alt="">
                </div>
            </ul>

.set-question {
    position: relative;
    color: #000000;
    top: 10%;
    font-size: 18px;
}

.menu li:last-child{
    color: #F05A26;
}


@media screen and (max-width: 1920px) {
    .burger-menu {
        display: flex;
    }

    .menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 50px;
        left: 20px;
        background-color: #00000010;
        padding: 10px;
        height: 60%;
    }

    .menu.active {
        display: flex;
    }

}

есть псевдокласс к последнему элементу, но почему то цвет не поменялся

Answer 1

[Дмитрий]

1. Внутри UL можно только LI на первом уровне
2. :last-child применяется к последнему элементу без фильтрации по тегу / классу, а у вас там последний div

Answer 2

[Rsa97]

li:last-child означает элемент li, который является последним потомком своего родителя. У вас последний потомок - div.

Comments

[Дмитрий]

Вы не совсем правы. Последний потомок берется на первом уровне вложенности. А это div.

[Rsa97]

Дмитрий, Действительно. В коде всё на одном уровне, вот и не обратил внимания.

Answer 3

[Сергей delphinpro]

<ul class="menu">
  <li><a href="#">Главная</a></li>
  <li><a href="#">О нас</a></li>
  <li><a href="#">Наши проекты</a></li>
  <li><a href="#">Цены на ремонт</a></li>
  <li><a href="#">Отзывы клиентов</a></li>
  <li><a href="#">Расчет стоимости</a></li>
  <li><a href="#">Контакты</a></li>
  <li class="set-question">Задать вопрос</li>
  <li class="svg-icons">
    <img src="img/Vector(4).svg" alt="icon 1">
    <img src="img/Vector(1)(1).svg" alt="icon 2">
    <img src="img/Vector(2)(1).svg" alt="icon 3">
    <img src="img/Vector(3)(1).svg" alt="icon 4">
  </li>
</ul>

li:nth-last-child(3) a {
  color: red;
}