CODEWITHSUNDEEP
csshtml
Mihika
Mihika

Reputation: 535

Lists with alternating colours for the list items

I am making a todo app, with 2 lists: To-Do and Completed Items. I want alternating background colors for both these lists. While adding the items, everything works fine.

enter image description here

However, as soon as I move Item #2 to the completed list, this is what I get:

enter image description here

My code is as follows:

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;
}

How can I make the lists appear with alternating colors after modification? Both lists should start with the color #adb6be and then alternate. I have tried including them within the same class element, but that doesn't work either. Any help will be appreciated.

Upvotes: 0

Views: 241

Answers (1)

Ginger Wizard
Ginger Wizard

Reputation: 717

This is due to the way that you are outputting the HTML, for each list you are generating all items so the nth-child is still being applied to the DIV even if it has no content inside. You would need to adjust the 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>

Upvotes: 1

Related Questions