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

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;
    }