CSS class wrong after "display:none"

[veliscorin]

Hi all,

Currently I have some code similar to this

<ul>
<li>item1</li>
<li>item2</li>
<li class="red">item3</li>
<li>item4</li>
</ul>

By default, my stylesheet makes all <li> elements blue in color. Its only the special "item3" that needs to be red so I assigned a class to it (i hope that's a feasible way to do so)

However I have a javascript to toggle the display of the entire <ul>, that is to make it hidden and shown. Toggling the display works just fine, but when I made it back to show, all the <li> are blue. The one with the red class seems to have ignored the css...

IF i did this instead: <li style="color:red">item3<li>
Then it works just as intended, but is this suppose to be the way? Because inline css is not quite the standard around things

Am i missing out anything here?

Many thanks
Veliscorin

[veliscorin]

Hi all,

I found out the reason, I didnt exactly use <li class="red"> actually
I used <li class="on"> Maybe that was a reserved word or so?

Anyway all's well, best of luck to all

Regards
VC

[Fotiman]

Note, "red" is not a good class name. Class names should describe the "content", not the "presentation" of that content. CSS facilitates separation of presentation and content meaning that if you ever want to change the presentation you should be able to just modify the CSS without needing to change the markup. What if you later decide that you want this item to be green instead of red? You'll either need to modify your markup to have a class="green" or you'll have to modify the "red" style rules to produce green text, which would be confusing for any developer that needs to modify the code after you.

So, use class names that describe the content, not the presentation. :-)