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 ?
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.
<!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>
