CODEWITHSUNDEEP
javascriptcsssass
bravo
bravo

Reputation: 11

How to styling nth-last-child(3) if last-child not have class disabled in css ? or javascript

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>

Upvotes: 0

Views: 75

Answers (1)

Katheer
Katheer

Reputation: 343

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/

Upvotes: 1

Related Questions