How to highlight the current page number in pagination

Question

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:

<div class="pagination" align="right" style="margin:8px 16px; 8px; padding-top:5px">
<div class='pagenumbers'>
<a class='number current'>1</a>
<a href="http://url/2" class='number'>2</a>
<a href="http://url/2">Next &gt;&gt; </a>&nbsp;<a  href="url">Last Page &gt;&gt; </a>       </div>
</div>

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);
    }

Answer 1

.pagenumbers current:a {

should be

.pagenumbers a.current {

Fiddle