CODEWITHSUNDEEP
htmlcss
Brandon
Brandon

Reputation: 79

Basic CSS Issue, properties changing in multiple classes?

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

Upvotes: 3

Views: 59

Answers (3)

Bla...
Bla...

Reputation: 7288

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.

Upvotes: 0

Rajshekar Reddy
Rajshekar Reddy

Reputation: 18987

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.

Upvotes: 1

ntgCleaner
ntgCleaner

Reputation: 5985

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.

Upvotes: 0

Related Questions