Responsive lists and the nth-child selector - html-lists

Question

I'm having problems understanding nth-child in order to style a list using media queries. I have an unordered list of 6items that displays the items horizontally using display:inline-block; in the following manner:
[item1] [item2] [item3] .... [item6]
ul {
list-style-type: none;
margin-left: auto;
padding:0;
text-align:center;
li {
display:inline-block;
font-size: ms(3);
padding-left: 0.5em;
margin-left: 0.5em;
margin-bottom: 0.2em;
border-left: 1px dotted #d1d1d1;
&:first-child {border:none; margin-left:0;};
a {text-decoration:none;}
}
I'm using foundation 3.2 and Sass, and this unordered list resides inside a div of 12 columns. Ideally, I'd like the list to break-down when the browser width is smaller than 768px as follows:
[item1] [item2] [item3]
[item4] [item5] [item6]
Moreover when the screen is smaller than 320px I'd like the list to display like this:
[item1] [item2]
[item3] [item4]
[item5] [item6]
How can I implement something like this?
Also, I'm using border-left: 1px dotted #d2d2d2 to make a separator between the list items, while having no border for the first item. How can I utilize nth-child so that in the 768 case I don't get the left-border for both the 1st and 4th items? Additionally, in the 320 case how should I implement nth-child so that there is no left-border in items 1,3 and 5

Answer 1

Have you considered using the CSS Columns module? It will do all the math for you (paddings, where the divider appears, etc.). The only problem is that it sorts the items in a different order than what you want.
If you use a column width that is a specific width, it will add/remove columns as necessary for the width of the device without needing media queries.
http://jsfiddle.net/W84Ja/
ul {
padding: 0;
columns: 8em;
column-rule: 1px solid;
column-gap: 2em;
list-style-type: none;
}
If you're looking for a percentage style division, use a specific number of columns combined with media queries.
http://jsfiddle.net/W84Ja/1/
ul {
padding: 0;
columns: 2;
column-rule: 1px solid;
column-gap: 2em;
list-style-type: none;
}
#media (min-width: 25em) {
ul {
columns: 3;
}
}
If you're still set on using inline-block list items, this would be the way to do it:
http://jsfiddle.net/W84Ja/2/
#media (max-width: 20em) {
li:nth-child(even) {
border-left: 1px solid;
}
}
#media (min-width: 20em) and (max-width: 30em) {
li:nth-child(3n+2), li:nth-child(3n+3) {
border-left: 1px solid;
}
}