CODEWITHSUNDEEP
htmlcssangularjs
dadsa
dadsa

Reputation: 227

CSS class applied to all but first elements of an ng-repeat

Having a span containing an ng-repeat I was wondering if it is possible to apply a CSS class to all but first elements of it.

For example, 

<span ng-repeat="row in element.Parameters track by $index" class="awesome-css-class">
      {{element.Parameters[$index]}}
</span>

My CSS class is 

.awesome-css-class {
    margin-left: 10px;
}

I tried with this method but apparently it doesn't work

.awesome-css-class ul:not(:first-child){
    margin-left: 10px;
}

Any suggestions?

Upvotes: 0

Views: 704

Answers (4)

Hasan Nafisi
Hasan Nafisi

Reputation: 138

try this: 

<span ng-repeat="row in element.Parameters track by $index" ng-class="{ 'awesome-css-class': $index != 0 }">
      {{element.Parameters[$index]}}
</span>

Upvotes: 2

Ishwar Patil
Ishwar Patil

Reputation: 1736

.awesome-css-class:not(:first-child) is what you want. This will select all element with class .awesome-css-class except those which are first child

.awesome-css-class:not(:first-child) {
 color: red;
}
<span class="awesome-css-class">1111</span>
<span class="awesome-css-class">2222</span>
<span class="awesome-css-class">3333</span>
<span class="awesome-css-class">4444</span>
<span class="awesome-css-class">5555</span>

Upvotes: 1

Eriks Klotins
Eriks Klotins

Reputation: 4180

Apply the class only to the first element:
https://docs.angularjs.org/api/ng/directive/ngClass

<span ng-repeat="row in element.Parameters track by $index" ng-class="[$index===0 ? 'awesome-css-class' : '']">
  {{element.Parameters[$index]}}
</span>

Alternatively, use pure CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/%3Afirst-child

.awesome-css-class:first-child
{
    background:red;
}

Upvotes: 1

Sebastian Speitel
Sebastian Speitel

Reputation: 7346

You added a wrong ul in your syntax:

.awesome-css-class:not(:first-child) {
  margin-left: 10px;
}
<div class="awesome-css-class">Element</div>
<div class="awesome-css-class">Element</div>

Upvotes: 2

Related Questions