Rudie Rudie - 1 month ago 13
CSS Question

CSS select all child elements except first two and last two

I'm very curious (that's all) to see how you would select all children of an element except the first two and last two.

I've a method, but it's nasty and unreadable. There must be a much clearer method that doesn't need 8 pseudo-selectors.

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


Yeah, that's pretty horrible. It literally selects all elements that are :not the first or second first or last. There must be a method that uses
2
as a semi-variable, instead of piling on pseudo-selectors.

I thought of another one (still messy):

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

Answer

You don't even need :not(). :nth-child(n+3):nth-last-child(n+3) works fine.

Check it out here.

Comments