Basically, I have two Plotly Dash dropdowns. I loaded custom CSS upon page load like this. Each child of my select keywords dropdown selected has a designated color in my custom CSS. Now, I have another dropdown that I want to color dependent on the colors of the first dropdown. For example:

11797656 asset has the Agedwip keyword. So, I would like it to be red like the keyword Agedwip element. This is hard to achieve because the CSS I have been using is from a static file which is loaded only upon page load. So even if I know the color 11797656 should be, I cannot actually alter the CSS and make it that color as far as I know, since it would not read the file and update the CSS in the browser.

I figured using custom javascript would make this possible, if I could directly alter the browser's CSS as opposed to just the static file that I loaded as a stylesheet. The way I am thinking about this now is...create a javascript function that will alter the color of a specific element, find a library with a javascript interpreter that has Python bindings, call the javascript function from within Python and pass it the necessary values which should update my browser's CSS.

Example:

javascript function( child_index_num, color )
    alter asset css with child_index_num to give it color I want

Here is the code I currently use, to define the keyword static CSS upon page load. There are many more elements, this is just the first 3 for sake of understanding how I do this:

#keyword-selection .Select--multi .Select-control .Select-multi-value-wrapper .Select-value:nth-child(1) {
    background-color: rgb(228,26,28);
    border-color: "grey";
    color: #fff;
}

#keyword-selection .Select--multi .Select-control .Select-multi-value-wrapper .Select-value:nth-child(2) {
    background-color: rgb(55,126,184);
    border-color: "grey";
    color: #fff;
}

#keyword-selection .Select--multi .Select-control .Select-multi-value-wrapper .Select-value:nth-child(3) {
    background-color: rgb(77,175,74);
    border-color: "grey";
    color: #fff;
}

Essentially just a color for each spot that could possibly exist. Can someone validate my idea for coloring select assets prior to me trying it, or provide a better alternative? Or is this just not possible to do/would it slow down my website drastically to implement? I am a novice with Javascript, so this solution was a bit out of my comfort zone. Feedback would be appreciated, thank you!