Nivedita Nivedita - 5 months ago 19
CSS Question

CSS border-property not working



.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:

enter image description here

I am not sure, why?

Answer
.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;
}