A striped table with a clean list – CSS Practice

Style by position, with no extra classes.

What to build

A striped table and a divided list.

Requirements

Even rows inside tbody have the background whitesmoke, and odd rows do not.
Each li except the last has a 1px solid bottom border, using :not(:last-child).
The first li is bold, using :first-child.

Constraints

Do not change the HTML, or add classes.

Example

tbody tr:nth-child(odd) { color: gray; }

Why it works

Position selectors keep working when rows are added or removed, whereas classes typed by hand would all need updating.

Hints

Hint 1

Apply nth-child to rows inside tbody.

Hint 2

:not(:last-child) avoids a final divider.

Solution

Show one correct solution (try it yourself first)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Striped</title>
  <style>
    tbody tr:nth-child(even) { background: whitesmoke; }
    li:not(:last-child) { border-bottom: 1px solid; }
    li:first-child { font-weight: bold; }
  </style>
</head>
<body>
  <table>
    <thead><tr><th>Item</th></tr></thead>
    <tbody>
      <tr><td>One</td></tr>
      <tr><td>Two</td></tr>
      <tr><td>Three</td></tr>
      <tr><td>Four</td></tr>
    </tbody>
  </table>
  <ul>
    <li>Alpha</li>
    <li>Beta</li>
    <li>Gamma</li>
  </ul>
</body>
</html>

Lesson: Pseudo-classes and pseudo-elements →