CSS Override problem

HTML & CSS
1

I’ve got two style linked style sheets. The problem is, the first style sheet seems to override the second one which shouldn’t be. I’ve tried switching which is linked first. No go. I basically want to override the applied stylesheet to be the .cal_month class. Not the surrounding div. Thanks for your help!

The first linked one contains this:

#contenttext ul,div.contenttext ul {
list-style-type:circle;
padding:10px;
margin-left:20px;
padding-left:20px;
margin-right:55px;
}

The second linked one contains this:

.cal_month ul{
	clear:both;
	list-style:none;
	margin:0px;
	padding:4px;
	margin:auto;
	width:168px;
	color:#FFF;
	}

The HTML code:


<div id="contenttext">
<div id="08_2010" class="cal_month load_cal">
</div>
</div>
2

Just use this:

#contenttext .cal_month ul{
    clear:both;
    list-style:none;
    margin:0px;
    padding:4px;
    margin:auto;
    width:168px;
    color:#FFF;
    }

It’s an issue of specificity.

3

To sum up the specificity issue:

If you have two conflicting declarations that can both apply to a particular element:

[list][]if one is declared in an inline style attribute, it wins … or else
[]if one declaration has more IDs (eg #contenttext) than the other, it wins … or else
[]if one declaration has more classes (eg .cal_month) than the other, it wins … or else
[]if one declaration has more elements (eg div) than the other, it wins … or else
[*]whichever one is specified last, wins.[/list]

4

Well, I just learnt something new! Thanks for the help!