CSS border-property not working - html

Question

.pagination-box ul{
display: flex;
justify-content: space-between;
}
.pagination-box ul li{
list-style: none;
text-align: center;
display: inline-block;
}
.pagination-box ul li:not(:first-child):not(:last-child){
border :1px solid #cfcfcf;
border-radius: 50%;
width: 40px;
height: 40px;
padding: 9px;
}
.pagination-box ul li.active{
border:2px solid #ff9805;
}
<div class="row pagination-box hidden-xs">
<ul>
<li>
<a>
<img ng-click="gotoPrev()" class="prev left-arrow" src="img/left_arrow.svg">
</a>
</li>
<li class="active">01</li>
<li class="">02</li>
<li class="">03</li>
<li class="">04</li>
<li class="">05</li>
<li class="">06</li>
<li>
<a>
<img ng-click="gotoNext()" class="next right-arrow" src="img/right_arrow.svg">
</a>
</li>
</ul>
</div>
which looks like:
in the .active class I have specified a border property, but it is not working. However if I write color:red; or any other CSS property, it is working.
In chrome, when I inspect the element, it shows it like this:
I am not sure, why?

Answer 1

.pagination-box ul li:not(:first-child):not(:last-child)
This selector overrides your .pagination-box ul li.active (more specificity).
Soulution:
.pagination-box ul li.active {
border:2px solid #ff9805 !important;
}
or:
.pagination-box ul li {
border-radius: 50%;
width: 40px;
height: 40px;
padding: 9px;
}
.pagination-box ul li:not(:first-child):not(:last-child):not(.active) {
border: 1px solid #cfcfcf;
}
.pagination-box ul li.active {
border: 2px solid #ff9805;
}
or:
.pagination-box ul li.active:not(:first-child):not(:last-child) {
border:2px solid #ff9805;
}

Answer 2

Its because the property is overrides by the property you applied for all li (i.e)
.pagination-box ul li:not(:first-child):not(:last-child) {
border: 1px solid #cfcfcf;
border-radius: 50%;
width: 40px;
height: 40px;
padding: 9px;
}
You can overcome by specifying like this
.pagination-box ul li.active {
border: 2px solid red !important;
}
Here is the jsFiddle
Hope it works :)

Answer 3

Your styles get overridden by the :not() so you need to add !important to your active class
.pagination-box ul li.active{
border:2px solid #ff9805 !important;
}
https://jsfiddle.net/xrw38xjz/

Answer 4

your declaration
:not(:first-child):not(:last-child)
is more specific than
.acitve
And css is using more specific declarations first. Here is some tutorial how this is count: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
You may enter !important as someone already propose:
.pagination-box ul li.active{
border:2px solid #ff9805 !important;
}
or specify the not attributes:
.pagination-box ul li:not(:first-child):not(:last-child).active{
border:2px solid #ff9805;
}
so your active declaration will be more important

Answer 5

If ever you do not want to use the !important, you can also extend the :not specificity with your additional .active class like this
.pagination-box ul li.active:not(:first-child):not(:last-child){
border:2px solid #ff9805;
}