Why Is This Code Not Making The Page Number Grey When It's Clicked On?

I have tried to make a pager in where I can click on a page number, the color then turns to grey. But it seems to fail miserably. Why is this code not making the pager number that'

Solution 1:

you have set it to color not for background that's why it is not producing grey color

functionmy(i){
  document.getElementById('act').removeAttribute("id");
 i.id = "act";
}

.pager > li > a {
        color: black !Important;
    }
    .pager >li:active > a:active {
        color: grey !Important;
    }
    
        .pager > li > a.right-arrow {
            margin-left: 410px;
            width: 30px;
            border-radius: 50%;
            box-shadow: 0px0px5px#9ecaed;
            font-size: 15px;
            padding: 7px;
            line-height: 1;
        }
    
        .pager > li > a.left-arrow {
            margin-right: 410px;
            width: 30px;
            border-radius: 50%;
            box-shadow: 0px0px5px#9ecaed;
            font-size: 15px;
            transform: rotate(180deg);
            padding: 7px;
            line-height: 1;
        }
    
    .number {  
        border-color: white !Important;
        padding: 5px!Important;
    }
    #act{
        color: grey !Important;
    }

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"/><divclass="text-center"><ulclass="pager"><li><ahref="#"class="left-arrow "onclick='my(this);'>➜</a></li><li><ahref=""class="number"id=actonclick='my(this);'>1</a></li><li><ahref=""class="number"onclick='my(this);'>2</a></li><li><ahref=""class="number"onclick='my(this);'>3</a></li><liclass="number">...</li><li><ahref=""class="number"onclick='my(this);'>7</a></li><li><ahref=""class="number"onclick='my(this);'>8</a></li><li><ahref=""class="number"onclick='my(this);'>9</a></li><li><ahref=""class="right-arrow">➜</a></li></ul></div>

Solution 2:

A small typo error later... Hopefully this should work...

.pager > li:active > a:active {
    color: grey !Important;
}

Codepen link:https://codepen.io/anon/pen/ppbgBw

Solution 3:

You have to use the hash tag (#) inside your link's href attribute for all links.

Like this

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"/><divclass="text-center"><ulclass="pager"><li><ahref="#"class="left-arrow">➜</a></li><li><ahref="#"class="number">1</a></li><li><ahref="#"class="number">2</a></li><li><ahref="#"class="number">3</a></li><liclass="number">...</li><li><ahref="#"class="number">7</a></li><li><ahref="#"class="number">8</a></li><li><ahref="#"class="number">9</a></li><li><ahref="#"class="right-arrow">➜</a></li></ul></div>