Class Red to be added before Class Green or Yellow

[TurtleWolf]

I am trying to color code our work flow. Red is a customer that has not been serviced in 2 weeks. Yellow is a new ticket that has just been opened, but not assigned to an employee yet. Green is for a customer that has been assigned to an employee and is ready for work to begin. Yellow and Green are both defined in the database. Red class is set dynamically with javascript based on 2 weeks from last service date. The problem is that Red is over writing Yellow and Green. I need to make sure the red class is set before them rather than after. Any suggestions.

<h6 id="27" class="red yellow ui-accordion-header ></span>
11111			
$142.00</h6>

as opposed to

<h6 id="27" class="yellow ui-accordion-header red></span>
11111			
$142.00</h6>

[felgall]

The order of the class names in the class attribute is irrelevant - all orders are equivalent.

It is the order that the classes are defined in the style sheet that is what determines which take precedence when they provide conflicting styles.

So to get yellow to not be overridden by red you need to remove the red class when it comes after yellow in the class list.

[ralph.m]

Red class is set dynamically with javascript ...

In that case, an alternative to adding in a class name would instead be to insert an inline style, which will override styles in the style sheet. E.g.

<h6 id="27" class="yellow ui-accordion-header style="color: red;">

[dresden_phoenix]

As was said before, the order in the attribute will have NO EFFECT, however you did have a TYPO ( forgetting to close the quotes).

As raplh suggested, adding the inline style attr (color will override any and all classes.

ALTERNATIVELY, since you said you were using JS anyway, you could TOGGLE the color class with JS so that only RED|YELLOW|GREEN is ever present at any given point. That would probably be the cleanest way to do it .

this is one of my scripts I use to toggle classes:

		function toggle(obj, c){
			oc=' '+obj.togs.className+' ';
			ocInd=oc.indexOf(' '+c+' ');
			if (ocInd>-1){
				oc=oc.replace(' '+c+' ','');
				obj.togs.className=oc.replace(/^\s\s*/, '').replace(/\s\s*$/, '')
			}
			else{obj.togs.className=obj.togs.className+' '+c;}
		}

I think now we crossed in the JS forum territory.

oh, incidentally as long as we are doing things properly your class names shouldnt really be named after color but semantic meanings; it will save a lot of headaches in the long run. consider using .urgent, .viewed, and .new as opposed to .red, .yellow, and .green