Applying styling to my counter elements. Im stuck!

HTML & CSS
1

Would like to apply separate styling to days, hours, seconds etc. Any ideas on how to do this? I am assuming this will take some breaking into the jquery code.

Thanks ahead of time!

http://steelcitycreative.com/count/test.html

2

Seeing as there were no HTML elements on your page to target like the hours, minutes, etc., you’ll probably have to use JavaScript to do this.

3

You have 1 HTML element in the body with the id of defaultCountdown, which is the only element you can specifically target for styles. I’d suggest trying to re-structure the JS to accept four different fields, which you could put into 4 different h1 elements that would be the actual numbers of days, hours, minutes, seconds. That’s my idea.

4

You can set some styles with CSS, but the tricky part is seeing what actual HTML is generated by that JS so that styles can be applied. (It’s hard to read through the JS file and work out what code is generated, but Firebug won’t show the code either.)

You could do a few simple things like this:

span {color: red;}
span.countdown_amount {color: blue;}

I also tried styling each .countdown_amount span with CSS3 pseudo classes like :nth-child(n), but that didn’t work.

5

With the web developer toolbar you can just view generated source.


  <span id="defaultCountdown" class="countdown hasCountdown"><span class="countdown_row countdown_show4"><span class="countdown_section"><span class="countdown_amount">2660</span><br>Days</span><span class="countdown_section"><span class="countdown_amount">14</span><br>Hours</span><span class="countdown_section"><span class="countdown_amount">1</span><br>Minute</span><span class="countdown_section"><span class="countdown_amount">42</span><br>Seconds</span></span></span>

As there are no unique classes on each you could use the adjacent selector (ie7+) to style the items.


.countdown_section{background:red}
.countdown_section + .countdown_section{background:blue}
.countdown_section + .countdown_section + .countdown_section{background:yellow}
.countdown_section + .countdown_section + .countdown_section + .countdown_section{background:orange}
6

Thanks Paul! Never noticed that option.

7

PERFECT! This did the trick… thank you!