Manage opacity only to the first div parent that contains a * ngFor

Question

I'm trying to make opaque the first div which contains an additional div with an icon and a h5. All that is in the second div I would like it to remain with opacity: 1 (ie without opacity)

this is the HTML code:

<div class="row clearfix">
    <div class="col-lg-3 col-md-6 col-sm-12 mb-30 parent" (click)="click(item)" *ngFor="let item of services">
      <div class="pd-30 bg-secondary border-radius-4 box-shadow text-center height-100-p child">
        <div style="margin-top: 30px">
          <i class="{{item.icon_class}}" style="font-size:40px;" aria-hidden="true"></i>
        </div>
        <h5 class="pt-20 mb-30" style="white-space: normal;">{{item.title}}</h5>
      </div>
    </div>
</div>

CSS:

.parent{
    opacity: 0.3;
}

.child{
    background-color:rgba(0,0,0,1);
}

and this is the current situation:

on the net I have found examples that close first the first div and I can not do it because the for loop is present (* ngFor)

tips?

Among other things, I will also have to implement a function that allows the user to manage the percentage of opacity (this is because each user will have a different background and therefore some will have to adjust the opacity).

thank you all!

Answer 1

sorry for the delay guys and thank you all for the answers!

I tried all but without success, in the end I solved optimally (I think), short code and using 'rgba' works.

I created various css classes with the degree of opacity:

 /* opacity_level */
.opacity20 {
  background: rgba(255,255,255,0.2) !important;
}
.opacity30 {
  background: rgba(255,255,255,0.3) !important;
}
.opacity40 {
  background: rgba(255,255,255,0.4) !important;
}
.opacity50 {
  background: rgba(255,255,255,0.5) !important;
}
.opacity60 {
  background: rgba(255,255,255,0.6) !important;
}
.opacity70 {
  background: rgba(255,255,255,0.7) !important;
}
.opacity80 {
  background: rgba(255,255,255,0.8) !important;
}
.opacity90 {
  background: rgba(255,255,255,0.9) !important;
}
.opacity100 {
  background: rgba(255,255,255,1) !important;
}

I then declared a variable OpacitiyClass that will take the value (class name css) that the user will select from the settings page:

opacityClass: string = configuration.opacity_class;

and i pass it directly in html:

      <div class="row clearfix">
        <div class="col-lg-3 col-md-6 col-sm-12 mb-30" (click)="click(item)"
                *ngFor="let item of services">
          <div class="pd-30 {{opacityClass}} border-radius-4 box-shadow text-center height-100-p">
            <i class="{{item.icon_class}}" style="font-size:40px;" aria-hidden="true"></i>
            <h5 class="pt-20 mb-30" style="white-space: normal;">{{item.title}}</h5>
          </div>
        </div>
      </div>

I hope it helps someone!

thanks again to everyone!

Answer 2

• use ngClass to give the class to the div with a condition

<div class="row clearfix">
  <div [ngClass]="{'parent':idx==0}" class="col-lg-3 col-md-6 col-sm-12 mb-30" (click)="click(item)" *ngFor="let item of services;let idx = index">
    <div class="pd-30 bg-secondary border-radius-4 box-shadow text-center height-100-p child">
      <div style="margin-top: 30px">
        <i class="{{item.icon_class}}" style="font-size:40px;" aria-hidden="true"></i>
      </div>
      <h5 class="pt-20 mb-30" style="white-space: normal;">{{item.title}}</h5>
    </div>
  </div>
</div>

• Or use the first child CSS selector:

<div class="row clearfix">
    <div class="col-lg-3 col-md-6 col-sm-12 mb-30 parent" (click)="click(item)" *ngFor="let item of services">
      <div class="pd-30 bg-secondary border-radius-4 box-shadow text-center height-100-p child">
        <div style="margin-top: 30px">
          <i class="{{item.icon_class}}" style="font-size:40px;" aria-hidden="true"></i>
        </div>
        <h5 class="pt-20 mb-30" style="white-space: normal;">{{item.title}}</h5>
      </div>
    </div>
</div>

css :

parent:first-child {
  opacity: 0.3;
}

---

• if you want the user to manage the percentage of opacity you make a TS variable that represent the opacity than use it in the ngStyle Exmple :

opacity=0.3;

HTML :

<div class="row clearfix">
  <div [ngStyle]="{'opacity':idx==1 ?opacity:1}" class="col-lg-3 col-md-6 col-sm-12 mb-30" (click)="click(item)" *ngFor="let item of services;let idx = index">
    <div class="pd-30 bg-secondary border-radius-4 box-shadow text-center height-100-p child">
      <div style="margin-top: 30px">
        <i class="{{item.icon_class}}" style="font-size:40px;" aria-hidden="true"></i>
      </div>
      <h5 class="pt-20 mb-30" style="white-space: normal;">{{item.title}}</h5>
    </div>
  </div>
</div>

{opacity':idx==1 ?opacity:1} means give opacity of opacity variable if it's the firs element else give it opacity of 1

and the user the ability to control the TS varible

Answer 3

you can use 1 property in each object in the services array, and use it in every iteration to decide which style or which class to apply

    <div class="row clearfix">
        <div class="col-lg-3 col-md-6 col-sm-12 mb-30 parent" (click)="click(item)" *ngFor="let item of services">
          <div class="pd-30 bg-secondary border-radius-4 box-shadow text-center height-100-p child" [ngClass]="item.isFirstChild ? 'apply-opacity' : ''">
            <div style="margin-top: 30px">
             <i class="{{item.icon_class}}" style="font-size:40px;" aria-hidden="true"></i>
        </div>
        <h5 class="pt-20 mb-30" style="white-space: normal;">{{item.title}}</h5>
      </div>
    </div>
</div>

Answer 4

Several solutions :

• Use *ngFor itself :

  <div class="col-lg-3 col-md-6 col-sm-12 mb-30" (click)="click(item)" *ngFor="let item of services; let isFirst = first">
    <div class="pd-30 bg-secondary border-radius-4 box-shadow text-center height-100-p child" [class.parent]="isFirst">
  

• Use a CSS selector, :first-child

  parent div:first-child {
    opacity: 0.3;
  }
  

Answer 5

You can use :first-child selector on .parent in css