6

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
PSL
  • 123,204
  • 21
  • 253
  • 243
user1876246
  • 1,219
  • 5
  • 18
  • 33

2 Answers2

17

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>
Daniel
  • 6,916
  • 2
  • 36
  • 47
  • @dmo It appears that the pseudo class is being applied to the commented-out code, which is the first in the iteration. – Jerad Nov 28 '15 at 22:17
5

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.

PSL
  • 123,204
  • 21
  • 253
  • 243