Yeti Yeti - 3 months ago 14
CSS Question

Removing rounded corners from pagination

The following CSS removes rounded corners from the

next
button in
Bootstrap
:

.pagination>li:last-child>a{
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}


I want to remove rounded corners from the
previous
button too. So I did this:

.pagination a {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}


Why doesn't this work? Isn't it supposed to remove rounded corners from all
a
inside
.pagination
?

Answer

Option 1 (recommended) :

.pagination>li:first-child>a, .pagination>li:first-child>span {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.pagination>li:last-child>a, .pagination>li:last-child>span {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

Option 2 (recommended) :

.pagination>li:first-child>a, .pagination>li:first-child>span,
.pagination>li:last-child>a, .pagination>li:last-child>span {
    border-radius: 0;
}

Option 3 (not recommended) :

.pagination>li>a, .pagination>li>span {
    border-radius: 0 !important;
}

Option 4 (not recommended) :

.pagination * {
    border-radius: 0 !important;
}

Note :

I recommend AGAINST these last two options, because !important ignores specificity, which should be avoided as much as you can, because it makes your code more difficult to maintain! However, it does allow you to use smaller selectors!

As makshh explains, the reason your code doesn't work, is because it doesn't have the correct specificity.

Comments