2

Есть 10 элементов в списке. 1, 2, n, ..., 10. Необходимо разделить список так, чтобы стили применялись на: 1,2,5,6,9,10 элемент. Другой стиль применялся на 3,4,7,8 элемент. Есть ли способ сделать так? Выгрузка данных происходит на сервере, элементов может быть и 100, я написал к примеру от 1 до 10.

2

2 ответа 2

4

Вам поможет :nth-child()

#colored div:nth-child(1),
#colored div:nth-child(2),
#colored div:nth-child(4) {
    background-color: gray;
}

#colored div:nth-child(3),
#colored div:nth-child(6),
#colored div:nth-child(8) {
    background-color: wheat;
}

#colored div:nth-child(5),
#colored div:nth-child(7),
#colored div:nth-child(9) {
    background-color: cyan;
}
<div id="colored">
  <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
  <div>6</div><div>7</div><div>8</div><div>9</div>         
</div>
в котором можно еще и выражения задать:

#colored div:nth-child(4n),
#colored div:nth-child(4n-1){
    background-color: red;
}

#colored div:nth-child(4n-2),
#colored div:nth-child(4n-3) {
    background-color: cyan;
}
<div id="colored">
  <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
  <div>6</div><div>7</div><div>8</div><div>9</div>         
</div>

8
  • У меня может быть их будет 20 или 30
    – Zebren
    17 мая 2019 в 10:01
  • @Zebren дополнил ответ 17 мая 2019 в 10:02
  • @Zebren я ссылку в коменты скинул...ntd-child может принимать выражение...осталось определить закономерность 17 мая 2019 в 10:03
  • Вот я и хочу понять, как сделать выражение так, чтобы 2 через 2 применялся класс, пока решения не нашел, решил обратиться сюда, может кто делал
    – Zebren
    17 мая 2019 в 10:04
  • @Zebren например 2 красных потом 2 зеленых? 17 мая 2019 в 10:04
0

Если вопрос в описании закономерности, то условие (при нумерации с 1) может выглядеть так:

if ((idx - 1) % 4  < 2)  
    первый cтиль
else
  второй

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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