Basic CSS Issue, properties changing in multiple classes?

Question

I'm a bit of a novice with CSS and currently banging my head against the table trying to figure out whats wrong with my code. The HTML:

<div id="loginForm">
    <span class="dottedLink"><a href="resetlogin">Recover login details</a></span><br>
    <span class="dottedLink"><a href="signup">Create an account</a></span> 
</div>
<div id="mainpageSplashImage"></div><br>   
<div id="titleDesciption">This is the Title</div>  
<div id="registerButtonPlacement"><a href="signup" class="linkButton">Register</a></div>

The CSS:

.dottedLink {
    font-family: sans-serif;
    font-size: .9em;
}
.dottedLink a, a:visited, a:active {
    color: #0099CC;
    text-decoration: none;
    border-bottom: 1px dotted;
}
.dottedLink a:hover {
    text-decoration: none;
    border: none;
    color: #990000;
}
.linkButton { 
    background: #CC0000;
    border: 1px solid #888888;
    padding: 5px;
    color: #FFF;
    font-size: 1em;
    cursor: pointer;
    font-family: sans-serif; 
    text-align: center;
    text-decoration: none;
    border-bottom: none;
}
.linkButton a, a:active, a:visited {
    color: #FFFFFF;
}
.linkButton:hover { 
    background: #FFFFFF;
    border: 1px solid #888888;
    padding: 5px;
    color: #CC0000;
    font-size: 1em;
    cursor: pointer; 
    text-decoration: none;
}

The main problem being, I cannont change the 'color' property (and ONLY the 'color' property) of 'dottedLink' without also changing the color property of 'linkButton'. Meaning, if i change the color of one class, the color o the other class also automatically changes. I've tested this in other browsers, and it seems to only be happening in firefox and I don't know why. Please help, this is so frustrating

Answer 1

Problem: The way you think it works...

Explanation: Consider this code.

.dottedLink a, a:visited, a:active {
    color: #0099CC;
    text-decoration: none;
    border-bottom: 1px dotted;
}

it will select the a tags under .dottedLink class as per .dottedLink a, it selects all the a tags as per a:visited and a:visited. And hence you are not targetting only the a tags under the desired class element but all the a tags. So the mentioned styles is applies to all a tags in your page

Continuing the issue. You have this code

.linkButton a, a:active, a:visited {
    color: #FFFFFF;
}

which again is the same case.. chooses all the a tags and applies that style.

Solution: is to refactor your code to target specific a tags like

.dottedLink a, .dottedLink a:visited, .dottedLink a:active {

and

  .linkButton a, .linkButton a:active, .linkButton a:visited {

Remember each , separated selector acts on its own and is not linked with its preceding selectors as you think..

So this example

.linkButton a, a:active, a:visited {
        color: #FFFFFF;
    }

is equivalent to

.linkButton a {
  color: #FFFFFF;
}
a:active{
  color: #FFFFFF;
}
.a:visited {
  color: #FFFFFF;
}

Hope you get the logic.