WordPress.org

Forums

[closed] An overiding style for links (7 posts)

  1. mellyg
    Member
    Posted 1 year ago #

    I have some style that is overriding the colour of my links.

    I have looked in Safari developer tools and it is called:

    a:-webkit-any-link {
    color: -webkit-link;
    text-decoration: underline;
    cursor: auto;
    }

    But I cant find it anywhere in the style sheet, does anyone know how I might fix this?

    Many thanks
    Mel

  2. graphicscove
    Member
    Posted 1 year ago #

    a:any-link is a new pseudo-class. It matches an 'a' tag that that has :link or :visited.

    You should be able to override this by putting the following at the bottom of your style.css:

    a {
     color: red;
    }
    a:visited {
     color: red;
    }

    Alternatively if this doesn't work just add an !important after each:

    a {
     color: red!important;
    }
    a:visited {
     color: red!important;
    }

    Obviously change 'red' for your colour. A link to your site might also he helpful in the future. Let me know if this works for you :)

  3. mellyg
    Member
    Posted 1 year ago #

    Heya thanks for the response.

    Yes, that changed the links, the problem with it is that it changes the colour of all of the links in the nav bar, and I need them to be different.

    There current style is below, but its not getting picked up. Any ideas?
    nav a {
    color:#FFF;
    }

  4. graphicscove
    Member
    Posted 1 year ago #

    Sounds like you've used the CSS I provided with the !important at the end so you will also need to add !important to the end of the colour for the navigation:

    nav a {
      color: #fff!important;
    }

    The colours will affect all links so check this isn't affecting anywhere else in your theme.

  5. mellyg
    Member
    Posted 1 year ago #

    Yes - that worked, thanks a million.

  6. graphicscove
    Member
    Posted 1 year ago #

    No problem, glad I could be of assistance!

  7. MilkyTech
    Member
    Posted 1 year ago #

    @graphicscove
    I'm having a similar issue. I understand why !important can correct the issue but I don't understand why it happened in the first place. I was working on the site last night and the text-decoration and :hover was working fine but I guess I was messing around with some other css and when I get up this morning, chrome is overriding with a:-webkit-any-link. I can't find anything I did to cause this but obviously I did something.

Topic Closed

This topic has been closed to new replies.

About this Topic