On my latest project I have been working with CSS(3) and had to make a custom pagination. To be able to make this possible I had to use some pseudo-classes to be able to manipulate the changing view of it.
HTML
So let’s make de HTML to show u how I’ve done it.
First of all I will show you a static version of my HTML with only the class pagination and some <a> elements.
<div class="pagination">
<a>«</a>
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
<a>5</a>
<a>»</a>
</div>
I worked with SAP so the normal styling of it wasn’t that nice.
CSS
First here in the CSS I gave them a border that goes around the top, left and bottom only to not overlap some borders.
.pagination a {
color: #007bc7;
float: left;
padding: 10px 16px;
text-decoration: none;
border-right: 1px solid #bfbfbf;
border-top: 1px solid #bfbfbf;
border-bottom: 1px solid #bfbfbf;
}
To complete the border I choose the first <a> of the HTML with the pseudo element :first-child,
Because all the other borders left the left border out we’re giving it to the first class to make it a square.
.pagination a:first-child {
border-left: 1px solid #bfbfbf;
}
It will look like this
Next we proceed to look at the squares with pagination in it to show you that your mouse is hovering over it with the pseudo-class :hover, this pseudo-class only gets used when the action is hover.
.pagination a:hover {
background-color: #346187;
color: #FFF;
}
We give the square a color and change the color of the text as well to make clear we are hovering over it.
at last if we have a hover hence we also need a click, to know that this is the one we clicked on, we do this by using the pseudo-class :active in the same way we used the previous pseudo-classes.
.pagination a:active {
background-color: #000;
color: #FFF;
}
There are many more pseudo-classes you can use here.
