Squarespace How can I omit link styling from the footer only?

[Tusskipsneush]

Hello,

I've added a custom CSS link styling on my Squarespace site. I have an animated link styling that highlights the link on hover in a light color, which looks great on most of the site since it's light background with dark text. However, the footer has a dark background with light text, and the light block background on the link hover makes the link illegible in the footer. How can I omit this styling from the footer (or dark color theme) only?

Spoiler: My Code

You don't have permission to view the spoiler content. Log in or register now.

 

[sethforger]

You can do something like this:

a:where(:not(.footer *)) {
  /* Custom styles here that won't affect <a> tags in the footer */
}

 

[maher]

You can approach this in one of two ways.

Exclude the footer from your CSS using :not

Something like

:not(footer) a:hover {color: yellow}

Or you can write two rules, with the second overriding the first.

a:hover {color:yellow} footer a:hover {color:blue;}

 

[HostInstance]

.footer-class a:hover {
background-color: transparent; /* or set it to the desired dark color */
color: light-color; /* adjust to your light text color */
}