CSS n'th class in another class - html

Question

I just started to FE after a couple of years in BE.
Developing an analytics card with using Angular on FE and .net Core on BE.
Stucked on a point to find out the best practice about to change background-color: property of a class beneath of main class.
<div class="row">
<div class="journey-card-bottom">
<div *ngFor="let bottom of top.breakDown | keyvalue: originalOrder">
<div>
<span>{{bottom.key}}</span>
</div>
<div class="row">
<div class="col-lg-10">
<div class="progress">
<div class="progress-bar" role="progressbar"
[ngStyle]="{'width': bottom.value > 0 ? bottom.value + '%' : '8px'}"></div>
<span class="percentage-value">{{bottom.value}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
Screenshot to the desired outcome
In my CSS;
.journey-card-bottom {
border: 1px solid #DADCDD;
box-sizing: border-box;
padding: 10px;
line-height: 3;
width: 100%;
height: 435px;
}
.progress {
background-color: white !important;
margin-top: 5px;
}
.progress-bar {
border-radius: 0.25rem;
height: 8px;
align-self: center;
background-color: #0B4886;
}
.journey-card-bottom .progress-bar:nth-of-type(1) {
background-color: #68D391;
}
.journey-card-bottom .progress-bar:nth-of-type(2) {
background-color: #FCAF65;
}
It seems :nth-of-type(1) changes the background color but not only for 1st bar, for all of them.
:nth-of-type(2)does not effect at all i guess because there is no direct parent-child relation between each other.
On the other hand i know i can achieve with using [ngStyle] based on the item index in [ngFor] however i'm not sure if it's the best practice or not.

Answer 1

:nth-of-type() applies to sibling elements. Since .progress-bar is the first sibling within .progress and has no other siblings with the class .progress-bar, only the styles declared in .journey-card-bottom .progress-bar:nth-of-type(1) will be applied. Here is a code snippet showing your CSS working by changing the HTML structure:
.journey-card-bottom {
border: 1px solid #DADCDD;
box-sizing: border-box;
padding: 10px;
line-height: 3;
width: 100%;
height: 435px;
}
.progress {
background-color: white !important;
margin-top: 5px;
}
.progress-bar {
border-radius: 0.25rem;
height: 8px;
align-self: center;
background-color: #0B4886;
}
.journey-card-bottom .progress-bar:nth-of-type(1) {
background-color: #68D391;
}
.journey-card-bottom .progress-bar:nth-of-type(2) {
background-color: #FCAF65;
}
<div class="journey-card-bottom">
<div class="progress">
<div class="progress-bar" role="progressbar"></div>
<span class="percentage-value">90</span>
<div class="progress-bar" role="progressbar"></div>
<span class="percentage-value">60</span>
</div>
</div>
To solve your issue, I would suggest using :nth-of-type() on the top-level element of the for loop. In the below example, the top-level element has the class .target-class:
.journey-card-bottom {
border: 1px solid #DADCDD;
box-sizing: border-box;
padding: 10px;
line-height: 3;
width: 100%;
height: 435px;
}
.progress {
background-color: white !important;
margin-top: 5px;
}
.progress-bar {
border-radius: 0.25rem;
height: 8px;
align-self: center;
background-color: #0B4886;
}
.target-class:nth-of-type(1) .progress-bar {
background-color: #68D391;
}
.target-class:nth-of-type(2) .progress-bar {
background-color: #FCAF65;
}
<!-- Rendered HTML from the component -->
<div class="row">
<div class="journey-card-bottom">
<div class="target-class">
<div>
<span>Passed</span>
</div>
<div class="row">
<div class="col-lg-10">
<div class="progress">
<div class="progress-bar" role="progressbar"></div>
<span class="percentage-value">90</span>
</div>
</div>
</div>
</div>
<div class="target-class">
<div>
<span>Referred</span>
</div>
<div class="row">
<div class="col-lg-10">
<div class="progress">
<div class="progress-bar" role="progressbar"></div>
<span class="percentage-value">60</span>
</div>
</div>
</div>
</div>
</div>
</div>