how to apply css on specific td on first tr

Question

I'm a beginner in AngularJS, and really want not to use JQuery to solve my problem (maybe I'm wrong).

Here's my problem :

I would like to apply a CSS on the last td element in the first tr in a table.

My code :

<table>
    <tr ng-repeat="person in persons | orderBy:'name'">
        <td>{{person.name}}</td>
        <td>{{person.email}}</td>
    </tr>
</table>

So for the first tr , the last td element should be <td class="myClass">{{person.email}}</td>

Thanks for your answers and explanations.

Edit : I Forgot to say, I know how to resolve my problem by applying css on the last td , but I want to do it with angularjs, because I can have differents persons , and depends on the difference, I want to apply another CSS style.

Answer 1

Or if you don't want to put id's or classes you can do something like this:

table tr:first-child td:last-child {}

Note that not all browsers support the child selectors

Answer 2

.TABLE-CLASS tr:first-child td:last-child{
   //style
}

Answer 3

Use angular's ng-class directive to apply the styles conditionally:

<table>
    <tr ng-repeat="person in persons | orderBy:'name'">
        <td>{{person.name}}</td>
        <td ng-class="{'myClass':$index==0}">{{person.email}}</td>
    </tr>
</table>    

Answer 4

Use pseudo class -

The :first-child pseudo class means "if this element is the first child of its parent". :last-child means "if this element is the last child of its parent". Note that only element nodes (HTML tags) count, these pseudo-classes ignore text nodes. So these styles would work for you -

table tr td:last-child{
}

table tr td:first-child{

}

Answer 5

If there are only 2 <td> in each row you can get around the lack of support for :last-child in IE8 by using the CSS + selector:

table tr:first-child td + td {
  /* styles */
}

This will select any <td> that is preceded by another <td> and is a child of the first <tr> of each <table> .