I have customized the bootstrap pagination to remove background and border, but I find myself duplicating a lot of code to make it work.
.pagination > li > a,
.pagination > li > a:hover,
.pagination > li > a:focus,
.pagination > li > span,
.pagination > li > span:hover,
.pagination > li > span:focus {
background: none;
border: none;
color: #a8a9ab
}
.pagination > li > a:hover,
.pagination > li > a:focus,
.pagination > li.active > a,
.pagination > li.active > a:hover,
.pagination > li.active > a:focus,
.pagination > li.active > span,
.pagination > li.active > span:hover,
.pagination > li.active > span:focus {
background: none;
border: none;
color: #000
}
Is there another way to achieve this without using !important or adding extra classes to the markup?
This is what I end up with when using !important:
.pagination > li > a,
.pagination > li > span {
background: none !important;
border: none !important;
color: #a8a9ab !important;
}
.pagination > li > a:hover,
.pagination > li > a:focus,
.pagination > li > span:hover,
.pagination > li > span:focus,
.pagination > li.active > a,
.pagination > li.active > span {
color: #000 !important;
}
Here's a simple example: http://codepen.io/anon/pen/FpCEA