How to change CSS style of nested list items?

Question

I have a style for styling <a> elements in list items in a #navigation container. This is working fine.

#navigation li a {
  text-decoration:none;
  background:#bfe5ff;
  color:#045e9f;
  width:125px;
  height:35px;
  padding-top:11px;
  display:block;
  float:left;
  margin-left:2px;
  text-align:center;
  font-size:18px;
  font-weight:bold;
}

Now in some <li>s I am inserting <div>s. In these I am again using a list again, but it should be different in style or have no style.

When I put in <li>s, their style matches the outer <li> elements, but it should not.

I am trying to use this:

#newnavigation li a { 
  font-size:12px;
  margin-left:20px;
}

but it's not working - it applies the "outer" styles.

This is my markup:

<ul id="navigation"> 
  <li><a href="index.html">Home</a></li> 
  <li><a href="about.html">About</a></li> 
  <li><a href="contact.html">Contact</a></li> 
  <li class="browse">
    <a href="#">Browse</a>
    <div id="browsecontainer">
      <h3>Browse By Category</h3>
      <li><a href="#"></a></li>
    </div>
  </li>
</ul>

Answer 1

I'm guessing it's something like this?

<ul id="navigation">
    <li><a href="#">link</a></li>
    <li><ul id="newnavigation"><li><a href="#">link</a></li></ul></li>
</ul>

I copy and pasted your styles and it's working fine. What is it exactly that is not working?

Update:

My guess wasn't quite right. In the code you show there is no id="newnavigation" to match the #newnavigation css selector.

Answer 2

Your css is targetting the #id newnavigation but your ul #id is navigation Try the following:

<ul id="navigation"> 
  <li><a href="index.html">Home</a></li> 
  <li><a href="about.html">About</a></li> 
  <li><a href="contact.html">Contact</a></li> 
  <li class="browse">
    <a href="#">Browse</a>
    <div id="browsecontainer">
      <h3>Browse By Category</h3>
      <ul id="newnavigation">
          <li><a href="#">First category</a></li>
      </ul>
    </div>
  </li>
</ul>

Answer 3

To select the inner-items, just nest them:

/** Matches outer *AND* inner LIs */
#navigation li {
}

/** Matches inner LIs only (li within li within #navigation) */
#navigation li li {
}

Or, to match the anchors:

#navigation li a {}
#navigation li li a {}

In the inner styles, you will start with a styleset inherited from the outer styles, so you might want to 'undo' some settings by overriding them to fit your needs.

Answer 4

Note that your markup is invalid. To insert new items you should also insert new lists, i.e.:

<ul id="newnavigation>
  <li>
    <div>
      <ul>
        <li></li>
      </ul>
    </div>
  </li>
</ul>

It's always a good thing to validate your markup when you have problems with your style, Javascript, etc.

Having said that, to match only inner LIs, the CSS rule you need is:

#newnavigation li ul li{
  // stuff here
}

Answer 5

It will continue to apply the outer styles - that's the "C" in CSS, cascading. Your new styles are being picked up correctly, but if I am reading the question right you are trying to eliminate the other "inherited" styles like the background colour?

If you want the outer styles to not be applied, then you either need to be using an element that doesn't match the outer pattern (i.e. not an li, not practical here), or to be overriding the styles you don't want applied. If you really only want these styles applied to the outer set of li elements, then consider as an alternative using a CSS class on the outer li elements and applying the formatting you don't want inherited to that class directly.

Answer 6

You can also use a child selector like : #navigation > li

So only the outer li is styled.

Note that IE6 and below does no support child selectors.

Answer 7

hmm still trying to figure it out I have the same problem, thanks for more info about about nesting and inherited style for css very interesting.