Почему у ссылок не работает nth-child?

Question

1. Первый пример - все работает

.block > ul li:nth-child(3) {
  color: red;
}

<div class="block">
  <ul>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
  </ul>
</div>

2. Второй пример с ссылками - ничего не работает

.block > ul li a:nth-child(3) {
  color: red;
}

<div class="block">
  <ul>
    <li><a href="">text</a></li>
    <li><a href="">text</a></li>
    <li><a href="">text</a></li>
    <li><a href="">text</a></li>
    <li><a href="">text</a></li>
    <li><a href="">text</a></li>
  </ul>
</div>

В чем может быть ошибка?

Answer 1

a:nth-child(3) - это "элемент а, который является третьим дочерним элементом". Вам же нужно li:nth-child(3) a - "а, который находиться в li, который является третьим дочерним элементом"

.block > ul li:nth-child(3) a {
  color: red;
}

<div class="block">
  <ul>
    <li><a href="">text</a></li>
    <li><a href="">text</a></li>
    <li><a href="">text</a></li>
    <li><a href="">text</a></li>
    <li><a href="">text</a></li>
    <li><a href="">text</a></li>
  </ul>
</div>

БЛОГ НА HUSL

Почему у ссылок не работает nth-child?

Ответы (1 шт):