Pagination

By the end of this lesson, you will be able to build a responsive, accessible pagination component using CSS Flexbox and basic styling techniques.

What it is

Pagination in CSS refers to the visual styling and layout of navigation controls that allow users to move between pages of content. While the logic for generating page numbers often lives in JavaScript or server-side code, CSS handles the presentation: spacing, alignment, hover states, and active indicators. The mental model is treating each page link as a distinct "button" within a horizontal list container. Related terms include flexbox, list-style-type, and aria-current.

Why it matters

• User Experience: Clear visual cues help users understand their current location within a dataset.
• Accessibility: Properly styled focus states ensure keyboard-only users can navigate effectively.
• Responsiveness: Flexbox allows pagination controls to wrap gracefully on smaller screens without breaking the layout.
• Maintainability: Using semantic HTML lists (<ul>) with CSS makes the structure easy to update and style consistently.

Syntax or steps

The smallest useful pattern involves three parts: a container, a list, and list items. First, remove default list bullets. Second, use display: flex on the container to align items horizontally. Third, add padding and borders to individual links to create clickable areas.

Example

<nav aria-label="Pagination">
  <ul class="pagination">
    <li><a href="#">1</a></li>
    <li><a href="#" aria-current="page">2</a></li>
    <li><a href="#">3</a></li>
  </ul>
</nav>

<style>
.pagination {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
}

.pagination li a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #333;
}

.pagination li a:hover {
  background-color: #f5f5f5;
}

.pagination li a[aria-current="page"] {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}
</style>

Explanation: The .pagination class uses display: flex to arrange items in a row and gap for consistent spacing. Each anchor tag is styled as a block element with padding to increase the click target size. The aria-current="page" attribute is used by screen readers to identify the active page, and we style it visually using an attribute selector.

Common mistakes

• Forgetting List Styles: Leaving list-style: disc creates unwanted bullet points next to page numbers. Always reset this.
• Small Click Targets: Styling only the text instead of the entire <a> tag makes it hard to click. Use display: block or inline-block with padding.
• Lack of Focus States: Removing outlines without providing alternative focus styles breaks keyboard navigation. Ensure :focus styles are visible.
• Hardcoded Widths: Avoid fixed widths on items if possible; let content dictate size to prevent overflow issues on mobile devices.

When to use it

Practice

Guided Exercise: Add a "Previous" and "Next" button to the example above. Style them differently from the numbered pages (e.g., no border, just arrows).

Challenge: Make the pagination stack vertically on screens narrower than 600px using a media query.

Quick check

Question: Which CSS property removes the default bullet points from a pagination list?

Answer: list-style: none;

Summary

CSS pagination relies on Flexbox for layout and attribute selectors for state management. By combining semantic HTML with clear visual feedback, you create a navigation system that is both user-friendly and accessible.