Ways to modify the styles of two unique IDs located within separate classes

Let me share what I'm searching for.

I've set up a carousel that displays 7 SVG icons, each identified by an id.

To customize the appearance of the current icon, I'm using the following CSS:

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

The .slick-current class belongs to the div, and the #icon-1 refers to an svg element inside that div.

As the carousel cycles through, I have similar CSS styles targeting the current icon with different colors. Additionally, I want to target a separate div containing a different icon and apply some CSS to it simultaneously:

For instance, if the slick-current class has an SVG with #icon-1, then I aim to modify the .slick-active div containing the SVG #icon-3. Is there a way to merge these actions together?

Below is the Carousel HTML code snippet:

        <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 script snippet:

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

Keep in mind that classes .slick-current, .slick-active, and other classes are automatically added to the divs by slick.js.

The resulting layout appears as follows:

<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>
javascriptjquerycss

Answer №1

When dealing with multiple dimensions in CSS, using general `~` and adjacent `+` sibling selectors may work for one dimension but not when children are involved. Typically, the approach is to use a script to set a flag on a parent element and then customize the rules of the children based on that flag, especially useful when working with carousels. For instance, setting a `data-active-element="icon-1"` attribute on the parent could trigger a rule like:

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

While it may not be the most elegant solution, it can get the job done.

As for the JavaScript aspect, you can refer to the documentation of the Slick library under the "events" section for guidance. Though untested, updating the parent's attribute could potentially look something like this:

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

Additional resources: General sibling selectors, Adjacent sibling selectors

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Clicking to close tabs

I am currently working on implementing a tab functionality on my website and I want these tabs to be responsive. Here is the code snippet I have been using: function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.ge ...

javascriptjqueryhtmlcss

Using TailwindCSS with Vite in a vanilla JavaScript project: A step-by-step guide

As a beginner, I feel like I'm losing my mind trying to figure this out. I've watched countless tutorials and read through numerous documents, but still can't seem to get it working. Does anyone have any advice on how to successfully integra ...

htmlcssnpmtailwind-cssvite

Is there a way to position the twitter embed at the center of a webpage?

I am attempting to embed a Twitter video and twit in such a manner that they are perfectly centered on the page and also take up the entire width of the container (my-container). Here is the HTML code that I currently have: <div class="my-container"&g ...

htmlcsstwitter

How to eliminate background after Ajax call is done using jQuery?

After successfully creating my own tooltips with jQuery and Ajax to pull content from an external file, I encountered a problem. I have a loading.gif animation in the background of the container that I want to remove once the ajax content loads. Can anyone ...

jqueryajax

Retrieve the Typescript data type as a variable

I have the following components: type TestComponentProps = { title: string; } const TestComponent: React.FC<TestComponentProps> = ({ title, }) => { return <div>TestComponent: {title}</div>; }; type TestComponent2Props = { bod ...

javascriptreactjstypescript

Using @keyup/@input events on Vue data property causes issues with form inputs

I'm having an issue with attaching a character counter to an input element. After displaying it back to the user, the input stops allowing me to enter more characters into the input box. <template> <div> <label class="l ...

javascriptvue.js

Extracting values from a JSON object in JavaScript

Is there a way to retrieve the _id and state values from the provided data? Check out the data { "data": { "totalSamplesTested": "578841", "totalConfirmedCases": 61307, "totalActiveC ...

javascriptarraysjsondestructuring

The use of the || operator within arguments

I am facing a challenge: //this console log displays correct value console.log('localstorage', localStorage.getItem('subMenu')); setSubMenu( JSON.parse(localStorage.getItem('subMenu') || JSON.stringify(s ...

javascriptreactjstypescript

Having trouble with a Vue3 project after running a Vite build in production mode?

When I run my project in development mode, everything works perfectly fine. However, when I build the project using `vite build´, some components stop functioning. Oddly enough, there are no errors displayed in the console or in the build logs. If I use ...

javascriptvue.jsvite

The tale of a div's mysterious empty room

Once upon a time, in the world of HTML and CSS, there existed a lonely div. This lonely div longed for companionship, and one day, an inline img came to visit. They formed a bond and became good friends. But, no matter how hard the img tried, it couldn&apo ...

htmlcss

Alert: An invalid value of `false` was received for the non-boolean attribute `className`. To properly write this to the DOM, please provide a string instead: className="false" or use a different

While many have tried to address this issue before, none of their solutions seem to work for me... The error I am encountering is: If you want to write it to the DOM, pass a string instead: className="false" or className={value.toString()}. If ...

javascriptreactjsnext.js

Using Javascript, capture user input to execute a search function without the need for a submit button

I am attempting to retrieve input from a textbox and utilize that value to conduct a search without the need for a submit button. The goal is for the search results to be displayed on the page as soon as the content in the textbox changes. I have been br ...

javascripthtmlformstextboxuri

Exploring the use of jQuery/JS for parsing and working with JSON

Hi everyone, I need some assistance with displaying data from an array created by a PHP file using JS/jQuery. Currently, I am working on implementing a points system for ZetaBoards which you can check out here. The points will be shown below the user' ...

phpjavascriptjqueryarraysjson

I attempted to implement a login feature using a prompt within a React application, but I encountered a situation where the browser asked me for the same details twice. How can I resolve

https://i.sstatic.net/nhuC1.png I've been working on adding a login feature to my webpage where the content is only rendered if users input valid credentials. However, I've encountered a problem where the browser prompts for credentials twice in ...

javascriptreactjs

Function call fails when parameters are passed

I've been grappling with this conundrum for a few weeks now, on and off. Perhaps someone else will spot the glaringly obvious thing that I seem to be overlooking. At the present moment, my primary goal is to simply confirm that the function is operat ...

javascripthtmlgoogle-apps-script

Codeigniter's post method is malfunctioning

I've been working with HMVC CodeIgniter and attempting to use jQuery Ajax for the first time. I encountered an error when using POST, but received the data successfully when using GET. $.ajax({ type: "POST", url: filelink ...

phpjqueryajaxcodeigniter

Looking for a simple method to apply experimental and consistent CSS across various browsers?

Is there a tool available that can automatically enhance CSS by adding experimental properties to ensure consistent appearance across different browsers? For instance, rather than manually including: .class { -moz-border-radius: 8px; -webkit-borde ...

gradientcss

A step-by-step guide on implementing the bliss view engine in Express.js instead of Jade

Is there a way to utilize the bliss view engine instead of the typical jade engine in Express JS? I came across an article on Stack Overflow, but it seems to be geared towards an older version of express.js. I am using version 3.x. Specifically, I am int ...

javascriptnode.jsexpress

Why is the click function being invoked twice, but exclusively on the initial click?

In my current project, I am facing an issue with the onClick action that is being passed down from Context. Strangely, when this action is clicked for the first time, it fires twice. However, from the second click onwards, it functions normally and only fi ...

javascriptreactjs

Error: The method being called on this.props is not recognized as a valid function

I'm encountering an error in my code TypeError: this.props.* is not a function I've been trying to troubleshoot it but so far I haven't been able to identify what's causing the issue. I've attempted different methods, includin ...

javascriptreactjsfunctionreact-props