CODEWITHSUNDEEP
csscss-selectors
mark1234
mark1234

Reputation: 1121

CSS repeating ranges with nth-child

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

Answers (2)

David Sturgeon
David Sturgeon

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

Evgeny
Evgeny

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

Related Questions