выбрать все элементы с помощью CSS, если есть ровно 5

Question

Я хочу, чтобы все 5 детей, если есть ТОЧНО 5. (Если есть 4 или 6, не выбирайте детей.)

Для иллюстрации: http://jsfiddle.net/rudiedirkx/339H6/3/show/

Вы можете выбрать все элементы, если есть 1 очень просто:

:first-child:last-child 

Вы можете выбрать элементы, которые находятся в первой 5 и 5 последних:

:nth-child(-n+5):nth-last-child(-n+5) 

(красный в демонстрации) Оба не делают то, что я хочу, но иллюстрируют точку: 1 селектор, несколько элементов.

Вы можете выбрать все ребенок, если есть 5 с 5 селекторов:

li:nth-child(1):nth-last-child(5), 
li:nth-child(2):nth-last-child(4), 
li:nth-child(3):nth-last-child(3), 
li:nth-child(4):nth-last-child(2), 
li:nth-child(5):nth-last-child(1) 

(желтой в скрипке), но это ужасно. Это вдвойне ужасно, когда я решаю, что ТАКЖЕ как 4: если есть ровно 4 элемента ИЛИ 5, выберите их все. Для этого потребуется еще 4 селектора.

Есть ли достойный способ сделать это, что мне не хватает? Я чувствую, что :nth-child(-n+5):nth-last-child(-n+5) находится на пути, но это выбирает слишком широко. (Зеленый в скрипку.)

Answer 1

Вы можете использовать общий родственный комбинатор, чтобы выбрать остальные элементы после определения того, что первый ребенок также пятый последний ребенок:

li:first-child:nth-last-child(5), 
li:first-child:nth-last-child(5) ~ li 

Вы все еще будете иметь повторить селектор, по крайней мере, один раз, к сожалению, так как вам нужно, чтобы он соответствовал первому ребенку, а затем другому с комбинатором братьев и сестер, чтобы соответствовать остальным. Но это определенно бит повторяет его еще четыре раза.