Списки с чередующимися цветами для элементов списка

Question

Я делаю приложение todo, с 2 списками: To-Do и Completed Items.Я хочу чередовать цвета фона для обоих этих списков.При добавлении элементов все работает отлично.

Однако, как только я переместил элемент № 2 в завершенный список, это то, что я получаю:

Мой код выглядит следующим образом:

HTML:

<div class = "ItemList">
    {% for todo in todos %}
    <div>
        {% if todo.complete == False %}
            <div class = "item">
                <span id="editable"> {{ todo.todoitem }} </span>
                <div class = "button">
                    <a href = "{{ url_for('complete',idx=todo.id) }}"> <input type = "Button" value = "Done" class="button2"></a>
                    <a href = "{{ url_for('delete',idx=todo.id) }}"> <input type = "Button" value = "Remove" class="button2"> </a>
                </div>
            </div>
        {% endif %}
    </div>
    {% endfor %}
</div>

<h3 style="text-align: center;">Completed Items</h3>
<div class = "CompletedList">
    {% for todo in todos %}
        <div>
        {% if todo.complete == True %}
            <span class = "completed">
                <strike> {{ todo.todoitem }} </strike>
                <span class = "button">
                    <a href = "{{ url_for('complete',idx=todo.id) }}"> <input type = "Button" value = "Move to Incomplete"class="button2"></a>
                    <a href = "{{ url_for('delete',idx=todo.id) }}"> <input type = "Button" value = "Remove" class="button2"> </a>
                </span>
            </span>
        {% endif %}
        </div>
    {% endfor %}
</div>

CSS:

div.ItemList> div:nth-of-type(odd){
    background-color: #adb6be;
}

div.ItemList> div:nth-of-type(even){
    background-color: #eaecee;
}

div.CompletedList> div:nth-of-type(odd){
    background-color: #adb6be;
}

div.CompletedList> div:nth-of-type(even){
    background-color: #eaecee;
}

Как я могу сделать списки чередующимися цветами после модификации?Оба списка должны начинаться с цвета # adb6be и затем чередоваться.Я попытался включить их в один и тот же элемент класса, но это тоже не работает.Любая помощь будет оценена.

Answer 1

Это связано с тем, как вы выводите HTML, для каждого списка вы генерируете все элементы, поэтому nth-потомок все еще применяется к DIV, даже если у него нет содержимого внутри.Вам необходимо настроить HTML:

<div class = "ItemList">
    {% for todo in todos %}
        {% if todo.complete == False %}
            <div class = "item">
                <span id="editable"> {{ todo.todoitem }} </span>
                <div class = "button">
                    <a href = "{{ url_for('complete',idx=todo.id) }}"> <input type = "Button" value = "Done" class="button2"></a>
                    <a href = "{{ url_for('delete',idx=todo.id) }}"> <input type = "Button" value = "Remove" class="button2"> </a>
                </div>
            </div>
        {% endif %}
    {% endfor %}
</div>

<h3 style="text-align: center;">Completed Items</h3>
<div class = "CompletedList">
    {% for todo in todos %}
        {% if todo.complete == True %}
            <span class = "completed">
                <strike> {{ todo.todoitem }} </strike>
                <span class = "button">
                    <a href = "{{ url_for('complete',idx=todo.id) }}"> <input type = "Button" value = "Move to Incomplete"class="button2"></a>
                    <a href = "{{ url_for('delete',idx=todo.id) }}"> <input type = "Button" value = "Remove" class="button2"> </a>
                </span>
            </span>
        {% endif %}
    {% endfor %}
</div>