We can use the following CSS selectors to target the above HTML markup:
.wp-pagenavi– Applies to the entire div, useful for clear CSS, padding/margin, font sizes and styles (bold, italics, etc.)
.wp-pagenavi a– Applies to all links within the page navigation, including page numbers and previous/next.
.wp-pagenavi a.page– Specifically targets page numbers.
.wp-pagenavi a .first– Targets specifically the “first” link (not listed above)
.wp-pagenavi to .last – Targeted specifically at the “last” link
.wp-pagenavi span – Points to the current page number along with the extend part (the thing with three dots)
.wp-pagenavi span.current – Targets the current page number specifically
.wp-pagenavi span.extend – Specifically targets the extension (the three dots thing)
.wp-pagenavi span.pages – Specifically to display the page number (e.g. Page 1 of 4)
Note: The previous and next links by default do not have any CSS classes on them. If you want them to be completely distinct from the page numbers and first/last links, you will have to russian virtual mobile number reset the styles added to the selector .wp-pagenavi a. If that doesn't make sense, take a look at the following (really simplified) example.
For example: Suppose you want the previous and next links to be bold, but all other links to be normal weight. You would do the following:
.wp-pagenavi a { font-weight: bold; } /* Previous and Next links only */
.wp-pagenavi a.page,
.wp-pagenavi a.first,
.wp-pagenavi a.last { font-weight: normal; } /* Other links */
I've combined the page number, first link, and last link links into one rule for example purposes. You can of course separate them and add more specific styles to each one.
This would be much easier if there was a class added to the previous/next links by default, but there isn't. It's not a big deal since you can reset them anyway.
You can use . wp-pagenavi a .previouspostslinkand .wp-pagenavi a.nextpostslinkto select the previous and next links, respectively.
So pretty much everything up to the unordered list of selectors is no longer relevant, but we're going to keep it just because it might be a useful lesson in CSS overrides in some other situations. The CSS example below will still apply since we don't use those selectors anyway.
An example of CSS
Here is an example of the PageNavi style we built:
Blogwave Updated PageNavi
This is the code we used to achieve this look, the multi-line CSS is optional:
.wp-pagenavi a, .wp-pagenavi span {
padding: 5px; margin-right: 10px;
font-size: 15px; color: #03719c; text-decoration: none;
border: 3px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
background: #03719c;
color: #fff;
border: 3px solid #AFAFAF;
}
.wp-pagenavi span.current { font-weight: bold; }
And this is what it means:
First rule
The .wp-pagenavi a, .wp-pagenavi spanselects all anchor and span elements (pretty much everything) inside the .wp-pagenavi div.
The first line of the rule sets a 5px padding so that it doesn't crowd against the light grey border (defined below). It also sets a consistent 10px margin to the right of each element so that there is equal space between each one.
The second line sets the font size to 15px, makes the text color blue, and makes sure that links are not underlined.
The third line sets a solid 3px gray border around everything. The code border-radiusrounds the corners.
Second rule
The .wp-pagenavi a:hover, .wp-pagenavi span.current selects the link hover effect as well as the current page number, respectively.
The first line sets a dark blue background color.
The second line makes the text white.
The third line gives a slightly darker border.
Third rule
This rule selects the current page number (again) without affecting the link hover effect (like the second rule). This just makes the current page number have a bold font weight.
The reason we didn't include it with the link hover effect is that it has an uneven effect when switching from a normal font weight to bold.
Note: Depending on how your CSS is coded, you may need to use more specific selectors. For example, if there are styles for <div> #content aand your WP-PageNavi is inside the content div, you may need to rewrite your PageNavi CSS as #content .wp-pagenavi a<div> and override any other less specific styles.
Conclusion
We know this is a relatively simple example, but you could have much more advanced CSS rules to further differentiate different links and other elements. We hope you learned some CSS tips from it as well.
The optional WP-PageNavi integration is a very interesting feature that theme developers could integrate into their themes. With the integration method we described above, users can easily choose whether or not to use it, and it could be a good option for many blogs.
You may want to check out our guides and tutorials:
Best WordPress Dropdown Menu Plugins (Compared)
How to Create a Navigation Menu Using Bootstrap
How to add custom navigation in BuddyPress
These posts will help you find more solutions you may be looking for.