dynamic background-color

[chiprivers]

I think this is the best place to post the thread, however, those of you with jQuery experience may be better placed to answer it!

 

I have a table in my script where all of the <td> elements have the class set to 'class1'.  Some of these <td> elements then have an additional class set to 'class2' by the php script as it runs.  I then want to be able to apply a further 'class3' dyanically using jquery upon certain events.

 

.class1 has no background-color property

.class2 has a background-color property

.class3 has a different background-color property

 

When the page loads, the background colour of the appropriate <td>s is showing correctly where 'class2' has been applied.  However, when 'class3' is applied, the <td>s without 'class2' change correctly, but the background colour does not apply to those <td>s with a 'class2'.

 

eg

 

class="class1" -> there is no background colour displayed 

class="class1 class2" -> the background colour of 'class2' is displayed 

class="class1 class3" -> the background colour of 'class3' is displayed 

class="class1 class2 class3" -> the background colour of 'class2' is displayed  I want background colour of class3 to be displayed

[haku]

Can't really help without your code.

[chiprivers]

In the body of my html:

<td class="status">...</td> <!-- all elements have the 'status' class 'hardcoded' in the html -->
<td class="status faded">...</td> <!-- some elements have the additional 'faded' class added by the php script -->

 

The css file linked to from within the head of the html contains the following:

.status {
// there is no background-color delaration within this style
}

.faded {
background-color: #333333;
}

.selected {
background-color: #7CAFF2;
}

 

There is then a jQuery script that will apply an additional 'selected' class to some elements on the client side, which in effect ends up with this:

<td class="status selected">...</td> <!-- these elements will take on the background-color of the 'selected' class -->
<td class="status faded selected">...</td> <!-- the background colour of these elements will stay as set by the 'faded' class -->

[haku]

That looks fine there - what jquery function are you using to add the classname? Are you sure that it is actually working and the class name is being added?

 

If possible, can you provide a live link to the page in question?

[chiprivers]

Unfortunately I can't give a link as I only have it running on my lapto - I am using the addClass jQuery function to add the class to the appropriate elements and I know it is working because I can see it in Firebug.

 

Does the order in which the classes are listed within the class property determine their priority?

[haku]

No, only the order in which the CSS is declared in your stylesheet.

 

So if the CSS declarations have the same specificity, then the one that later will be the one that takes precedence.

 

In the CSS you showed, the .selected comes later, so it should take precedence, but maybe it comes earlier in your actual CSS?

 

It's hard to debug without seeing the real code, so as an alternate solution, rather than adding the classname through jquery, maybe you could just change the CSS instead (using .css()).

[chiprivers]

That has sorted it, it was down to the order in which my classes were declared in the style sheet.  I have moved the .selected class to the bottom of the list and no the script is performing perfectly.

 

Thanks for the guidance.