Possible to update CSS dynamically in Plotly Dash?

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.


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!

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum