Question

The lines of Code bellow does everything it is asked to do except for one thing, It doesn’t change the color of the selected link but it assigns a background to it as asked. It is part of a WordPress Theme.

#rack #header #nabar ul li a {
    color: #FFC;
}


#rack #header #mainNav ul li.current-menu-item {
    height: 21px;
    width: auto;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 4px solid #EBF3EE;
    background-color: #EBF3EE;
    float: left;
    position: relative;
    padding-bottom: 19px;
    color: #000;
}

Answer 1

Assuming the selected node markup has an a tag, I would suggest targeting the a tag within the selected li. This should be sufficient to override your base a tag properties.

#rack #header #mainNav ul li.current-menu-item a {
    color: #000;
}