Web Hosting Forum - Net Hosting Talk

We are a community of individuals and businesses passionate about web hosting. Let's build, learn, and grow together.

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



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?

You don't have permission to view the spoiler content. Log in or register now.
  • Advertisement
  • 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;}
  • Advertisement
  • .footer-class a:hover {
    background-color: transparent; /* or set it to the desired dark color */
    color: light-color; /* adjust to your light text color */