i want style like this, but.. enter image description here
I stuck how to style nth-last-child(3) if last-child not have class "disabled" enter image description here
My Scss:
.VuePagination__pagination-item{
&:nth-last-child(3){
&:before{
content:'..';
position:absolute;
right: 1px;
top: 7px;
font-size: 16px;
}
}
}
Html :
<div class="mb-5 mb-lg-0 VuePagination " id="pagination">
<nav class="">
<ul class="VuePagination__pagination">
<li class="VuePagination__pagination-item
VuePagination__pagination-item-prev-page"> < </li>
<li class="VuePagination__pagination-item
VuePagination__pagination-item-prev-chunk "> << </li>
<li class="VuePagination__pagination-item"> 1 </li>
<li class="VuePagination__pagination-item"> 2 </li>
<li class="VuePagination__pagination-item"> 3 </li>
<li class="VuePagination__pagination-item"> 4 </li>
<li class="VuePagination__pagination-item"> 5 </li>
<li class="VuePagination__pagination-item
VuePagination__pagination-item-next-page"> > </li>
<li class="VuePagination__pagination-item
VuePagination__pagination-item-next-chunk disabled"> >> </li>
</ul>
</div>
Hi please do the following changes in your sass code
Your Code
.VuePagination__pagination-item{
&:nth-last-child(3){
&:before{
content:'..';
position:absolute;
right: 1px;
top: 7px;
font-size: 16px;
}
}
}
Changed to
.VuePagination__pagination-item{
&:nth-last-child(3):not(.disabled){
&:before{
content:'..';
position:absolute;
right: 1px;
top: 7px;
font-size: 16px;
}
}
}
You can use :not() css pseudo-class continue with :nth-last-child(3)
Example:
&:nth-last-child(3):not(.disabled){}
Learn more about :not() css pseudo-class
Working JS Fiddle: https://jsfiddle.net/katheer_mizal/qb4zwa1k/8/