Chapter13: Nth-child() does not work as I expected

[Dexter1996777]

Hello everyone! When I use nth-child, it does not work as I expected. I set the (odd) or (2n+1) value of the attribute for background color, but instead of colouring an odd row, it affects cells that make part of the even row (The Truth or Consequences row).

Here is the code: tr:nth-child(odd) { background-color: #fcba7a; }

Here is the problem that I’m writing about:

Could you help me, please?

Should I use classes instead nth-child()?

P.S. This table comes from the Chapter 13 of Headfirt HTML and CSS.

[bethrobson]

Hi, note that in the HTML, the row marked Truth or Consequences is actually 2 rows. You'll see that the first td (the city name) spans 2 rows. So using nth-child makes the 2nd row with the color (i.e. the one with August 27th). To get around that check out our final code which uses a css class (cellcolor) to identify which rows get the background color.

[Dexter1996777]

@bethrobson Thank you very for your answer!