HTML applying style to multiple div in CSS

Question

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?

what you want is not possible with css, you have to use css preprocessor, like sass or less, alternatively you could add a class to your div ` — azs06, Feb 28 '17 at 15:01
@azs06 — Don't use comments to give answers. Especially wrong answers. — Quentin, Feb 28 '17 at 15:01

score 6 · Accepted Answer · answered Feb 28 '17 at 14:59

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

Daniel Lagiň · Answer 2 · 2017-02-28T15:03:57.170

2

Use @Quentin approach or use this selector in your CSS:

div[id^="container-frame-"]{ ... }

edited Feb 28 '17 at 15:03

answered Feb 28 '17 at 15:00

Daniel Lagiň

698
7
18

1

"Or"? Who are you replying to? – Quentin Feb 28 '17 at 15:02
@Quentin I was replying to you. Edited my response to be more clear. – Daniel Lagiň Feb 28 '17 at 15:06
1

Well (a) I already suggested the attribute selector and (b) Answers are supposed to stand alone. Stackoverflow isn't a forum. – Quentin Feb 28 '17 at 15:07
@Quentin Sorry I haven´t seen you edited and added exactly same answer as I did. I saw only that part that contains class selector. – Daniel Lagiň Feb 28 '17 at 15:13

score 0 · Answer 3 · answered Feb 28 '17 at 15:04

0

use class for mulitple elements, because id its just for on element

<div class="myClass"></div>
<div class="myClass"></div>

And in CSS:

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

answered Feb 28 '17 at 15:04

B.Denis

23
8

score -1 · Answer 4 · answered Feb 28 '17 at 15:02

So, your current code is not working because id's should only apply to one element. Try giving each div a class, and then style them like this:

/* Notice use of dot instead of hash */
.whatever-name-you-want {
   border-style: solid;
   border-width: 5px;
   border-color: green;
}

You can read up on this here: https://www.w3schools.com/css/css_syntax.asp

score -1 · Answer 5 · edited May 23 '17 at 12:25

-1

As mentioned by others, you could use a class but alternatively you can use an attribute selector.

 div[id^="container-frame-"], div[id*=" container-frame-"] {
    border-style: solid;
     border-width: 5px;
     border-color: green;
 }

Please see this question for more detail: wildcard * in CSS for classes

edited May 23 '17 at 12:25

Community

1
1

answered Feb 28 '17 at 15:02

Naqash Tanzeel

103
2
8

HTML applying style to multiple div in CSS

5 Answers5