From the course: Design the Web: Styling a Table

Unlock this course with a free trial

Join today to access over 22,500 courses taught by industry experts.

Adding highlights to rows

Adding highlights to rows

- [Voiceover] Now another way we can help users read content in a table, is to highlight some of the rows. Maybe every other row, or every third row. And we can do that by using the nth-child pseudo-class. So inside of the body area here for the table, we want to set a pseudo-class of nth-child, and we want to highlight every odd row. So over here in the CSS, let's come in here and select and copy the rule that targets the td body, space tr. Let's copy that. Now it doesn't matter what order you put your CSS rules in, however I like to keep my CSS going in the same order as the HTML. So the tr element here, I want this to be before the td. So we have tbody space tr, then a colon. We're gonna type nth-child, put in our parentheses, then a space, then put in our brackets. Inside of the parentheses, similar to what we did up here where we were targeting a specific sibling, we can put a parameter inside of here to target other properties. One of the properties we can put in here, is the…

Contents