So ändern Sie zwei ID CSS in zwei verschiedenen Klassen

Question

Hier ist, was ich suche.

Ich benutze ein Karussell, das durch 7 Svg Symbole gleitet. Jedes Symbol hat eine id.

Ich ändere die CSS des derzeit mit dem folgende CSS angezeigt Symbols:

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

.slick-current eine Klasse des div ist, das #icon-1 ist ein svg Element innerhalb dieser div.

Während das Karussell durchläuft, habe ich 7 CSS-Stile wie die oben, die auf das aktuelle Symbol zielt und verschiedene Farben anwendet. Was ich gleichzeitig tun möchte ist, ein anderes Div mit einem anderen Icon anzusprechen und etwas css darauf anzuwenden. Zum Beispiel:

Wenn slick-current ein svg mit #icon-1 hat dann will ich .slick-active div ändern, die svg #icon-3 enthält. Gibt es eine Möglichkeit, diese beiden miteinander zu kombinieren?

Carousel Code:

 <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 Code:

$('.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 
}); 

Die Klassen .slick-current und. slick-active und andere Klassen werden von slick.js zu den divs hinzugefügt.

Die Ausgabe sieht wie folgt aus:

<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

Wenn es nur für eine Dimension war man + Geschwister Selektoren einige Erfolge mit allgemeinem ~ und angrenzenden haben könnte, aber mit betroffenen Kindern Ich glaube nicht, es möglich ist, in reines CSS. Wenn ich es richtig verstanden habe (HTML/JS-Beispiel würde helfen), wird die Art und Weise, wie diese Szenarien gehandhabt werden, ein Flag für ein Elternelement durch ein Skript gesetzt und die Regeln der Kinder entsprechend angepasst (was kein Problem sein sollte) wenn man bedenkt, dass man ein Karussell benutzt). Zum Beispiel bei der Einstellung data-active-element="icon-1" Attributs auf dem übergeordneten dann könnte eine Regel:

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

Nicht sehr elegant, aber arbeitet.

Für den JavaScript-Teil, in Ihrem Fall see the doc of the Slick library, Abschnitt "Ereignisse"; nicht getestet haben, aber das übergeordnete Attribut Einstellung gehen könnte etwas wie folgt aus:

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

Referenz General sibling selectors, Adjacent sibling selectors