Jump to content

Two lists with different styling in div


kurt.santo

Recommended Posts

I have a div with two lists inside. The first one gets its style info from #subNav ul and #subNav li fine, but the second, which has the class applied to its <ul> selector won't style as desired. This list should not have any top-border and the li should have a white background colour instead of a red one...

ul{list-style-type:none;margin:0px;padding:0px;border:none;}li{padding:3px 10px;}#subNav ul{border-top:#8CA4D5 thin solid;}#subNav li{border-bottom:#8CA4D5 thin dotted;color:red;background-color:#06357A;}ul.li2{margin-top:30px;border-top:none; width:150px;}.li2 li{border-bottom:#06357A thin dotted;background-color:#FFF;color:#06357A;}

Any ideas?Kurt

Link to comment
Share on other sites

I was able to style the different lists using this:

#subNav ul { border: 5px solid purple; }#subNav ul li { background-color: red; }#subNav ul.li2 { border: 5px solid yellow; }#subNav ul.li2 li { background-color: green; }

Link to comment
Share on other sites

The ID overrules just the class, so the ID rules were being applied.Jesh offers a CSS rule including both the ID and class, so it wins based on the specificity.http://www.w3.org/TR/CSS21/cascade.html#specificity
This means that an ID can overrule a class, but a class cannot overrule an ID? It also means that my nested list inherits all attributes from parent ID unless I specify differently in class (I use Jesh's solution - cheers, working well:-))?Kurt
Link to comment
Share on other sites

This means that an ID can overrule a class, but a class cannot overrule an ID? It also means that my nested list inherits all attributes from parent ID unless I specify differently in class (I use Jesh's solution - cheers, working well:-))?
Yes - remember, a more specific selector will always overrule a more general one, and ids are more specific than classes.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...