Answer the question
In order to leave comments, you need to log in
How to get to path in svg?
Hey! I have a slider with elements that have svg. I decided to paint over its individual parts and added its own class to each path, but because I want to apply color when the .slick-current element is, this does not work.
How to get to path?
I will be grateful for your help!
<div class="cooperation-slider">
<div class="cooperation-slider__item">
<svg class="cooperation-slider__item-img cooperation-slider__item-img__envato">
<use xlink:href="#envato"></use>
</svg>
</div>
<!-- /.cooperation-slider__item -->
<div class="cooperation-slider__item">
<svg class="cooperation-slider__item-img cooperation-slider__item-img__payoneer">
<use xlink:href="#payoneer"></use>
</svg>
</div>
<!-- /.cooperation-slider__item -->
<div class="cooperation-slider__item">
<svg class="cooperation-slider__item-img cooperation-slider__item-img__airbnb">
<use xlink:href="#airbnb"></use>
</svg>
</div>
<!-- /.cooperation-slider__item -->
<div class="cooperation-slider__item">
<svg class="cooperation-slider__item-img cooperation-slider__item-img__paypal">
<use xlink:href="#paypal"></use>
</svg>
</div>
<!-- /.cooperation-slider__item -->
<div class="cooperation-slider__item">
<svg class="cooperation-slider__item-img cooperation-slider__item-img__google">
<use xlink:href="#google"></use>
</svg>
</div>
<!-- /.cooperation-slider__item -->
<div class="cooperation-slider__item">
<svg class="cooperation-slider__item-img cooperation-slider__item-img__amazon">
<use xlink:href="#amazone"></use>
</svg>
</div>
<!-- /.cooperation-slider__item -->
</div>
<!-- /.cooperation-slider -->
&.slick-current
.cooperation
&-slider
&__item
&-img
&__amazon
fill: #393A3E
&-arrow
fill: #FBAD17
&__payoneer
fill: #333333
&-y
fill: #FF4800
&__paypal
fill: #019CDE
&-blue
fill: #013088
&__airbnb
fill: #fe5b5f
&__envato
fill: #323232
&-logo
fill: #80B341
&__google
&-yellow
fill: #FBBB00
&-blue
fill: #518EF8
&-green
fill: #28B446
&-red
fill: #F14336
Answer the question
In order to leave comments, you need to log in
Why complicate things so much with selectors.
Most likely it does not work because of a non-working selector
.slick-current
path.color-yellow
fill: #FBBB00
path.color-blue
fill: #518EF8
<path class="color-blue" />
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question