Как при помощи nth-child покрыть только элементы, расположенные с краев?

Question

[Алексей Николаев]

Здравствуйте.
При помощи nth-child можно очень гибко выделять диапазоны элементов, но, как правило, они представляют из себя группу элементов внутри всего набора. Например, в моем примере выделены элементы с 2го по 5й.

Суть вопроса: можно ли при помощи этой же техники, одним css-правилом выделить 1й и с 6го по 7й элементы, окрасить их красным без изменения других стилей и html-кода?.. То есть, инвертировать выделение. Мои эксперименты к успеху пока не привели.

Спасибо.

P.S. Конечно, можно прописать что-то вроде nth-child(1):nth-child(6n), но интересует прежде всего аналогичный приведенному способ, без привязки к жестким параметрам. То есть, от 0 до n и от n+6 до бесконечности.

Answer 1

[Виталий]

Как то так - jsfiddle.net/2xqnycgf/36 :trollface:
Если мы не знаем номер последнего элемента, то никак не сделать одной строчкой в CSS, двумя - без проблем - jsfiddle.net/2xqnycgf/35

Answer 2

[Хазрат Гаджикеримов]

:nth-child(3n)

Вместо числа 3 пишешь какой по счету элемент крайний

Comments

[Алексей Николаев]

Это с конца. А как скомбинировать это с началом? Конструкция nth-child(n+1):nth-child(3n) работает по другому принципу и не выделяет элементы диапазонально. Полагаю, что это может быть невозможно, но хотелось уточнить.

[Хазрат Гаджикеримов]

чуть логики, :first-child { ... }, :nth-child(3n) { .. }, :nth-child(4n) { ... } если конечно 3 элемента

[Алексей Николаев]

Хазрат Гаджикеримов да, так можно, но я спрашивал изначально, можно ли уместить эти несколько правил в одно (как в случае с внутренним диапазоном). По логике такое можно было бы включить в возможности nth-child, но видимо не включили)