Question

I just stumbled upon css specificity, while trying to change the pagination style of my theme.

I’m using twitter-bootstrap as a base-template, but I want to change pagination.

Specifically, I want to remove the pagination border that comes with will-paginate bootstrap :

The will-paginate/bootstrap

.pagination a {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #DDDDDD;
    border-image: none;
    border-style: solid;
    border-width: 1px 1px 1px 0;
    float: left;
    line-height: 34px;
    padding: 0 14px;
    text-decoration: none;
}

I just need this :

.pagination a {

    float: left;
    line-height: 34px;
    padding: 0 14px;
}

The problem is that if i set this in my custom.css.scss file, then bootstrap specificity is higher (check this great explanation on specificity) than mine. I even tried and use !important, but it still did not got my specificity higher.

I have solved this problem by just using the Equal specificity rule – the one that comes last, with equal specificity, is the one that counts, and just put :

.pagination a {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        border-color: #DDDDDD;
        border-image: none;
        border-style: none;
        border-width: 1px 1px 1px 0;
        float: left;
        line-height: 34px;
        padding: 0 14px;
        text-decoration: none;
    }

But this is just trashy css, because i don’t need the border at all…

What would you suggest?

Answer 1

Just try border: none; instead of resetting every sub-property.

Also, I just checked Bootstrap’s selector for pagination and it’s more specific than that:

.pagination ul > li > a, .pagination ul > li > span

Try using that selector instead for your border: none.