J Elias J Elias -4 years ago 88
CSS Question

HTML applying style to multiple div in CSS

I'm trying to apply a CSS style to multiple div elements as in the following HTML code:

{% for i in player_range %}
<div id="container-frame-{{ i }}"
...
</div>
{% endfor %}


Where the value of i is variable and being passed to the HTML from the Python side of my software.

Below is the CSS style I'd like to apply for each element.

#container-frame-0{
border-style: solid;
border-width: 5px;
border-color: green;
}


I tried to hardcode the different values of i (e.g, 0,1,2 etc...) to the container-frame style and it works fine. However, I'm searching for a cleaner way to do it.

Ideally I'm looking for something like this:

#container-frame-{{i}}{
border-style: solid;
border-width: 5px;
border-color: green;
}


Where i is the same as in the HTML.
Any idea how to do so?

Answer Source

Give the div a class. Use a class selector.

<div id="container-frame-{{ i }}" class="container-frame"

.container-frame {
    border-style: solid;
    border-width: 5px;
    border-color: green;
}

You could also use an attribute selector.

[id^="container-frame-"] {
    border-style: solid;
    border-width: 5px;
    border-color: green;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download