HTML, CSS part 1 exercise question

Hi I just started my first course this week and I am able to finish my exercises for the box and the table.

However I am still a bit confused about the nth-child(odd) background color part for the table exercise.

The css code is:

tr:nth-child(odd) {
background-color: #eef7ff;

Why doesn’t this tr code override the th code (code below)?

th {
background-color: #427fef;
color: white;

My thought was if I made the above code, the first row of the table(Country OrderID Order Amount) would become light blue background because it also has the tr and it is at the top?

Does the th code force the start of the tr code from the second row of the table(USA 1000 $1,300)?

Sorry if this was confusing… I checked the answer and I know this is the right answer, but I just wanted to fully understand this concept.

The th rule is applied to all th elements since there is no more specific rule for any of them.

That’s true. But then the th rule is applied to the th elements.

No. The selector says: Apply this rule to tr elements that are odd childs of their parents. The tr with the headings is an odd child of the thead element while the first data row is an odd child of the tbody element.

So when you say:
it doesn’t mean tr’s child (td), but rather the tr IS the child!

This cleared things up real nicely. The wording got me confused. I went back and changed a few lines of code just to confirm my new understanding, and it makes so much sense now.

Thank you so much!

You’re welcome. Maybe you want to read this short thread, too:

but isn’t the tr for the header the only row there so that makes it odd? shouldn’t that be targeted too? I feel like I’m missing something here and its bothering me that I got the exercise right but I dont understand exactly why… even with the reasoning here. (to me with these explanations it just seems to reinforce the opposite that the header would be the lighter color instead of the darker blue one because the th is just a type selector versus that more weighty nthchild pseudo-selector.


Yes. And it is! The tr has a #eef7ff background because it’s an odd child of it’s parent. You just don’t see it because the tr is completely filled with ths that have a #427fef background.

Inspect the elements in dev tools to see which rules are applied. Disable the rule for the th elements and see what happens.

But the tr rule applies to trs not to ths.

trs? ths? sorry what do those stand for? I’m assuming table row selectors and table head selectors.

So what you’re saying that even though rule is applying the code of the color #eef7ff to the tr, the other rule applying to the th cell within that same tr element some how still shows the #427fef on top of that #eef7ff ? (so in the render its like the parent elements rule just doesnt exist.)

So basically would that mean that children of a cell will show over their parent cell? (yeah I’ve gone into inspect the elements and noticed that too) (is this specific to tables only then? because it seems like you need to have a tr element plus a td or th element as a child to be able to display the column atleast…)

I’m just trying to make sense of it all its a lot to take in for a newbie like me, hopefully I’m not too annoying with these questions.