css - how to change the background color of first row in html table and all other rows alternate color -

i want change background color of first row , rest rows underneath alternate color i.e. odd concept. applying css alternate color this:

.table-striped tbody tr:nth-child(odd) td {     background-color: #81daf5; }  .table-striped tbody tr:nth-child(even) td {     background-color: #ceecf5; }  .table-striped tbody tr.highlight td {     background-color: #f2f5a9; } 

here, .table-striped table class. how can change color first row in different color red.

output of above css:

you use :first-child pseudo class, it's supported browsers.

the :first-child css pseudo-class represents element first child element of parent.

syntax element:first-child { style properties }

added css:

.table-striped tbody tr:nth-child(odd) td {   background-color: #81daf5; }  .table-striped tbody tr:nth-child(even) td {   background-color: #ceecf5; }  .table-striped tbody tr.highlight td {   background-color: #f2f5a9; }  .table-striped tbody tr:first-child td {   background-color: #ff0000; } 

jsfiddle

edit: noted wrick17, added first-child rule should placed @ bottom since it'll otherwise overridden.