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

Question

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>

Have you tried [css `:not()` selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:not)? — Ruslan Zhomir, Oct 26 '21 at 17:32
Does this answer your question? [Css pseudo classes input:not(disabled)not:\[type="submit"\]:focus](https://stackoverflow.com/questions/9207304/css-pseudo-classes-inputnotdisablednottype-submitfocus) — kmoser, Oct 26 '21 at 18:23
Please [edit] your question and add meaningful descriptions to your images; don't just leave them as "enter image description here". — Heretic Monkey, Oct 29 '21 at 16:52

Katheer · Answer 1 · 2021-10-29T16:49:58.040

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/

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

1 Answers1