Question

Kind of hard to explain, so here’s some code.

So I have this CSS, which makes all links an orangish color. It encompases the entire page.

#pageContent a:link,a:visited, a:hover, a:active {
    color: #EE4036; 
}

And then I have an element of id sideMenu somewhere within the pageContent id,

#sideMenu a:link, a:visited, a:hover, a:active{
    color:#58595B;

}

The problem is that for some reason sideMenu’s given link color is overwriting pageContent’s link color for links that aren’t children of sideMenu.

for example, if I had

<div id="pageContent" >
   <a>this text should be #EE4036</a>
   <div id="sideMenu">
      <a>this text should be #58595B</a>
   </div>
</div>

sideMenu’s <a> text content would get set to the color #58595B as expected, but so would pageContent’s, which is what I wouldn’t expect.

I’m a bit new to CSS so I feel like I’m missing some super obvious rule and google isn’t helping at all. So, anyone know what’s going on?

Answer 1

You would need to prefix each selector with the ID:

#sideMenu a:link, #sideMenu a:visited, #sideMenu a:hover, #sideMenu a:active {
    color:#58595B;
}

Currently, your selector says match “links that are descendants of an element with ID “slideMenu”, links that have been visited, links that are being hovered, and active links”.

Basically, when you use the comma to create a group of selectors, each individual selector is completely independent. There is no relationship between them.