Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to highlight the current page number in pagination

How to highlight the current page number in pagination

Problem

I used the below code but it not works exactly. My intention is to highlight the current page with blue color without hover, and other pages should highlight with blue color when hover by mouse. But my code is not highlighting the current page without hover.

HTML:


CSS:

.pagination, .pagination a {
    background: #f7f7f7;
    padding: 5px 10px;
    text - decoration: none;
    color: #7e7e7e;
    border: 1px solid # c6c6c6;
    font - weight: bold;
    border - radius: 3px;
}


.pagination: hover {
    background: #f7f7f7;
    padding: 5px 10px;
    text - decoration: none;
    color: #7e7e7e;
    border: 1px solid # c6c6c6;
    font - weight: bold;
    border - radius: 3px;
}

.current a {
    background: #9ad6fb;
    padding: 5px 10px;
    text-decoration: none;
    color: # 7e7e7e;
    border: 1px solid#c6c6c6;
    font - weight: bold;
    border - radius: 3px;
    background: linear - gradient(top, #9ad6fb 0%,# 9ad6fb 52 % , #ebebeb 100 % );
    background: -webkit - linear - gradient(top, #9ad6fb 0%,# 9ad6fb 52 % , #ebebeb 100 % );
    box - shadow: inset 0 4px 3px rgba(255, 255, 255, 0.6),
    0 1px 3px rgba(0, 0, 0, .2);
}

.pagenumbers current: a {
    background: #9ad6fb;
    border: 1px solid # 72ade4;
    color: #4879a6;
    background: linear-gradient(top, # 9ad6fb 0 % ,
    #77c4fc 100%);
    background: -webkit-linear-gradient(top, # 9ad6fb 0 % ,
    #77c4fc 100%);
    box-shadow: inset 0 1px 4px rgba(255,255,255,0.75), 0 1px 3px rgba(79,126,167,.5);
    }
Problem courtesy of: PHP

Solution

.pagenumbers current:a {

should be

.pagenumbers a.current {

Fiddle

Solution courtesy of: Turnip

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How to highlight the current page number in pagination

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×