CSSは最初の2つと最後の2つを除くすべての子要素を選択します

Question

最初の2つと最後の2つを除く要素のすべての子をどのように選択するかは非常に興味があります。

I've a methodですが、それは厄介で判読不能です。 8つの疑似セレクタを必要としないはるかに明確な方法が必要です。

:not(:nth-child(1)):not(:nth-child(2)):not(:nth-last-child(1)):not(:nth-last-child(2)) { 
    background: purple; 
} 

ええ、それはかなり恐ろしいです。これは文字通り、すべての要素を選択します。第1または第2の最初または最後ではありません。疑似セレクタを積み重ねるのではなく、準変数として2を使用するメソッドが必要です。

I thought of another one（まだ汚い）：

:not(:nth-child(-1n+2)):not(:nth-last-child(-1n+2)) { 
    background: purple; 
} 

Answer 1

を読むためにあなたも:not()は必要ありません。 :nth-child(n+3):nth-last-child(n+3)は問題なく動作します。

hereを確認してください。

Answer 2

私は:nth-childと:not(:nth-last-child)を使用するよりも、他のオプションが表示されません。 :nth-child CSSの擬似クラスは、文書ツリー内で前an+b-1兄弟を持つ要素にマッチする

：

マイバージョン：:nth-child文献によればhr:nth-child(n+3):not(:nth-last-child(-n+2))

DEMO

nに対して正またはゼロの値が与えられ、親要素を持ちます。

つまり、このクラスは、インデックスがセット{ an + b; ∀n ∈ N }にあるすべての子に一致します。

したがってnth-child(n+3)は、すべての要素に一致します。第3の要素から始まります。

:nth-last-childも同様ですが、要素のコレクションの最後から、:nth-last-child(-n+3)はコレクションの最後から2つの要素に一致します。 :notのため、これらの2つの要素はセレクタから除外されます。

Answer 3

あなたは、単にすべての要素にあなたの紫を設定し、3個の不要なものからそれを削除できます。

element { background: purple } 
element:first-child, element:nth-child(2), element:last-child, element:nth-last-child(2) { 
    background: none; /* or whatever you want as background for those */ 
} 

ザッツをはるかに簡単に私見