Не работает :last-of-type

Question

Не работает :last-of-type

Рейтинг: 0Ответов: 1Опубликовано: 09.03.2023

В htm моя сетка построена так - в footer в блоке nav, я создал список из однотипны элементов, также они еще являются ссылками

<nav class="footer__links">
    <ul class="footer__link-list">
        <li><a class="footer__link" href="#" target="_blank">Карты</a></li>
        <li><a class="footer__link" href="#" target="_blank">Погода</a></li>
        <li><a class="footer__link" href="#" target="_blank">Расписание</a></li>
        <li><a class="footer__link" href="#" target="_blank">Календарь</a></li>
        <li><a class="footer__link" href="#" target="_blank">Путешествия</a></li>
    </ul>
</nav>

И мне необходимо последнему элементу убрать отступ: :last-of-type, :last-child, :nth-last-of-type() и другие не работают.

Ведь last-of-type анализирует html, в силу того, что у меня каждый тег "а" обернут в li он не работает. Подскажите, пожалуйста, как можно решить эту задачу?

html css3

Источник: Stack Overflow на русском

Answer 1

▲ 0

Просто обращайтесь не к a:last-child, а к li:last-child

a {
  color: black;
  text-decoration: none;
}

.footer__link-list li:last-child .footer__link {
  color: orange;
  font-weight: bold;
}

<ul class="footer__link-list">
  <li><a class="footer__link" href="#" target="_blank">Карты</a></li>
  <li><a class="footer__link" href="#" target="_blank">Погода</a></li>
  <li><a class="footer__link" href="#" target="_blank">Расписание</a></li>
  <li><a class="footer__link" href="#" target="_blank">Календарь</a></li>
  <li><a class="footer__link" href="#" target="_blank">Путешествия</a></li>
</ul>

Потому что у li нет других child-ов кроме a

Если бы в li были несколько узлов, тогда бы a:last-child применялся к тегам a которые находятся последними

Не работает :last-of-type

Ответы