Weird list behaviour

HTML & CSS
1

I’ve made a little example. There is a list nested inside another list but the text color in the nested list inherits the color of its parent list rather than have the color of its class. The nested list should have blue text, however it’s red.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
	<head>
		<title>Test</title>
		<style type="text/css">
			#mainmenu ul li a {
				color: red;
			}
			ul.submenu li a {
				color: blue;
			}
		</style>
	</head>
	<body>
		<div id="mainmenu">
			<ul>
				<li><a>abc</a><ul class="submenu"><li><a>123</a></li><li><a>456</a></li><li><a>789</a></li></ul></li>
				<li><a>def</a></li>
				<li><a>ghi</a></li>	
			</ul>
		</div>
	</body>
</html>

Does anyone know why is this happening and how to override the parent list attributes without declaring the sub-list as #mainmenu ul li ul.submenu ?

2

Hi,
Your first anchor rule has an ID attached which is giving it more specificity over the anchors in the nested UL.

Unless your design requires the extra wrapping div (it probably doesn’t) you can eliminate it and just style the UL. You can also lose the class on the nested UL.

Be sure to remove your default margin/paddings on the UL for browser consistency. :wink:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    <head>
        <title>Test</title>
        <style type="text/css">
            [COLOR=Blue]#menu li[/COLOR] a {
                color: red;
            }
            [COLOR=Blue]#menu li li[/COLOR] a {
                color: blue;
            }
        </style>
    </head>
    <body>

    [COLOR=Blue]<ul id="menu">[/COLOR]
        <li><a>abc</a>
            [COLOR=Blue]<ul>[/COLOR]
                <li><a>123</a></li>
                <li><a>456</a></li>
                <li><a>789</a></li>
            [COLOR=Blue]</ul>[/COLOR]
        </li>
        <li><a>def</a></li>
        <li><a>ghi</a></li>    
    </ul>

    </body>
</html>
3

Thanks for the explanation. I expected when I specified a class that it would override any inherited attributes from any parent element.

4

'Fraid not - a single ID always outranks any number of classes!

5

I expected when I specified a class that it would override any inherited attributes from any parent element.

Nice article, should get you up to speed.