如果恰好有5个,则用CSS选择所有元素

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个选择器,您可以选择所有孩子:

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个OR 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

不幸的是,你仍然需要重复选择器至少一次,因为你需要一个匹配第一个孩子,然后另一个与兄弟组合子匹配其余的.但它绝对比重复它多四次.