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

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.