How do you style every third list item differently?

Q: How do you style every third list item differently?

You can use the `:nth-child()` pseudo-class in CSS to style elements based on their order within a parent. To target every third list item, you can use the pattern `3n` inside `:nth-child()`. `:nth-child()` selects elements based on their position within a parent element. You can use formulas like `2n`, `3n`, or `3n+1` to create repeating patterns. `li:nth-child(3n)` targets every third list item in a list. ul { list-style: none; padding: 0; } li { padding: 8px; background-color: #f2f2f2; margin-bottom: 5px; } /* Style every third item */ li:nth-child(3n) { background-color: lightblue; font-weight: bold; } Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 In this example, the `:nth-child(3n)` selector highlights every third list item with a blue background and bold text. You can adjust the number to style elements in other repeating sequences. Use `:nth-child()` for pattern-based styling instead of adding extra classes. Remember that counting starts at 1, not 0. Use `:nth-of-type()` when you only want to target specific element types among mixed children. Combine with transitions for smooth visual effects.

Difficulty: 3/10

nth-child selector, CSS specificity, list item styling

Styling Every Third List Item Using :nth-child() in CSS

You can use the :nth-child() pseudo-class in CSS to style elements based on their order within a parent. To target every third list item, you can use the pattern 3n inside :nth-child().

Key Points About :nth-child()

1
:nth-child() selects elements based on their position within a parent element.
2
You can use formulas like 2n, 3n, or 3n+1 to create repeating patterns.
3
li:nth-child(3n) targets every third list item in a list.

Example: Styling Every Third List Item

In this example, the :nth-child(3n) selector highlights every third list item with a blue background and bold text. You can adjust the number to style elements in other repeating sequences.

Best Practices

1
Use :nth-child() for pattern-based styling instead of adding extra classes.
2
Remember that counting starts at 1, not 0.
3
Use :nth-of-type() when you only want to target specific element types among mixed children.
4
Combine with transitions for smooth visual effects.

Scenario Questions

0-2 years experience

2-5 years experience

1Our product page shows a list of featured items, but after adding a promotional banner between items, every third item stopped getting the highlight style — what’s likely broken and how would you fix it?

Follow-up Questions