Unique ID CSS | Why is my styling being picked up elsewhere? - css

Question

A tricky one here.
I have styling for two UL's on a page which both contain anchors.
Each of the UL's have their own specific ID and specific styling which is all correct.
Here is the confusing part - say I have this:
#nav {
margin: 20px 0 0 0;
}
#nav li {
float: left;
}
#nav li a {
display: block;
text-transform: uppercase;
color: #555454;
font-size: 14px;
padding: 11px 17px;
}
And then this:
#gt-list
{
margin: 10px 0 0 0;
}
#gt-list li, a
{
color: #fff;
margin: 0 0 10px 0;
}
#gt-list li a:hover
{
color: #ff6b00;
}
#gt-list li img
{
float: left;
margin: 0 15px 0 0;
width: 20px;
}
#gt-list li span
{
float: left;
display: inline-block;
margin: 2px 0 0 0;
}
Here is HTML to go with:
<ul id="nav">
<li class="selected">
<a href="#">
Home
</a>
</li>
<li>
<a href="#">
About us
</a>
</li>
<li>
<a href="#">
Ways to give
</a>
</li>
<li>
<a href="#">
Our Work
</a>
</li>
<li>
<a href="#">
News
</a>
</li>
<li>
<a href="#">
Learn
</a>
</li>
<li>
<a href="#">
Contact Us
</a>
</li>
</ul>
The above is actual styling used on a site.
So here is my issue: the #nav is picking up the LI styling from #gt-list along with anchor styling.
I have inserted all parent div ID's to each UL and this had no affect.
I don't understand this!?!?

Answer 1

This rule has a comma in it, which means it will be applied to all li elements under the one with that id AND all anchor elements, regardless of where they are.
#gt-list li, a

Answer 2

The culprit is:
#gt-list li, a
{
color: #fff;
margin: 0 0 10px 0;
}
The comma between li and a causes the styles specified to be applied to a globally as it denotes:
All li within #gt-list AND all a.
Whereas what you want it to read is:
All li AND a within #gt-list
Change it to
#gt-list li a
{
color: #fff;
margin: 0 0 10px 0;
}