Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Change colour of link

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #45647
    ocholloh
    Member

    I cant get the font colour to change. I want to change it for the active page. not javascript for now.

    I have

    and Ive tried

    #navbar{
    position: absolute;
    top: 40px ;
    margin-left:750px;
    z-index: 9;
    }

    #navbar ul {
    margin: 0;
    padding: 5px;
    list-style-type: none;
    text-align: center;
    }

    #navbar ul li {
    display: inline;
    }

    #navbar ul li a {
    text-decoration: none;
    padding: .2em 1em;
    color: #484848;
    }

    #navbar ul li a:hover {
    color: #484848;
    background-color: #fff;
    -webkit-transform: rotate(-10deg) scale(1.2);
    -moz-transform: rotate(-10deg) scale(1.2);
    -o-transform: rotate(-10deg) scale(1.2);
    }

    .currentLink {
    color: #94c950;
    }

    The class does not affect the colour and the transform does not work either. Ive tried different solutions from forums and it just sits there like a big eyed toad doing nothing.

    What am I doing wrong?

    #139333
    CrocoDillon
    Participant

    It’s because of specificity issues. `#navbar ul li a` has a specificity of 0.1.0.3 and `.currentLink` of 0.0.1.0. You can try `#navbar .currentLink` (specificity 0.1.1.0), but you would avoid things like this by not over-specifying selectors and not using id selectors in css.

    http://www.w3.org/TR/CSS2/cascade.html#specificity

    #139346
    ocholloh
    Member

    Thanks CroclDillon,
    Still cant make it work and thats a whole of reading up you’ve just gave me to do.

    I was under the impression that cascade meant that it would take the last entry and over ride previous. Guess I was wrong.

    #139355
    ocholloh
    Member

    Brilliant,
    Thanks Alex that works.

    #139379
    CrocoDillon
    Participant

    If specificity is the same, the last entry overwrites previous ones ;)

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.