CSS add display block all items except some items

Question

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" class="cal-time-events">
<div class="user-day-off-template" *ngFor="let dayOff of dayOffsArrayDayView">
  <div class="users">
    <img class="user-img" src="{{dayOff.photo}}" alt="">
    <div class="name-type">
      <span class="type">{{dayOff.type}}</span>
      <span class="name">{{dayOff.employee_name}}</span>
    </div>
  </div>
</div>

Answer 1

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; }

Answer 2

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

Answer 3

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