Question

i am using this css code:

.even{
    background: #E4ECF6;
}
.odd{
    background: #F3F7FB;
}
.firstrow{
    background-color: #599ECF;
}

i am using this css jquery code:

$(document).ready(function(){
$('table tr:even').addClass('even');
$('table tr:odd').addClass('odd');
$('table tr:first').addClass('firstrow');
});

this code run correctly for first table. but when i have two or higher table ,this code can coloring first row of first table. is better code for coloring all first rows in all tables?

Answer 1

Try replacing

$('table tr:first').addClass('firstrow');

with

$('table tr:first-child').addClass('firstrow');

The key is to use the :first-child selector, which

Selects all elements that are the first child of their parent.

Live demo here.

---

In case you still want to the :first selector, you can do it like this:

$(document).ready(function () {
  $('table tr:even').addClass('even');
  $('table tr:odd').addClass('odd');
  $('table').each(function () {  // For each 'table'...
    $(this).find('tr:first').addClass('firstrow');  // Add class 'firstrow' to the first 'tr'.
  });
});

Live demo here.