Select all except first and last td element in one selector
It is syntactically correct, as you can quickly check using the W3C CSS Validator. The validator is known to have errors, so in principle, you should check the rule against CSS specifications, especially Selectors Level 3. The result is still that yes, it is correct.
It also has the desired meaning, since this is how selectors combine. You can use :not(...)
selectors to express a condition of type “not ... and not ...”.
This applies provided that all children of tr
elements are td
. If there are header cells, i.e. th
elements as well, then the selector applies to those data cells (td
elements) that are not the first data cell or the last data cell in a row with .red
class.
May be this would help
tr.red td:not(:first-child):not(:last-child)
{
//your styles
}
Sample
As some have mentioned, td:first-child
selects the first child element of the parent TR
if it is a TD
, whereas td:first-of-type
selects the first TD
regardless of any TH
that may come before it.
As a result, if you have any TH
elements in your rows, your code won't give you all the cells that aren't first or last.
tr.red > *:not(:last-child):not(:first-child)
{ /* ... your css code ... */ }
I think it should work well this way. Even if you wanted to have separate code for TH
and TD
, you could do it like th:not(:first-child)
and td:not(:first-child)
.
Typically, :first-of-type
is more intuitive when you want to style the first instance of a tag name, (like p:first-of-type
).