how to apply css on specific td on first tr


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 :

    <tr ng-repeat="person in persons | orderBy:'name'">

So for the first tr, the last td element should be <td class="myClass">{{}}</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.


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{
By : my5t3ry

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