CODEWITHSUNDEEP
htmlcssnavigationhyperlink
loomie
loomie

Reputation: 616

CSS - Different classes but link color doesn't change

I have two kind of links, the one should be white, the other links should be black. Therefore I added a class to the first navigation

<nav class="navigation">
        <a href="#about" onclick="openAbout()" class="nav">Über mich</a>
</nav>

In CSS I now did this

.navigation
{
    float:right;
    margin-top:15pt;

}

.navigation a, a:visited, a:active{
    color:white;
    text-decoration:none;
    margin-left:20px;
}

.navigation a:hover
{
    color:white;
    text-decoration:underline;
    text-decoration-color: red;
    margin-left:20px;
}

Now I have other links that should be displayed in black and not in white

<b>Source Code runterladen:</b> <a href="http://theo-tzaferis.de/projectCode/assmash.zip" class="sourceCode">Link</a>

Note that this link IS NOT inside a navigation tag. So I did this in CSS

.sourceCode a, .sourceCode a:hover, .sourceCode a:visited, .sourceCode a:active
{
    color:black;
}

But the problem is that both links are either white or black. I want them to be different, but it doesn't work and I don't really know why.

Here's the complete source code

http://jsfiddle.net/bVN9X/

Note that the Links in the header are white, but also the links that should be under "Projekte" are white, too. I don't really know why.

Upvotes: 0

Views: 709

Answers (2)

web2008
web2008

Reputation: 914

You should change you css as shown below:

a.sourceCode, a.sourceCode:hover, a.sourceCode:visited, a.sourceCode:active
{
    color:black;
}

Upvotes: 0

pzin
pzin

Reputation: 4248

Your selector must be defined in this way:

a.sourceCode

Because the way you have it now, it's looking for an a tag inside something with a sourceCode class.

Upvotes: 3

Related Questions