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>

unable to figure it out m putting under code tag but...i made it wiki — Yasir
– Yasir, Commented Mar 26, 2009 at 13:16

David M · Accepted Answer · 2009-03-26 13:29:39Z

2

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.

answered Mar 26, 2009 at 13:29

community wiki

David M

Sign up to request clarification or add additional context in comments.

Comments

Steerpike · Accepted Answer · 2009-03-26 13:18:50Z

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>

answered Mar 26, 2009 at 13:18

community wiki

Steerpike

1 Comment

Steerpike Over a year ago

It will always apply the outer styles to the inner li's unless you specifically overwrite them. That's what 'cascade' means in CSS.

Ferdinand Beyer · Accepted Answer · 2009-03-26 13:26:03Z

1

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.

answered Mar 26, 2009 at 13:26

Ferdinand Beyer

67.6k18 gold badges161 silver badges147 bronze badges

Comments

Seb · Accepted Answer · 2009-03-26 13:26:47Z

1

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
}

answered Mar 26, 2009 at 13:26

community wiki

Seb

Comments

Abdu · Accepted Answer · 2009-06-17 03:51:23Z

1

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.

answered Jun 17, 2009 at 3:51

community wiki

Abdu

Comments

Rezlaj · Accepted Answer · 2009-03-26 13:18:26Z

0

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.

answered Mar 26, 2009 at 13:18

community wiki

Rezlaj

Collectives™ on Stack Overflow

How to change CSS style of nested list items?

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related