← Back to Chapters

CSS Pagination

? CSS Pagination

⚡ Quick Overview

CSS Pagination is used to split large amounts of content into multiple pages, making it easier for users to navigate through data, articles, or search results.

Pagination usually consists of page numbers and navigation buttons like Previous and Next. CSS helps you style these elements with spacing, colors, hover effects, and disabled states so users can clearly see where they are and where they can go next.

? Key Concepts

  • Pagination container – usually an unordered list <ul> holding page links.
  • Page items – each page number or button (like 1, 2, Next) is an <li> with a link.
  • Active page – the current page, highlighted with a class like .active.
  • Disabled state – used for buttons like Previous on the first page or Next on the last page using a class like .disabled.
  • Hover / focus states – visual feedback when users hover or focus on page links.

? Syntax / Theory

Pagination UI is usually built with:

  • An outer <ul class="pagination"> container.
  • Each page link inside an <li> element with an <a> tag.
  • Special classes like .active and .disabled added based on the current page.

? Basic Pagination CSS

? View Code Example 
/* Basic CSS for a horizontal pagination bar */
.pagination {
display: inline-flex;
list-style: none;
padding: 0;
margin: 0;
}
.pagination li a {
display: block;
padding: 10px 16px;
text-decoration: none;
color: #007bff;
border-right: 1px solid #ddd;
background-color: white;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
}
.pagination li a:hover {
background-color: #007bff;
color: white;
}
.pagination li a.active {
background-color: #007bff;
color: white;
cursor: default;
}
.pagination li a.disabled {
color: #ccc;
cursor: not-allowed;
background-color: #f9f9f9;
}

? HTML Markup Example

This is a typical markup structure for a pagination bar:

? View Code Example 
<!-- HTML structure for pagination -->
<ul class="pagination">
<li><a href="#" class="disabled">« Previous</a></li>
<li><a href="#" class="active">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">Next »</a></li>
</ul>

? Live Output: Pagination Example

? Sample Pagination Bar

In this example, the current page is highlighted using the .active class, while the Previous button is disabled using the .disabled class. Hover effects help users see which page they are about to select, and the layout stays compact and readable on both desktop and mobile screens.

? Tips & Best Practices

  • Use semantic HTML elements like <ul> and <li> for pagination lists.
  • Highlight the active page clearly using a distinct background and text color.
  • Disable Previous on the first page and Next on the last page to avoid confusion.
  • Keep clickable areas large enough for comfortable tapping on mobile devices.
  • Add smooth hover transitions for a polished user experience.
  • Ensure pagination is keyboard-accessible and screen-reader friendly in real projects.

? Try It Yourself

  1. Create a pagination bar with only 3 pages and highlight page 2 as active.
  2. Style the Next button to be disabled on the last page using the .disabled class.
  3. Add a hover effect that changes the background to a light gray instead of blue.
  4. Make a mobile-friendly version where page numbers are slightly larger and have more padding.