search

bethrobson / Head-First-HTML

Code for the 2nd edition of Head First HTML and CSS
558 stars 597 forks source link

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

Open Dexter1996777 opened 1 year ago

Dexter1996777 commented 1 year ago

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:

Screenshot 2023-03-12 at 18 01 31

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 commented 1 year ago

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 commented 1 year ago

@bethrobson Thank you very for your answer!