2

Ребята, я новичок и пытаюсь изучать css. Сейчас изучаю селектор nth-child. У меня есть список, где первым идет красный цвет, вторым - желтый, а третьим зеленый. Хочу сделать так, чтобы при добавлении новых элементов они также становились цветными в заданной последовательности.

li:nth-child(1n) {
  background-color: red;
}

li:nth-child(2n) {
  background-color: yellow;
}

li:nth-child(3n) {
  background-color: green;
}
<ul>
  <li>Красный</li>
  <li>Желтый</li>
  <li>Зеленый</li>
  <li>Новый цвет</li>
</ul>

Но когда я к этим трем добавляю четвертую лишку, то она становится не красной, а желтой. И в инспекторе браузера почему то красный цвет зачеркнут. Почему так?

1
  • если зачеркнут, значит какой то другой стиль его переписывает. посмотрите в инспекторе ниже 5 авг 2019 в 14:47

1 ответ 1

4

На сколько я смог понять вопрос - Вы не верно трактуете указание внутри скобок у nth-child.

:nth-child(3n+1) итд это то что Вы ищите

В этой директиве написано что надо красить каждый третий + 1 элемент.

div {
  display: inline-block;
  height: 50px;
  width: 50px;
}

div:nth-child(3n+1) {
  background-color: skyblue;
}

div:nth-child(3n+2) {
  background-color: teal;
}

div:nth-child(3n) {
  background-color: wheat;
}
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.