Try:
.page-numbers, .current, .next {
color: red;
}
That worked to change the color! I should have been more specific when asking. I would like to change the hover color and center the pagination at the bottom of the page. What should I do to achieve that?
There’s not a great way to center those because they aren’t wrapped in a div, but see if this works:
@media screen and (min-width: 600px) {
span.page-numbers {
margin-left: 45%;
}
}
For the hover:
.page-numbers:hover, .current:hover, .next:hover {
color: green;
}
Obviously, you can use whatever color(s) you want.
Perfect! That worked! Now one more question: seeing it now, I feel like it should rest up higher on the page so it is closer to the last post on the page. How would I do that? Would margin-top work?
I looked at it again – a negative top margin doesn’t work because those are not block level elements. The space is being created by margins and padding on the elements above – but if you change that, it also changes the spacing between all posts.
The best solution would be to wrap the pagination in a div with a unique class or id when it’s output…then use that id or class in CSS to position the div.
