How can I prevent first-child CSS from also affecting the second child in my HTML Table?

Question

I spruced up my HTML table a bit with some help here .

...but now I want to prevent the CSS:

tr:first-child { color: skyblue }

...from affecting row 1 in addition to row 0.

To see what I mean, see the latest update here - the "I eat tacos" line should be orange, not skyblue.

UPDATE

I'm happy with the latest here ; thanks all!

Answer 1

Add thead to your CSS:

thead tr:first-child { color: skyblue }

EDIT: though you don't really need the first-child and could just use thead tr since you only have one row in your thead

jsfiddle