class not showing

[spiderwell]

i have a UL within a DIV that has an ID, i then use that to set up styling for the list and its elements.

.red {color:#ff0000;	font-weight:bold;} 

#sectionlist { list-style: none; width:800px;margin-left:0; }  
#sectionlist ul{ list-style: none; margin:0px; padding:0px;} 
#sectionlist li { position: relative; margin: 2 0 0 0;  width: 800px;-moz-border-radius: 5px; -webkit-border-radius: 5px; font-size:14px; border:#000000;text-decoration: none;
padding:  1px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background-color: #ddddff;
height:22px;
margin-top:2px;
text-align:left;
font-size:12px;
}

 

 

now i want to make one of the <li> elements have red text, i add a class called red so it looks like this <li class="red">

 

but it never shows up red, i have to end up adding a span or div inside the <li> to get the class of red to work.

 

is this normal behaviour or am I missing something?

[sunfighter]

Try this:

 

#sectionlist li.red {color:#ff0000; font-weight:bold;}

[cssfreakie]

also have a read here: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

[spiderwell]

ah nice link there, basically the id has a higher specificity so it over rules the applied class.

 

 

sunfighter, your idea would be fine if it was all <li> to have red font, but I only want 1 of them too. I guess I hadn't made it clear enough.

 

[cssfreakie]

ah nice link there, basically the id has a higher specificity so it over rules the applied class.

Like the article states it's one of the harder to understand concepts in css.

[spiderwell]

sunfighter, your idea would be fine if it was all <li> to have red font, but I only want 1 of them too. I guess I hadn't made it clear enough.

I am sorry i got that wrong, it worked perfectly.

 

I thought I could just have one class to cover all red text in various different lists, but i guess i need the red class defined inside each id specified too. good to learn though, i am so guilty of not learning css properly as this thread proved