CSS wybierz wszystkie elementy potomne oprócz pierwszych dwóch i ostatnich dwóch

Question

Jestem bardzo ciekawy (to wszystko), aby zobaczyć, jak wybrałbyś wszystkie dzieci elementu oprócz pierwszych dwóch i dwóch ostatnich.

I've a method, ale jest nieprzyjemny i nieczytelny. Musi istnieć znacznie bardziej przejrzysta metoda, która nie wymaga 8 pseudo-selektorów.

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

Tak, to dość okropne. Dosłownie wybiera wszystkie elementy, które są: nie pierwsze lub drugie pierwsze lub ostatnie. Musi istnieć metoda, która używa 2 jako pół-zmiennej zamiast ustawiania pseudo-selektorów.

I thought of another one (nadal brudny):

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

Answer 1

Nie trzeba nawet :not(). :nth-child(n+3):nth-last-child(n+3) działa dobrze.

Sprawdź to here.

Answer 2

nie widzę innego wyjścia niż używanie :nth-child i :not(:nth-last-child).

Moja wersja: hr:nth-child(n+3):not(:nth-last-child(-n+2))

DEMO

Według :nth-child odniesienia:

:nth-child CSS pseudo-klasa pasuje do elementu, który ma an+b-1 rodzeństwa przed nim w drzewie dokumentu, dla podana wartość dodatnia lub zerowa dla n, i ma element nadrzędny.

Innymi słowy, ta klasa pasuje do wszystkich dzieci, których indeks mieści się w zbiorze { an + b; ∀n ∈ N }.

Tak więc nth-child(n+3) pasuje do wszystkich elementów, począwszy od trzeciego.

:nth-last-child działa podobnie, ale od końca kolekcji elementów, więc :nth-last-child(-n+3) pasuje tylko 2 elementy począwszy od końca kolekcji. Z powodu :not te 2 elementy są wykluczone z selektora.

Answer 3

Można po prostu ustawić swoją fioletowy do wszystkich elementów, a następnie usunąć go z tych niechcianych 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 */ 
} 

Thats imho znacznie łatwiejsze do odczytania