Having trouble with CSS basics? Seeing properties change across multiple classes?

Question

Having trouble with CSS basics? Seeing properties change across multiple classes?

My CSS skills are still in the beginner stage and I am currently struggling to troubleshoot an issue 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 issue I'm facing is that changing the 'color' property of 'dottedLink' also affects the color property of 'linkButton'. This problem seems to occur only in Firefox and not other browsers. Any help on resolving this frustrating problem would be greatly appreciated.

html css

Answer 1

Answer №1

Issue: The current approach you have in mind...

Explanation: Take a look at this piece of code.

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

This will target all the a tags under the .dottedLink class with .dottedLink a, and it will select all a tags as per both a:visited and a:visited. As a result, the specified styles will be applied to every a tag on your webpage.

The issue persists with the code below

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

which once again selects all a tags and applies the same style.

Solution: To resolve this, refine your code to specifically target a tags like so

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

and

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

Remember each selector separated by commas functions independently and is not connected to previous selectors as you might assume..

Therefore, the following example

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

is essentially equivalent to

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

I trust that the reasoning behind this is clear.

Answer 2

Issue: The current approach you have in mind...

Explanation: Take a look at this piece of code.

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

This will target all the a tags under the .dottedLink class with .dottedLink a, and it will select all a tags as per both a:visited and a:visited. As a result, the specified styles will be applied to every a tag on your webpage.

The issue persists with the code below

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

which once again selects all a tags and applies the same style.

Solution: To resolve this, refine your code to specifically target a tags like so

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

and

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

Remember each selector separated by commas functions independently and is not connected to previous selectors as you might assume..

Therefore, the following example

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

is essentially equivalent to

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

I trust that the reasoning behind this is clear.

Answer 3

Answer №2

Considering the current structure of your HTML and CSS, it is likely that you are observing the color defined by the :visited selector for your link. Even if you attempt to modify the color of the <span>, the link has its own default color which takes precedence over the span (as it is a child element).

To resolve this issue, it is recommended to specify the color directly for the link instead of the span. This can be achieved using the CSS > selector while also separating out the specific elements.

Your original code snippet:

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

By reorganizing it as shown below:

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

This revision emphasizes that changes made to .dottedLink a will affect all instances of a:visited and a:active.

A more effective approach to altering the color of just the .dottedLink a is to separate it from the rest of the CSS block.

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

With this adjustment, you maintain the consistent dotted border on all a links while gaining the flexibility to assign individual colors to each one.

Answer 4

Considering the current structure of your HTML and CSS, it is likely that you are observing the color defined by the :visited selector for your link. Even if you attempt to modify the color of the <span>, the link has its own default color which takes precedence over the span (as it is a child element).

To resolve this issue, it is recommended to specify the color directly for the link instead of the span. This can be achieved using the CSS > selector while also separating out the specific elements.

Your original code snippet:

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

By reorganizing it as shown below:

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

This revision emphasizes that changes made to .dottedLink a will affect all instances of a:visited and a:active.

A more effective approach to altering the color of just the .dottedLink a is to separate it from the rest of the CSS block.

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

With this adjustment, you maintain the consistent dotted border on all a links while gaining the flexibility to assign individual colors to each one.

Answer 5

Answer №3

Try using this method:

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

Instead of the following:

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

You can also apply the same technique to .buttonStyle. This way, changes made to .dottedStyle won't impact .buttonStyle and vice versa. Hopefully, this solution is helpful.

Answer 6

Try using this method:

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

Instead of the following:

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

You can also apply the same technique to .buttonStyle. This way, changes made to .dottedStyle won't impact .buttonStyle and vice versa. Hopefully, this solution is helpful.

Having trouble with CSS basics? Seeing properties change across multiple classes?

Answer №1

Answer №2

Answer №3

Similar questions

Generate an image on Canvas using a URL link

Setting the chosen value within a nested ng-repeat loop

Update the CSS for InputLabel

How to conceal sections of a webpage until a child component is successfully loaded with vue

Adjust the row based on the smallest picture

"Discover the step-by-step process of transforming an input field value into a checkbox with

What is the best way to adjust the height of my website to properly display on all screen sizes

Implement a default dropdown menu that displays the current month using Angular and TypeScript

Leveraging BeautifulSoup for retrieving targeted dl and dd item listings

How does Angular5 perform with Bootstrap4?

What is the process for populating a checkbox with data from a configuration file using JavaScript?

"Utilizing Bootstrap to create a visually appealing image and text combination in the

I'm having trouble getting the footer to stay at the bottom of my website

Style the ul and li elements inside a div using CSS

Adjusting the color of a value in justGage requires a few simple steps to

Access information through token-based verification

Tips for integrating a vertical menu with button icons and subcategories

Is there a way to switch the sorting order on a Bootstrap page using a button without having to refresh the page?

The issue of pseudo elements not functioning properly in Material-UI makeStyles with React.js has been a frustrating

Sophisticated filter - Conceal Ancestry