Reputation: 1121
I'm developing a scheduling viewer that shows 7 days to view. The "grid" is broken down into hourly slots, so there are 24 per day. These are all divs of the same class. I want to color the background according to the shift. Each shift is 8 hours so the first 8 divs should have a background of colorA, the next 8 colorB and then next 8 colorC. This pattern should then repeat for 25-48, etc. (e.g. 25-32 colorA, 33-40 colorB, 41-48 colorC, then start again with colorA)
I got it working for the first 24 divs, but don;t know how to restart the coloring after 24.
Here's what I have so far:
.cell_class:nth-child(-n+8) {
background-color: blue ;
}
.cell_class:nth-child(n+8) {
background-color: green ;
}
.cell_class:nth-child(n+16) {
background-color: red ;
border-right: 1px solid black ;
}
Can anyone point me int he right direction?
I added fiddle here: http://jsfiddle.net/mark2457/2YTBc/
As you can see it works great fro first 24, but doesn't wrap back to first color on 25
Thanks
Mark
Upvotes: 0
Views: 243
Reputation: 66
You could as Eugene says wrap each 24 hour section in a container for a day. That is probably the best method. If you for some reason cannot do that, you could always generate the CSS for the sections.
.cell_class:nth-child(n+8){}
.cell_class:nth-child(n+16){}
.cell_class:nth-child(n+24){}
... etc.
I have created an example of this using SASS. http://codepen.io/davidsturgeon/pen/iaIzf
Upvotes: 1
Reputation: 6290
How about separating days with HTML markup? Basically have a <div>
for each day, containing 24 <div class='cell_class'>
, one for each time slot. This way coloring will restart automatically.
Upvotes: 1