quiero un estilo como este, pero... introduce la descripción de la imagen aquí
Atasqué cómo diseñar el nth-last-child (3) si el último niño no tiene la clase "deshabilitada" , ingrese la descripción de la imagen aquí
Mi Scs:
.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>Hola, haz los siguientes cambios en tu código sass
Tu codigo
.VuePagination__pagination-item{ &:nth-last-child(3){ &:before{ content:'..'; position:absolute; right: 1px; top: 7px; font-size: 16px; } } }Cambiado a
.VuePagination__pagination-item{ &:nth-last-child(3):not(.disabled){ &:before{ content:'..'; position:absolute; right: 1px; top: 7px; font-size: 16px; } } }Puede usar :not() css pseudo-class continuar con :nth-last-child(3)
Ejemplo:
&:nth-last-child(3):not(.disabled){}Obtenga más información sobre la pseudoclase :not() css
Trabajo JS Fiddle: https://jsfiddle.net/katheer_mizal/qb4zwa1k/8/