Question

Is it possible to use nth-child() to select consecutive elements?

I have an ordered list of 24 items. I want to split them up into 4 columns. Currently I’m doing it like this:

#location-menu li:nth-child(1),
#location-menu li:nth-child(2),
#location-menu li:nth-child(3),
#location-menu li:nth-child(4) {
    margin-left: 0;
}
#location-menu li:nth-child(5),
#location-menu li:nth-child(6),
#location-menu li:nth-child(7),
#location-menu li:nth-child(8) {
    margin-left: 100px;
}

As you can see, it’s going to get out of control by the 24th item. The best thing to do would use CSS3 columns to split the list into, but it’s important that this site work in IE8.

I was hoping for something like this:

#location-menu li:nth-child(1-4) {
    margin-left: 0;
}
#location-menu li:nth-child(5-8) {
    margin-left: 0;
}

Thanks for the help!

Answer 1

Try this

#location-menu li:nth-child(n+0)  { margin-left: 0;     }
#location-menu li:nth-child(n+5)  { margin-left: 100px; }
#location-menu li:nth-child(n+9)  { margin-left: 200px; }
#location-menu li:nth-child(n+13) { margin-left: 300px; }
/* and so on */