YogeshChauhan . com

Pagination in CSS with multiple examples

in CSS on July 23, 2019

Have you ever wondered about how the number of pages on a single page combine all the contents in the page and makes it really wonderful to see the webpage and gives an amazing reading experience to user. Mostly we see couple of pages in many blogs and news websites and it’s useful to show more ads as well. So, let’s discuss how to display that kind of web page content.

In the code above, I have created 8 links and gave them numbers for 6 links in the middle and symbols for first and last link to show the forward and backward symbol. In CSS, I have added the div as inline-block and gave very simple, almost none, decoration to all links. It doesn’t look all fancy but for the basic pagination, it works fine with less code.

You can view all the examples demo together in the link provided after at the end of this post.

Now, moving forward, let’s add a bit more CSS to that pagination.

I’ve used the same HTML code with minor changes like I’ve assigned a class ‘hoverPagination’ to div element and in CSS I’ve added a class ‘active’ to a specific link. Now the link with that specific class will have the CSS style and without that class, will have default style.

Also, I’ve used hover selector as well as not selector for links which are not active. Both of those selectors will style the non-active links.

Let’s add a bit more CSS to it. Add border-radius property to the id named as ’roundBorder’ and assigned the same id to div element. You can checkout the effects in the demo. It gives a bit nicer look and feel.

Now what if you want to add borders to the whole pagination element, means the div element AND also to the child elements??

That’s all the code it takes actually. Add a border property to the element. I’ve done that using an id. You can do that using another class or element name.

Now, the whole table doesn’t look really appealing together then how about some margin between all those elements?

That’s it. No biggie. Just add margin to it with border as well and you’re done.

Read more on w3schools


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to uninstall Cocoapods from the Mac OS? #4 How to add Read More Read Less Button using JavaScript? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

May 7 How to disable right click and drag and drop of images using jQuery? May 7 How to render Lists in React? May 7 What’s the difference between variables in CSS and SCSS (Sass)? May 7 How to define variables in SCSS (Sass)? May 7 How to show and hide an element on click in React? May 5 Use inline if to make a shorter conditional syntax in React

You might also like these

Microservices vs Monolithic ArchitectureMiscSocial Media Colors: Sass VariablesMiscWhat is the correct way to enqueue multiple CSS files in WordPress?WordPressUPDATE and DELETE Statements in PostgresPostgresHow to create ‘share on LinkedIn’ link using just HTML?HTMLFlash of Invisible Text and Mitt Romney Web Font ProblemCSS