how multi circle-progress style on one page

[peebowl]

i tired setup multi circle-progress same examples.

<div class="example">
<div class="example-figure">
<circle-progress class="progress" max="100" value="60"></circle-progress>
</div>

<style>
circle-progress::part(value) {
stroke-width: 6px;
stroke: hsl(320, 80%, 60%);
stroke-dasharray: 4 1;
}

circle-progress::part(circle) {
stroke-width: 6px;
stroke: #eee;
}

circle-progress::part(text) {
font-weight: bold;
fill: hsl(180, 80%, 47%);
}
</style></div>

<div class="example">
<div class="example-figure">
<circle-progress class="progress" max="100" value="60"></circle-progress>
</div>
<style>
circle-progress::part(value) {
stroke-width: 6px;
stroke: hsl(280, 90%, 50%);
stroke-linecap: round;
}

circle-progress::part(circle) {
stroke-width: 2px;
}
</style>
</div>

but circle show same style

[tigrr]

If you specify multiple competing CSS rules for the same selector, the last one wins (read more about cascade in Introducing the CSS Cascade).

In order to target each element separately, you can give them for example different class names.

That and much more about CSS you can learn using MDN Guides on CSS.

[peebowl]

If you specify multiple competing CSS rules for the same selector, the last one wins (read more about cascade in Introducing the CSS Cascade).

In order to target each element separately, you can give them for example different class names.

That and much more about CSS you can learn using MDN Guides on CSS.

thank you circle-progress.cir-2::part(base) { width: 150px; height: 150px; }