2

I am trying to apply styles for first and last elements which includes class .swiper-slide-visible

But I apply styles for all elements which do not include this class:

.swiper-slide-visible:first-child {
mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
}

.swiper-slide-visible:last-child {
 mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
}

my code

Styles are applied to 2nd element too.

enter image description here

.swiper-wrapper div.swiper-slide-visible:first-child apply styles to every div.swiper-slide

I have a right code for first element

.swiper-wrapper > div.swiper-slide-visible

.swiper-wrapper > div.swiper-slide-visible ~ div.swiper-slide-visible

But now I'm working on the last element. Need to find last element!

Radomir
  • 115
  • 9
  • Have you tried wrapping the current element with tag swiper-slide-visible with a
  • , of course, which is wrapped in a ul, and changing the class of li to swiper-side-visible and removing the class from the current element
    • – Shakya Peiris Jan 30 '23 at 08:02
  • I apply styles for div tag who has this class and this class have been deleted when swiper make a decision that this element is not visiable. Can it invoke a problem? – Radomir Jan 30 '23 at 08:07
  • 1
    [Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?](https://stackoverflow.com/q/5545649/1427878) - answer: No, and that is the same situation you got here, you are trying to combine a class selector with :first-child/:last-child, which will not work unless the element in question was actually the first/last child of its parent, _regardless of class_. – CBroe Jan 30 '23 at 08:48
  • 1
    You could try an approach similar to the one outlined here, https://stackoverflow.com/a/8539107/1427878 The first element you are looking for, will be the one that does not have one with the same class before it - so `:not(.swiper-slide-visible) + .swiper-slide-visible`. The same thing doesn't work that easily for the last one though. You'd have to extend the "trickery" quite a bit, to make it work for that one as well. – CBroe Jan 30 '23 at 08:55
  • I am using .swiper-slide-visible ~ .swiper-slide-visible but it apply for all elements too – Radomir Jan 30 '23 at 10:08
  • Have an answer for first but not last – Radomir Jan 30 '23 at 10:29