CSS n'th class in another class

user_6653960 0
Viewed 65

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.

angular frontend css html
1 Answers

: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>

user_117158890
Related