Changing pagination colour Bootstrap

Question

Here is my pagination control:

I am trying to make the labels of the pagination purple, so far I have been unable to override it. Here is my CSS:

/* pagination */

.pagination {
    height: 36px;
    margin: 18px 0;
    color: #6c58bF;
}

.pagination ul {
    display: inline-block;
    *display: inline;
    /* IE7 inline-block hack */
    *zoom: 1;
    margin-left: 0;
    color: #ffffff;
    margin-bottom: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.pagination li {
    display: inline;
    color: #6c58bF;
}

.pagination a {
    float: left;
    padding: 0 14px;
    line-height: 34px;
    color: #6c58bF;
    text-decoration: none;
    border: 1px solid #ddd;
    border-left-width: 0;
}

.pagination a:hover,
.pagination .active a {
    background-color: #6c58bF;
    color: #ffffff;
}

.pagination a:focus {
    background-color: #6c58bF;
    color: #ffffff;
}


.pagination .active a {
    color: #ffffff;
    cursor: default;
}

.pagination .disabled span,
.pagination .disabled a,
.pagination .disabled a:hover {
    color: #999999;
    background-color: transparent;
    cursor: default;
}

.pagination li:first-child a {
    border-left-width: 1px;
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;
}

.pagination li:last-child a {
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
}

.pagination-centered {
    text-align: center;
}

.pagination-right {
    text-align: right;
}

.pager {
    margin-left: 0;
    margin-bottom: 18px;
    list-style: none;
    text-align: center;
    color: #6c58bF;
    *zoom: 1;
}

.pager:before,
.pager:after {
    display: table;
    content: "";
}

.pager:after {
    clear: both;
}

.pager li {
    display: inline;
    color: #6c58bF;
}

.pager a {
    display: inline-block;
    padding: 5px 14px;
    color: #6c58bF;
    background-color: #fff;
    border: 1px solid #ddd;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

.pager a:hover {
    text-decoration: none;
    background-color: #f5f5f5;
}

.pager .next a {
    float: right;
}

.pager .previous a {
    float: left;
}

.pager .disabled a,
.pager .disabled a:hover {
    color: #999999;
}


/* end */

All of the labels (active) are still blue. How can I override it? Thanks.

Answer 1

.pagination > li > a {     background-color: white;     color: #5A4181; }  .pagination > li > a:focus, .pagination > li > a:hover, .pagination > li > span:focus, .pagination > li > span:hover {     color: #5a5a5a;     background-color: #eee;     border-color: #ddd; }  .pagination > .active > a {     color: white;     background-color: #5A4181 !Important;     border: solid 1px #5A4181 !Important; }  .pagination > .active > a:hover {     background-color: #5A4181 !Important;     border: solid 1px #5A4181; } 

Answer 2

.example .pagination>li>a,  .example .pagination>li>span {    border: 1px solid purple;  }  .pagination>li.active>a {    background: purple;    color: #fff;  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />  <div class="container">    <div class="example">      <nav>        <ul class="pagination">          <li class="disabled">            <a href="#" aria-label="Previous">              <span aria-hidden="true">«</span>            </a>          </li>          <li class="active"><a href="#">1</a>          </li>          <li><a href="#">2</a>          </li>          <li><a href="#">3</a>          </li>          <li><a href="#">4</a>          </li>          <li><a href="#">5</a>          </li>          <li>            <a href="#" aria-label="Next">              <span aria-hidden="true">»</span>            </a>          </li>        </ul>      </nav>    </div>  </div>

It might not be working due to specificity issues, try adding some parent class, or style it using ID for that pagination UL, like I have given a parent <div class="example">

Read more about Specificity here

Answer 3

This is the selector and style rules in Boootstrap 3.3.5 that controls the background color of a pagination element:

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
    z-index: 3;
    color: #23527c;
    background-color: #eee;
    border-color: #ddd;
}

Your selectors are not specific enough. Their specificity value is 0 0 2 1 and the Bootstrap selectors is 0 0 2 2.

Your Specificity Values:

.pagination a:hover = `0 0 2 1`
.pagination .active a = `0 0 2 1`
.pagination a:focus = `0 0 2 1`

0 0 1 0 for the class .pagination, 0 0 1 0 for a pseudo class :hover and 0 0 0 1 for the element a.

Bootstrap Specificity Values:

.pagination > li > a:focus = `0 0 2 2`

0 0 1 0 for the class .pagination, 0 0 1 0 for a pseudo class :focus and 0 0 0 1 for each element, a and li.

Here's what you can do:

1. Change the value at the source, change #eee to purple.
2. Override the selector. Make sure it has the same or greater specificity than the original selector. Note: if using the same specificity as the original selector make sure it comes after the original selector in your document.

Option #1

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
    z-index: 3;
    color: #23527c;
    background-color: purple;
    border-color: #ddd;
}

Option #2

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
    z-index: 3;
    color: #23527c;
    background-color: purple;
    border-color: #ddd;
}

/* ...a bunch of other CSS... */

/* Now do one of the following options */

/* SAME SPECIFICITY OPTION - 0 0 2 2, needs to come AFTER original rule */
.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
    background-color: purple;
}
/* GREATER SPECIFICITY - SMALL increase, 0 0 2 3 */
ul.pagination > li > a:focus,
ul.pagination > li > a:hover,
ul.pagination > li > span:focus,
ul.pagination > li > span:hover {
    background-color: purple;
}
/* GREATER SPECIFICITY - LARGE increase, 0 1 1 1 */    
#my-paginator a:focus,
#my-paginator a:hover,
#my-paginator span:focus,
#my-paginator span:hover {
    background-color: purple;
}

Ideally you want to increase specificity in small amounts if you can and shy away from using the ID option. Check out this handy Specificity Calculator.