CSS CSS-ning bir nechta diviga uslubni qo'llash

Quyidagi HTML-kodda bo'lgani kabi bir necha div elementlariga CSS stilini qo'llashga harakat qilaman:

{% 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?

0
<div id = "container-frame - {{i}}" class = class = "container frame" va sinfdan foydalanib CSS-ni qo'shing. .container-frame {}
qo'shib qo'ydi muallif azs06, manba
<div id = "container-frame - {{i}}" class = class = "container frame" va sinfdan foydalanib CSS-ni qo'shing. .container-frame {}
qo'shib qo'ydi muallif azs06, manba
@ azs06 - javob berish uchun sharhlardan foydalanmang. Ayniqsa noto'g'ri javoblar.
qo'shib qo'ydi muallif Quentin, manba
@ azs06 - javob berish uchun sharhlardan foydalanmang. Ayniqsa noto'g'ri javoblar.
qo'shib qo'ydi muallif Quentin, manba

10 javoblar

Bo'limga sinf bering. Sinf tanlash vositasidan foydalaning.

<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;
}
6
qo'shib qo'ydi

Bo'limga sinf bering. Sinf tanlash vositasidan foydalaning.

<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;
}
6
qo'shib qo'ydi

@Suentin yondashuvidan foydalaning yoki CSS-dan ushbu tanlovdan foydalaning:

div[id^="container-frame-"]{ ... }
2
qo'shib qo'ydi
"Yoki"? Kimga javob berasiz?
qo'shib qo'ydi muallif Quentin, manba
Xo'sh, (a) atributni tanlashni taklif qildim va (b) javoblar yolg'iz qolishi kerak. Stackoverflow forum emas.
qo'shib qo'ydi muallif Quentin, manba
@Suentin sizga javob berdim. Mening javobim yanada aniqroq bo'lishi uchun tahrir qilingan.
qo'shib qo'ydi muallif Daniel Lagiň, manba
@Quentin Kechirasiz, men sizni tahrir qilmadim va xuddi shunday javobni qo'shdim. Faqat sinchkovlik bilan tanlangan qismni ko'rdim.
qo'shib qo'ydi muallif Daniel Lagiň, manba

@Suentin yondashuvidan foydalaning yoki CSS-dan ushbu tanlovdan foydalaning:

div[id^="container-frame-"]{ ... }
2
qo'shib qo'ydi
"Yoki"? Kimga javob berasiz?
qo'shib qo'ydi muallif Quentin, manba
Xo'sh, (a) atributni tanlashni taklif qildim va (b) javoblar yolg'iz qolishi kerak. Stackoverflow forum emas.
qo'shib qo'ydi muallif Quentin, manba
@Suentin sizga javob berdim. Mening javobim yanada aniqroq bo'lishi uchun tahrir qilingan.
qo'shib qo'ydi muallif Daniel Lagiň, manba
@Quentin Kechirasiz, men sizni tahrir qilmadim va xuddi shunday javobni qo'shdim. Faqat sinchkovlik bilan tanlangan qismni ko'rdim.
qo'shib qo'ydi muallif Daniel Lagiň, manba

Boshqalar tomonidan aytilganidek, siz sinfdan foydalanishingiz mumkin, lekin muqobil ravishda siz tanlagichni tanlashingiz mumkin.

 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

1
qo'shib qo'ydi

Boshqalar tomonidan aytilganidek, siz sinfdan foydalanishingiz mumkin, lekin muqobil ravishda siz tanlagichni tanlashingiz mumkin.

 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

1
qo'shib qo'ydi

Shunday qilib, sizning joriy kodingiz ishlamaydi, chunki idlar faqat bitta elementga tegishli bo'lishi kerak. Har bir divni bir sinfga berishga harakat qiling va shunday qilib ularni shunday uslubda sinab ko'ring:

/* 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

1
qo'shib qo'ydi

Shunday qilib, sizning joriy kodingiz ishlamaydi, chunki idlar faqat bitta elementga tegishli bo'lishi kerak. Har bir divni bir sinfga berishga harakat qiling va shunday qilib ularni shunday uslubda sinab ko'ring:

/* 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

1
qo'shib qo'ydi

Mulitle elementlari uchun sinfdan foydalaning, chunki uning elementi faqat element uchun

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

Va CSS-da:

.myClass{
            border-style: solid;
            border-width: 5px;
            border-color: green;
}
0
qo'shib qo'ydi

Mulitle elementlari uchun sinfdan foydalaning, chunki uning elementi faqat element uchun

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

Va CSS-da:

.myClass{
            border-style: solid;
            border-width: 5px;
            border-color: green;
}
0
qo'shib qo'ydi