2つの異なるクラスにある2つのid cssを変更する方法

Question

これは私が探しているものです。

私はカルーセルを使用しています。カルーセルは7つのsvgのアイコンをスライドしています。各アイコンのアイコンはidです。

は、私は、次のCSSで現在表示されたアイコンのCSSを変更しています：

.slick-current #icon-1 path { 
    fill: rgb(252, 238, 33); 
} 

.slick-currentはdiv要素のクラスで、#icon-1はそのdiv内部svg要素です。

カルーセルが通過するとき、私は現在のアイコンをターゲットとし、異なる色を適用する7つのCSSスタイルを持っています。私が同時にやってみたいのは、異なるアイコンを使って別のdivをターゲットにして、CSSを適用することです。例：

slick-currentには#icon-1の場合、.slick-active divには、#icon-3が含まれています。これら2つを組み合わせる方法はありますか？

カルーセルコード：

 <div class="col-1 slider-cat-nav" id="slider_categories"> 
     <div> 
     <img class="svg cat-icons-op" id="digital_icon" src="img/icons/icon-d.svg"> 
     </div> 
     <div> 
     <img class="svg cat-icons-op" id="inspire_icon" src="img/icons/icon-tools.svg"> 
     </div> 
     <div> 
     <img class="svg cat-icons-op" id="perform_icon" src="img/icons/icon-search.svg"> 
     </div> 
     <div> 
     <img class="svg cat-icons-op" id="automate_icon" src="img/icons/icon-rocket.svg"> 
     </div> 
     <div> 
     <img class="svg cat-icons-op" id="develop_icon" src="img/icons/icon-ab.svg"> 
     </div> 
     <div> 
     <img class="svg cat-icons-op" id="design_icon" src="img/icons/icon-tools.svg"> 
     </div> 
     <div> 
     <img class="svg cat-icons-op" id="plan_icon" src="img/icons/icon-rocket.svg"> 
     </div> 
    </div> 

Slick.jsコード：

$('.slider-cat-name').slick({ 
slidesToShow: 1, 
slidesToScroll: 1, 
arrows: false, 
fade: true, 
asNavFor: '.slider-cat-nav', 
speed: 1000, 
}); 

$('.slider-cat-nav').slick({ 
slidesToShow: 5, 
slidesToScroll: -1, 
arrows: false, 
asNavFor: '.slider-cat-name', 
vertical: true, 
//autoplay: true, 
autoplaySpeed: 3000, 
speed: 1000, 
draggable: false 
}); 

クラス.slick-currentと。 slick-activeなどのクラスがslick.jsによってdivに追加されます。

出力は次のようになります。

<div class="col-1 slider-cat-nav slick-initialized slick-slider slick-vertical" id="slider_categories"> 
    <div aria-live="polite" class="slick-list" style="height: 520px;"><div class="slick-track" role="listbox" style="opacity: 1; height: 1768px; transform: translate3d(0px, -520px, 0px);"> 
    <div class="slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide10" style="width: 42px;"> 
     <img class="svg cat-icons-op" id="digital_icon" src="img/icons/icon-d.svg"> 
    </div> 
    <div class="slick-slide slick-active" data-slick-index="1" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide11" style="width: 42px;"> 
     <img class="svg cat-icons-op" id="inspire_icon" src="img/icons/icon-tools.svg"> 
    </div> 
    <div class="slick-slide slick-active" data-slick-index="2" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide12" style="width: 42px;"> 
     <img class="svg cat-icons-op" id="perform_icon" src="img/icons/icon-search.svg"> 
    </div> 
    <div class="slick-slide slick-active" data-slick-index="3" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide13" style="width: 42px;"> 
     <img class="svg cat-icons-op" id="automate_icon" src="img/icons/icon-rocket.svg"> 
    </div> 
    <div class="slick-slide slick-active" data-slick-index="4" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide14" style="width: 42px;"> 
     <img class="svg cat-icons-op" id="develop_icon" src="img/icons/icon-ab.svg"> 
    </div> 
    </div> 
</div> 

Answer 1

それだけで一次元のためだった場合は、いくつかの一般的な~の成功と隣接+兄弟セレクタを持っているかもしれませんが、関与の子供たちと私はそれがで可能だとは思いません純粋なCSS。私が正しいと思ったら（HTML/JSの例が助けになる）、これらのシナリオの扱い方は、スクリプトによって親要素にフラグを設定し、子要素のルールをカスタマイズすることです（これは問題ではありません）カルーセルを使用しているとみなします）。たとえば、親にdata-active-element="icon-1"属性を設定するときは、ルールは次のようになります。

[data-active-element="icon-1"] .slick-active #icon-3 { whatever } 

非常にエレガントが、動作していません。

JavaScriptの場合は、see the doc of the Slick libraryの「イベント」セクション。それをテストしていませんが、親の属性を設定すると、多少のように行くかもしれない：

$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){ 
    nextSlide.parent().attr('data-active-element', nextSlide.attr('id')); 
}); 

リファレンスは General sibling selectors、 Adjacent sibling selectors