N-й ребенок не меняет цвет для четных и нечетных значений
Это проект Django, в котором я перебираю папки и файлы. Цвет фона каждого файла должен быть разным. Например, нечетные должны быть фиолетовыми, а четные - синими. Но все они отображаются как фиолетовые.
Вот файл div из HTML:
<div class="each_key">{{file}}</div>
Вот стилизация в CSS:
.each_key:nth-child(odd){
text-align: left;
width:197px;
height:42px;
background-color: purple;
padding:10px;
}
.each_key:nth-child(even){
text-align: left;
width:197px;
height:42px;
background-color: blue;
padding:10px;
}
Я также попробовал "nth-of-type", и он все еще дает мне фиолетовый цвет, вместо того, чтобы измениться на фиолетовый, а затем на синий.
Вы можете использовать (2n+1) и (2n)
.each_key:nth-child(2n+1){
text-align: left;
width:197px;
height:42px;
background-color: purple;
padding:10px;
}
.each_key:nth-child(2n){
text-align: left;
width:197px;
height:42px;
background-color: blue;
padding:10px;
}
<div class="each_key"></div>
<div class="each_key"></div>
<div class="each_key"></div>
<div class="each_key"></div>
<div class="each_key"></div>
<div class="each_key"></div>
<div class="each_key"></div>
Похоже, возникла проблема с родительскими div'ами. Вот родительские div'ы. Немного грязновато. Но это лучшее, что удалось сделать.