Pager (zwany także "paginator") - ogólna nazwa rozwiązania pozwalajacego na dzielenie wyników wyszukiwania, listowania bądź też samego tekstu na kolejne strony z możliwością poruszania się pomiędzy poszczególnymi podstronami.
Poniższy przykład demonstruje zastosowanie stylów CSS na w/w elemencie w celu zmiany jego wyglądu.
<ul class="pager"> <li class="prev"><a href="#">« Poprzednia</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li class="empty">...</li> <li><a href="#">9</a></li> <li><a href="#">10</a></li> <li><a href="#" class="active">11</a></li> <li class="prev empty off">Następna »</li> </ul>
<ul class="pager flickr">
body {
font-size: 11px;
font-family: Verdana;
}
ul.pager {
marign: 0px;
padding: 0px;
}
ul.pager li {
margin: 0px 3px 0px 0px;
padding: 0px;
list-style: none;
list-style-image: none;
float: left;
border: 1px solid #2e6ab1;
}
ul.pager li.empty,
ul.pager li a {
display: block;
padding: 3px 6px;
text-decoration: none;
font-weight: bold;
color: #0e509e;
}
ul.pager li a.active,
ul.pager li a:hover {
color: #fff;
background: #0e509e;
}
ul.pager li.off {
color: #888;
border-color: #888;
}
ul.flickr a {
border: 1px solid #dddddd;
}
ul.flickr li.prev a,
ul.flickr li {
border: 0px;
}
ul.flickr li a.active,
ul.flickr li a:hover {
background: transparent;
color: #ff0084;
border-color: #fff;
}
ul.flickr li.empty,
ul.flickr li.prev a {
border: 1px solid #fff;
}