67

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?

gsgx
  • 12,020
  • 25
  • 98
  • 149
  • related to this: http://stackoverflow.com/questions/7403129/combining-not-selectors-in-css – Spudley Dec 20 '12 at 21:53
  • 1
    This one's more closely related: http://stackoverflow.com/questions/10033299/is-there-any-way-to-specify-a-css-shorthand-for-all-elements-except-the-first-l (probably even a dupe) – BoltClock Dec 21 '12 at 18:57

5 Answers5

113

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)
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
6

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

Simone
  • 20,302
  • 14
  • 79
  • 103
  • I think your answer is the best, because it's cross-browser, so 7,8(still actual), windows phones with old ie supports it. – Serg Apr 17 '14 at 07:11
3

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 */ }
Icado
  • 59
  • 7
2

I think this should work for you:

table.programs tr td:not(:first-child,:last-child)
A F
  • 7,424
  • 8
  • 40
  • 52
  • Well, he sad CSS selectors (which jQuery also uses). But considering the syntax he posted, the point is moot =). – A F Dec 20 '12 at 22:06
  • Note, if you're using this in CSS, this is not supported in some older browsers. I would consider giving all your first and last elements `first` and `last` classes if possible. – A F Dec 20 '12 at 22:08
  • jQuery uses a non-standard version of `:not()`, so while this is a valid jQuery selector, it is not a valid CSS selector (yet), so it won't work in a stylesheet. That's when the distinction between "CSS selector" and "jQuery selector" (from @Barmar's comment) becomes very important. See [What's the difference in the :not() selector between jQuery and CSS?](http://stackoverflow.com/questions/10711730/whats-the-difference-in-the-not-selector-between-jquery-and-css) – BoltClock Dec 21 '12 at 18:56
  • Exactly. jQuery's selectors are a superset of CSS selectors, although many of them are in CSS4. – Barmar Dec 21 '12 at 19:08
1

It works in this way

    table.programs tr td:nth-child(1n+2):not(:last-child)
Hossein Khalili
  • 172
  • 1
  • 8