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

you could remove the a tag from the .dottedLink class in css, maybe that might solve the issue — AzizurRahamanCA
– AzizurRahamanCA, Commented Dec 2, 2016 at 14:31
What color is it changing to? It might be "visited" already. In your line .linkButton a, a:active, a:visited you have commas separating a few different elements. one of them being a:visited. This is probably the color you're seeing on any link that has been visited — ntgCleaner
– ntgCleaner, Commented Dec 2, 2016 at 14:31
Semantically it might me more useful to set those classes on the links themselves and not their container. — Bram Vanroy
– Bram Vanroy, Commented Dec 2, 2016 at 14:33

Rajshekar Reddy · Accepted Answer · 2016-12-02 14:38:09Z

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.

ntgCleaner · Accepted Answer · 2016-12-02 14:37:09Z

With your html the way it is and the CSS the way it is, You're probably seeing the :visited color on your link. Even if you were to change the color of the <span>, the link has it's own color which would override the span (since it's a child of the span).

The way to fix this is to specify the color of the link, rather than the span. You can do this by using the > CSS selector. Also by separating the specific element.

Your line here:

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

could make more sense by looking at it this way:

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

This should tell you that when you change .dottedLink a, you're also changing ANY a:visited and a:active.

A better way to change the color of just the .dottedLink a is to separate it out of that block.

.dottedLink a, a:visited, a:active {
    text-decoration: none;
    border-bottom: 1px dotted;
}
.dottedLink > a { /*This greater-than symbol means 'the direct child of' */
    color:#000000; /*Whatever color*/
}
a:visited, a:active {
    color: #0099CC;
}

Now you have the global dotted border on all a links AND the control to make them all separate colors.

Rajshekar Reddy · Accepted Answer · 2016-12-03 08:48:32Z

0

Use this,

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

instead of

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

Do the same for .linkButton. Now any change on .dottedLink won't affect .linkButton and vice versa. Hope it helps.

edited Dec 3, 2016 at 8:48

Rajshekar Reddy

19.1k4 gold badges45 silver badges64 bronze badges

answered Dec 2, 2016 at 14:32

Bla...

7,2887 gold badges30 silver badges47 bronze badges

Collectives™ on Stack Overflow

Basic CSS Issue, properties changing in multiple classes?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related