Есть 10 элементов в списке. 1, 2, n, ..., 10. Необходимо разделить список так, чтобы стили применялись на: 1,2,5,6,9,10 элемент. Другой стиль применялся на 3,4,7,8 элемент. Есть ли способ сделать так? Выгрузка данных происходит на сервере, элементов может быть и 100, я написал к примеру от 1 до 10.
2 ответа
Вам поможет :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>
-
-
-
@Zebren я ссылку в коменты скинул...ntd-child может принимать выражение...осталось определить закономерность 17 мая 2019 в 10:03
-
Вот я и хочу понять, как сделать выражение так, чтобы 2 через 2 применялся класс, пока решения не нашел, решил обратиться сюда, может кто делал– Zebren17 мая 2019 в 10:04
-
Если вопрос в описании закономерности, то условие (при нумерации с 1) может выглядеть так:
if ((idx - 1) % 4 < 2)
первый cтиль
else
второй
классы
или псевдоклассэлемент:nth-child(odd | even | <число> | <выражение>) {...}