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.

By : Maxime B.


Answers

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{

}


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>.

By : SimonR


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


This video can help you solving your question :)
By: admin