CODEWITHSUNDEEP
htmlcssstylesheet
Kev
Kev

Reputation: 119816

Why is my CSS anchor style being overridden?

I'm trying to re-theme ScrewTurn Wiki. There's a basic structure to the page which is documented here:

ScrewTurn Wiki Theming Reference

There's some predefined classes for different types of links, for example:

a, a:link, a:active {
    color: #ffffff;
    text-decoration: none;
}
a:hover {
    color: #D9671E;
    text-decoration: underline;
}

a.externallink {
    background-image: url(Images/ExternalLink.gif);
    background-position: right;
    background-repeat: no-repeat;
    padding-right: 14px;
}
a.internallink {
}

/* Link to a .aspx page */
a.systemlink {
}

/* Link to a Wiki page */
a.pagelink {
}

I need to change the color of these links depending on which container they reside in. The reason being is that my header is dark blue and my side bar is white.

I tried this:

/* Make header links white because of dark background */
#HeaderDiv a.pagelink, a.systemlink, a.externallink {
    color: white;
}

#SidebarDiv a.pagelink, a.systemlink, a.externallink {
    color: darkblue;
}

However the #SideBarDiv color overrides the the #HeaderDiv links. The SideBarDiv container is not a child of HeaderDiv.

The links in the containers simply set the class depending on what they do, i.e.:

<a href=".." class="systemlink">Logon</a>
<a href=".." class="pagelink">Some wiki article</a>

What am I missing here? Bear in mind I'm a complete freshman when it comes to CSS.

Upvotes: 3

Views: 3253

Answers (1)

BoltClock
BoltClock

Reputation: 723749

You need to qualify all your a selectors with their respective div ID selectors:

#HeaderDiv a.pagelink, #HeaderDiv a.systemlink, #HeaderDiv a.externallink {
    color: white;
}

#SidebarDiv a.pagelink, #SidebarDiv a.systemlink, #SidebarDiv a.externallink {
    color: darkblue;
}

Otherwise the last two parts of the second ruleset end up overriding styles for all a.systemlink and a.externallink elements in your pages.

Upvotes: 5

Related Questions