Zebra stripes

Learn zebra-striped tables with :nth-child(even).

What are zebra stripes?

Zebra stripes give table rows alternating background colors. The eye tracks even and odd rows separately, preventing lost lines in long lists. In CSS this is done with :nth-child(even) and :nth-child(odd).

Example: tr:nth-child(even) { background: #f1f5f9; }. This makes even-numbered rows light gray; odd rows keep the default color. In long sales reports it improves readability.

Even versus odd

:nth-child(even) picks rows 2, 4, 6...; :nth-child(odd) picks 1, 3, 5.... You decide which gets the dark and which the light shade.

Many choose light gray for even rows, but flipping them gives the same effect. What matters is that the two row types stand out visually. The zebra name comes from this: like a horse's black-and-white pattern.

Exercise Add zebra stripes to a user list

For a table with class .kullanicilar, add zebra stripes: write background: #f1f5f9; on the .kullanicilar tr:nth-child(even) selector. Also add padding: 10px; on the .kullanicilar td, .kullanicilar th selector.

Show example solution

open a .kullanicilar tr:nth-child(even) selector and write background: #f1f5f9; inside. Then open a .kullanicilar td, .kullanicilar th selector and write padding: 10px; inside.
Example solution:
.kullanicilar tr:nth-child(even) {
  background: #f1f5f9;
}
.kullanicilar td, .kullanicilar th {
  padding: 10px;
}

Test yourself

Which selector targets even-numbered rows?
```
/* the ? selector gives a background to even rows */
```
- tr:nth-child(odd)
- tr:even
- tr.even
- tr:nth-child(even)
Show answer

tr:nth-child(even) — Correct! tr:nth-child(even) targets even-numbered rows.

Selector that targets even rows

____ {
  background: #f1f5f9;
}

Show answer

tr:nth-child(even) {
  background: #f1f5f9;
}

Match the pseudo-classes

:nth-child(even)

even rows
:nth-child(odd)

odd rows
:hover

on hover
:first-child

first item

Next lesson: Hover row

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies