CSS add display block all items except some items-CodePudding

I have this div where I'm displaying some images, Can I add display: none to all items except first, second, and third?

  <ng-template #customDayTemplateHover let-day="day" >
<div  *ngFor="let dayOff of dayOffsArrayDayView">
  <div >
    <img  src="{{dayOff.photo}}" alt="">
    <div >
      <span >{{dayOff.type}}</span>
      <span >{{dayOff.employee_name}}</span>
    </div>
  </div>
</div>

CodePudding user response：

You can use functional notation with the nth-of-type selector to do this.

For example :

ul li:nth-of-type(1n 4) { display: none; }

CodePudding user response：

You can use the nth-child selector https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

CodePudding user response：

you can add attribute class to define a property css: https://www.w3schools.com/html/html_classes.asp

You can do a validate to know in what element going was this class