選擇與CSS的所有元素，如果恰好有5

我要讓所有5歲以下兒童如果恰好有5（如果存在4個或6，不選擇任何孩子。）選擇與CSS的所有元素，如果恰好有5

舉例說明：http://jsfiddle.net/rudiedirkx/339H6/3/show/

您可以選擇所有的元素，如果有1得很乾脆：

:first-child:last-child

您可以選擇在開頭5個和最後5個元素：

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

（演示中的紅色）兩者都沒有做我想做的事情，但說明了一點：1選擇器，幾個元素。

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)

（在小提琴黃色），但是這是可怕的：

如果有5個與5選擇您可以選擇所有的孩子。當我決定我也喜歡4時，這是非常可怕的：如果確切有4個或5個元素，請全部選中。這將需要4個更多的選擇器。

是否有一個體面的方式來做到這一點，我失蹤了？我覺得:nth-child(-n+5):nth-last-child(-n+5)正在進行中，但選擇方式過於寬泛。（綠色的小提琴。）

來源

2013-04-30 Rudie

請注意，如果特異性不是問題（2個僞類與1），那麼'：first-child：last-child'可以簡單地表示爲'：only-child'。 – BoltClock 2013-04-30 13:45:38

我試圖展示如何使用雙僞選擇器進行選擇。 'n孩子（1）'是特別的那樣，但是我希望有5等的東西。 – Rudie 2013-04-30 15:45:25

您可以使用一般的兄弟組合子確定後，選擇其餘元素的第一個孩子，也是第5最後一個子：

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

你仍然有不幸的是，至少要重複一次選擇器，因爲你需要一個匹配第一個孩子，然後另一個與兄弟組合器匹配其餘的。但它肯定會重複四次。

來源

2013-04-30 13:40:07 BoltClock

美麗的思考！ – Jon 2013-04-30 13:42:49

這真是太棒了！那個'+'和'〜'太奇怪了，太棒了！ – Rudie 2013-04-30 15:46:13

選擇與CSS的所有元素，如果恰好有5

回答

相關問題