Styling all elements before an element

[tactics]

Hi folks. New to the forum, and have a tough one.

I’m working on a mobile fitness app for a gym. On one of the pages, there is a section where you select the number of glasses of water you’ve drank in a day from a list. When you select one, that number’s color is supposed to change, as well as all of the numbers previous to it. Here’s an example of how it’s supposed to look when the user has selected 4 glasses of water:

http://bushidodesigns.net/pro/water.png

I have the first part of the equation working (the selected number changes color). But for the life of me, I can’t figure out how to change the color of the previous ones. Ideally, I would like a css only solution, rather than a javascript one. Here is the working page in progress:

http://bushidodesigns.net/pro/done/tracking/water.htm

One note: the reason I am styling the labels rather than the radio buttons is because this is a mobile site, and Windows 7 phones will allow you to style the labels to look like the comp, but not the radio buttons.

Any help is greatly appreciated.

[Mottie]

Hmm, I tried to get it to work using the ~ css selector, but no luck. So maybe the best solution would be to use a small piece of code. Here’s a demo of it.

$(function(){

var li = $('.water li');

li.find('input').change(function(){

li.removeClass('hilight');

li.find('input:checked').parent().prevAll().addClass('hilight');

});

});​

and a bit of css

.water .hilight label {

color:#fff;

background:#2397de;

border:2px solid #2397de;

}​

[xpy]

OK… I’ve been thinking for a very long time… I had never put it in practice until now… TADA! The Previous Element Selector!!
It is fake of course… But it does the trick…
And also it probably won’t work on ie…

[Author]

Posts