tr:nth-child(even) help. how to apply to one class?

Question

im not very good with css and i need some help.

i have a table where i want every other row to be gray and the alternating rows to be white. but i only want it to happen on one particular table.

i added some code to my css:

tr:nth-child(even) {  
background: #CCC;  
}  

tr:nth-child(odd) {  
background: #FFF;  
}

but the problem is that its affecting every table on my site. i havent found any examples where it applies only to a certain class. is that possible? i want it to apply only to:

table.dashboardtable

Answer 1

Use the CSS descendant operator (juxtaposition) as usual:

table.dashboardtable tr:nth-child(even)
table.dashboardtable tr:nth-child(odd)

Answer 2

nth-child and nth-of-type accept odd and even as well as a formula like an+b, where a and b are constants.

Usually you want to use nth-of-type, which will only apply to the type you specify. That will leave out other elements. If you want every even tr to have that background color, then try:

tr:nth-of-type(2n){
  background: #CCC;
}

tr:nth-of-type(2n+1){
  background: #FFF;
}

More info on CSS Selectors