css specificity help

Discussion in 'General Webmaster Support' started by Slapshot136, Mar 30, 2012.

  1. Slapshot136

    Slapshot136 Divide et impera

    +483 / 2 / -0
    I have a website where I used a and a:hover to set the color for my links to white/light grey, but I want the links to be dark in my navbar, where I have it formatted using #header_nav_button id's - I have been trying all sorts of ways to re-arrange a and #header_nav_button, but I can't seem to override the while/light grey colors from the general a
  2. UndeadDragon

    UndeadDragon Super Moderator Staff Member

    +450 / 0 / -0
    You can overwrite a CSS rule using !important. An example of this in your situation would be:

    a { color: #fff; }
    a:hover { color: #eee; }

    #nav a { color: #c00 !important; }
    #nav a:hover { color: #a00 !important; }
    • Like Like x 1
  3. Slapshot136

    Slapshot136 Divide et impera

    +483 / 2 / -0
    thanks for the help, I didn't realize that #nav a:hover was the format that I needed to combine the two

    I didn't need to use the !important because a specified id is already more important then any entire page rules

Share This Page