I’m trying to change an image filter based on if an image slide has fired. The slide has an element id and another element of true or false. I want to change the logo image color in the header based on the image in the slider. So when the slide with a specific ID is “true” then change the color of the logo.

I can target the specific slide correctly like so:

  .gallery-fullscreen-slideshow-item[data-slide-url="57osss8q31q4c9s9og52pv8j67tblh"].gallery-fullscreen-slideshow-item[data-active="true"] {CSS HERE;}

What I need to do is change the filter attribute on a header class that is above this element on the page.

Something like:

  .gallery-fullscreen-slideshow-item[data-slide-url="57osss8q31q4c9s9og52pv8j67tblh"].gallery-fullscreen-slideshow-item[data-active="true"] {.HEADER-ELEMENT:CSS HERE;}

Is this even possible? I was toying with using @include but I still can’t select the header class.

I have the IF I just don’t know how to THEN.

This is for a squarespace site.