Выбрать последовательные группы с помощью n-го дочернего элемента?

#css #css-selectors

#css #css-селекторы

Вопрос:

Возможно ли использовать nth-child() для выбора последовательных элементов?

У меня есть упорядоченный список из 24 элементов. Я хочу разделить их на 4 столбца. В настоящее время я делаю это следующим образом:

 #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;
}

Как вы можете видеть, это выйдет из-под контроля с помощью 24-го элемента. Лучше всего было бы использовать столбцы CSS3 для разделения списка на, но важно, чтобы этот сайт работал в IE8.

Я надеялся на что-то вроде этого:

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

Спасибо за помощь!

1. Но IE8 также не поддерживает :nth-child() …

2. Я бы пожертвовал немного семантичностью в своей разметке и разделил каждый столбец на его собственный ul / ol.

3. можете ли вы показать jsfiddle для лучшего понимания того, что вы хотите

4. Это похоже на приемлемое использование таблицы…

Ответ №1:

Попробуйте это

 #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 */

1. 1, потому что это правильно, но если только OP не нашел способ заставить его работать в IE8…

2. Я пометил это как правильное. Я использовал его в сочетании с code.google.com/p/ie7-js и это должно работать в IE8.

3. Также: #location-menu li:nth-child(n 0) может быть упрощен до #location-menu li или #location-menu li:nth-child(n) , если вам нужны согласованные значения специфичности.

Ответ №2:

Возможно, это может вам помочь:

 #location-menu li:nth-child(4n 0){
     margin-left: 0;
}
#location-menu li:nth-child(4n 1){
     margin-left: 100px;
}
...

но он будет отображать элементы по строкам, а не по столбцам…