Using spry:hover, spry:even, and spry:odd all together

This post is more than 2 years old.

One of the nicer features of Spry is the simple way you can apply even, odd, and hover classes to a dataset. Consider this example:

<tr spry:repeat="mydata" spry:setrow="mydata" spry:hover="hover" spry:even="even" spry:odd="odd"> <td style="cursor: pointer;">{name}</td> <td style="cursor: pointer;">{age}</td> <td style="cursor: pointer;">{gender}</td> </tr>

This code will tell Spry to apply a CSS class named even for even rows, odd for odd rows, and to notice a mouse over event on a row and apply the hover class. For some reason though I couldn't ever get this to work with the following CSS:

<style> .hover { background-color: yellow; } .even { background-color: red; }

.odd { background-color: blue; } </style>

Yes, I mixed blue, red and yellow. This is why I don't design web sites. Anyway, this never worked correctly for me. Luckily for me (not so much for them), I've got the Spry team on speed dial. Turns out this was a problem with my lack of knowledge of CSS. Kin Blas had this to share:

The 3 rules above all have equal specificity so if you have an element with more than one class on it like this:

<div class="even hover">

The last one defined in the CSS wins ... so in the above example the div would be red even when you hover over it. If you want hover to be more specific, then you have to change the order:

.even { background-color: red }
.odd { background-color: yellow }
.hover { background-color: blue }

When I switched the order - it worked perfectly.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA

Archived Comments

Comment 1 by David Herman posted on 10/23/2007 at 1:39 AM

I think thats a situation where !important is shall we say Important :)
It means hey, i'm the important one so then your not order dependent.

Comment 2 by David Herman posted on 10/23/2007 at 1:40 AM

I should also note that !important is a css keyword that you can add to the defination. Would have helped if that was in my prior comment

Comment 3 by Raymond Camden posted on 10/23/2007 at 1:48 AM

Being a CSS noob, and a lazy you know, you mind posting a small example here?

Comment 4 by Kam posted on 10/23/2007 at 1:56 AM

Specificity and weights explained, in an amusing fashion:

Comment 5 by Raymond Camden posted on 10/23/2007 at 2:04 AM

It's like the Universe made that entry just for me. ;)

Comment 6 by David Herman posted on 10/23/2007 at 4:06 AM

.hover{background-color:blue !important}

Comment 7 by Ken Dunnington posted on 10/23/2007 at 5:56 PM

It probably doesn't need to be said, but don't forget that !important doesn't always work like you'd expect in IE 6/7. Then again, what does? ;)