How to select all children except first and last with CSS selectors

CssCss Selectors

Css Problem Overview


How would I select all the children in a table except for the first and last? I've tried this, but it ends up selecting all children that aren't first and all children that aren't last, which ends up being all children:

table.programs tr td:not(:first-child), table.programs tr td:not(:last-child) {
}

I want all children that are neither first nor last. How can I do this?

Css Solutions


Solution 1 - Css

Use two :not() selectors combined, thereby referring to elements that match both of them, i.e. to elements that match neither of the selectors used as operands of :not():

table.programs td:not(:first-child):not(:last-child)

Solution 2 - Css

The jQuery solution is fine, but if you want to do it in pure CSS I'd suggest you to apply the rules to the whole table and then reset them for the first and last children. i.e:

table.programs tr td { 
  /* your rules here */
}

table.programs tr:first-child td:first-child, 
table.programs tr:last-child td:last-child {
  /* reset your rules here */
}

jsFiddle demo

Solution 3 - Css

like this.

li:nth-child(n+2):nth-last-child(n+2) { background: red; }

for your requirement

table.programs tr td:nth-child(n+2):nth-last-child(n+2) { /* Your Style */ }

Solution 4 - Css

I think this should work for you:

table.programs tr td:not(:first-child,:last-child)

Solution 5 - Css

It works in this way

    table.programs tr td:nth-child(1n+2):not(:last-child)

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questiongsingh2011View Question on Stackoverflow
Solution 1 - CssJukka K. KorpelaView Answer on Stackoverflow
Solution 2 - CssSimoneView Answer on Stackoverflow
Solution 3 - CssIcadoView Answer on Stackoverflow
Solution 4 - CssAakil FernandesView Answer on Stackoverflow
Solution 5 - CssHossein KhaliliView Answer on Stackoverflow