Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Dexter1996777 opened this issue Mar 12, 2023 · 2 comments
Open

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

Dexter1996777 opened this issue Mar 12, 2023 · 2 comments

Comments

@Dexter1996777
Copy link

Dexter1996777 commented Mar 12, 2023

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.

@Dexter1996777 Dexter1996777 changed the title Nth-child() does not work as I expected Chapter13: Nth-child() does not work as I expected Mar 12, 2023
@bethrobson
Copy link
Owner

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
Copy link
Author

@bethrobson Thank you very for your answer!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants