How can you style alternate table rows without adding extra classes?

Q: How can you style alternate table rows without adding extra classes?

You can style alternate (even or odd) table rows using the `:nth-child()` pseudo-class in CSS. This method lets you apply alternating background colors or styles without adding extra classes to each row. `:nth-child(odd)` targets all odd-numbered rows (1st, 3rd, 5th, etc.). `:nth-child(even)` targets all even-numbered rows (2nd, 4th, 6th, etc.). It works based on the element’s position among its siblings in the DOM. table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid #ccc; padding: 8px; text-align: left; } /* Style odd rows */ tr:nth-child(odd) { background-color: #f9f9f9; } /* Style even rows */ tr:nth-child(even) { background-color: #e6f7ff; } Name Age Alice 25 Bob 30 Charlie 28 David 35 In this example, the `:nth-child(odd)` selector applies a light gray background to odd rows, while `:nth-child(even)` adds a light blue shade to even rows, making the table easier to read. Use alternating row colors to improve table readability. Combine with hover effects (e.g., `tr:hover`) for better interactivity. Use `:nth-of-type()` if your table contains mixed elements like `tr` and `th` siblings. Avoid hard-coded colors that reduce accessibility contrast.

Difficulty: 3/10

nth-child selector, CSS specificity, dynamic row styling

Styling Alternate Table Rows Using :nth-child() in CSS

You can style alternate (even or odd) table rows using the :nth-child() pseudo-class in CSS. This method lets you apply alternating background colors or styles without adding extra classes to each row.

Key Points About :nth-child()

1
:nth-child(odd) targets all odd-numbered rows (1st, 3rd, 5th, etc.).
2
:nth-child(even) targets all even-numbered rows (2nd, 4th, 6th, etc.).

How can you style alternate table rows without adding extra classes?

Difficulty: 3/10

nth-child selector, CSS specificity, dynamic row styling

Styling Alternate Table Rows Using :nth-child() in CSS

Key Points About :nth-child()

1
:nth-child(odd) targets all odd-numbered rows (1st, 3rd, 5th, etc.).
2
:nth-child(even) targets all even-numbered rows (2nd, 4th, 6th, etc.).

How can you style alternate table rows without adding extra classes?

Styling Alternate Table Rows Using :nth-child() in CSS

How can you style alternate table rows without adding extra classes?

Styling Alternate Table Rows Using :nth-child() in CSS

Scenario Questions

Follow-up Questions