CODEWITHSUNDEEP
htmlcss
user3580480
user3580480

Reputation: 482

Incorrect CSS target for Text color

I have 2 CSS elements defined, one called horizontalmenu and another called footer-links. For some reason when I change the hover text color for one of the divs, it changes it for both.

Below is the HTML and CSS for the 2 sections in question.

HTML 

<ul> 
<li><a href="#">Home</a></li> 

<li> <a href="#">Products</a> 
<ul> 
<li><a href="#">Security</a></li>
<li><a href="#">Managed Networks</a></li>
<li><a href="#">Disaster Recovery</a></li>
<li><a href="#">Cloud</a></li>
</ul> 
</li> 

<li> <a href="#">Why Indigo?</a></li>

<li> <a href="#">About Us</a></li>

<li> <a href="#">Contact</a></li>

</ul>
</div>

<div class="bottombar">

        <div class="copyright">
        <h7>&copy; Copyright 2014 Company name</h7>
        </div>

        <div class="footer-links">
        <a href="#">Privacy Policy</a>&nbsp;|
        <a href="#">GC24</a>&nbsp;|
        <a href="#">Call Rates</a> 
        </div>

</div>

CSS

.horizontalmenu  a:link, a:visited{
color: #003399 !important;
}

#horizontalmenu li ul  li:hover a,
#horizontalmenu li ul li a:hover {
    color: #fff !important;

.footer-links a:link, a:visited{
    font: 'Gill Sans MT';
    font-size: 12px;
    font-weight: normal;
    text-decoration: none;
    color: #fff;
}

.footer-links a:hover{
    text-decoration: underline;
    color: #fff;
}

Could someone help me understand why this is happening?

Thanks,

Upvotes: 0

Views: 98

Answers (1)

Quentin
Quentin

Reputation: 943214

The comma does not have the precedence you think it does.

.horizontalmenu a:link, a:visited means:

Anchors that are unvisited links and descended from elements that are members of the horizontalmenu class
and
anchors that are visited links.

It does not mean:

Anchors that are unvisited links and descended from elements that are members of the horizontalmenu class
and
anchors that are visited links and descended from elements that are members of the horizontalmenu class

You need:

.horizontalmenu  a:link, .horizontalmenu a:visited

(And similar for all your other instances of the same problem)

Upvotes: 2

Related Questions