:first-child with ng-repeat

Question

I have an ng-repeat and only want to apply a style to the first div with the class type in the ng-repeat.

<div class="my-list" ng-repeat="item in list">
  <div class="type">
    <span>{{item.label}}</span>
  </div>
  <div class="check">
    <span>{{item.ischecked}}</span>
  </div>
</div>

I have tried the following but it applied the CSS to all the divs with a class of type

.my-list .type:first-child

Answer 1

You can use $first, that indicates the first iteration within a ng-repeat.

<div class="my-list" ng-repeat="item in list">
  <div class="type" ng-class="{myClass:$first}">
    <span>{{item.label}}</span>
  </div>
  <div class="check">
    <span>{{item.ischecked}}</span>
  </div>
</div>

Answer 2

Basically you need to do the other way around.

.my-list:first-child .type{
  color:red;
}

ng-repeat will put multiple .my-list divs and you want to target the .type of the first div alone. So apply selector on .my-list.