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'ы. Немного грязновато. Но это лучшее, что удалось сделать.

введите описание изображения здесь

Вернуться на верх