Different Color Links on the Same Page

  • Resolved Loek

    (@loek11)


    2 years, 3 months ago

    In the costumizer I put under Additional CSS

    a {
    outline: none;
    color: #519585;
    }

    a:hover {
    color: #f9a392 !important;
    }

    a:visited {
    color: #519585;
    }

    Works well for all text links.

    But when I assign a class, nothing happens.

    a.class1 {
    outline: none;
    color: #519585;
    }

    a.class1:hover {
    color: #f9a392 !important;
    }

    a.class1:visited {
    color: #519585;
    }

    And then in the additional css in the P box, where the link belongs:
    class1

    And then it all doesn’t work. What am I doing wrong?

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Kathryn Presner

    (@zoonini)

    If you’re putting the custom class on the paragraph block, then the CSS structure needs to be this, because the a tag is inside the paragraph tag:

    .class1 a:hover {
  color: #bb00bb;
}

    Do try to avoid !important in CSS, as it creates lots of issues with the cascade; often it’s only needed to override inline CSS. If your CSS isn’t working without !important it usually means the element you’re targetting isn’t specific enough, in CSS terms.

    More about CSS specificity: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

    Thread Starter Loek

    (@loek11)

    Txt again Kathrijn. Solved. It is exciting to make a new website again, but now in the latest theme. Your help will come in handy.

    Greetings
    Loek from Amsterdam, The Netherlands

    Moderator Kathryn Presner

    (@zoonini)

    You’re very welcome, glad that helped, and good luck with the rest of the site-creation process! Feel free to start a new thread if you need help with something else.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Different Color Links on the Same Page’ is closed to new replies.