I am using flask to serve a html service. In this piece of code below:

{% if terms|length > 1 %}
    <div class="term">
    {% for term in terms %}
        {{ term }} &nbsp;&nbsp;
    {% endfor %}
    </div>
{% endif %}

terms is originally a simple list of items ['a', 'b', 'c'].

The current div tag add the same background color to each term as it iterates the values. Now, the terms become a list of tuple with values like the following:

('a': 1)
('b': 2)
('c': 3)

I want to add different colors to a, b, c based on its values: 1, 2, 3. 1 gives one color, 2 gives another color and 3 another color too.

The current stylesheet has one entry:

div.term {
    background-color:mintcream;
} 

How can I achieve this effect with HTML and CSS?

EDIT: Per suggestion, new CSS definition:

div.term.term-count-0 {
    background-color:coral;
}

CodePudding user response：

You define three css

div.term.term-count-1 {
    background-color:coral;
}

div.term.term-count-2 {
    background-color:red;
}

div.term.term-count-3 {
    background-color:black;
}

You can then use the following code:

{% if terms|length > 1 %}

    {% for term, n in terms %}
        <div class="term.term-count-{%n%}">
        {{ term }} &nbsp;&nbsp;
        </div>
    {% endfor %}
{% endif %}